jyl919221lc的博客

requestAnimationFrame 的核心优势是与浏览器渲染流程深度集成，通过减少无效渲染、自动节流、帧率同步等机制，显著提升动画性能。

CSS 自定义属性（也称为 CSS 变量）允许你在 CSS 中定义可重用的值，并在整个样式表中引用。它们以 – 开头，并通过 var() 函数调用自定义属性通常在 :root 选择器中定义，以便全局使用通过 var() 函数引用自定义属性。

！！！存储限制：存储大小：大多数浏览器对 localStorage 和 sessionStorage 的存储限制为 5MB 左右。数据类型：存储的数据必须是字符串。如果要存储对象或数组，可以使用 JSON.stringify() 将其转换为字符串，读取时使用 JSON.parse() 转换回对象或数组。5.Canvas 和 SVG这里有canvas绘制简单图形的步骤，感兴趣可以看看，这个是是后续会总体整理的面试大纲svg与canvas区别主要事件：关键属性：特点：这里特殊提下，ws创建成功的状态码

使用webpack+babel-loader是支持可选链操作符最简单的方式，直接在webpack配置中添加babel-loader及其选项，无需额外的配置文件，即可在项目中使用这一便捷的语法特性。

opacity: 0: 将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。display: none: 渲染树不会包含该染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。visibility: hidden: 元素在页面中仍占据空间，但是不会响应绑定的监听事件。transform: scale(0,0): 将元索缩放为 0。z-index: 负值: 来使其他元素遍盖住该元素。

* 仅在需要时显示滚动条 *//* 内容溢出时可见 *//* 内容溢出时隐藏 *//* 始终显示滚动条 */

* 针对子元素的行列设置，可以先根据这里绘制出一个简化版表格，然后根据表格的线来理解 2/3的含义 ，-1代表从当前开始到结束 */| 列1 | 列2 | 列3 |/* 三行 100px 1fr自适应 100px*//* 两列 200px 1fr自适应*//* 简写方式 2/3*//*网格间距10px*/

最新前端面试题汇总大全(含答案超详细)--持续更新

渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

事件代理（），又称之为事件委托。是JavaScript中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定的事件委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好处是可以提高性能可以大量节省内存占用，减少事件注册，比如在table上代理所有td的click事件就非常棒可以实现当新增子对象时无需再次对其绑定。

margin(外边距)- 清除边框外的区域，外边距是透明的。border(边框)- 围绕在内边距和内容外的边框。padding(内边距)- 清除内容周围的区域，内边距是透明的。content(内容)- 盒子的内容，显示文本和图像。W3C的标准盒模型：在标准的盒子模型中，width指content部分的宽度IE的盒模型：在IE盒子模型中，width表示content+padding+border这三个部分的宽度如何开启不同盒子模型标准盒子模型IE盒子模型Grid。

!!理解学习，有问题/补充欢迎指出，随时改正!!!

擦除指定矩形区域：clearRect(x, y, width, height);绘制矩形边框：strokeRect(x, y, width, height);moveTo()方法将坐标移至直线起点： ctx.moveTo(x,y);绘制填充矩形：fillRect(x, y, width, height);stroke()方法，绘制图形的边界轮廓： ctx.stroke();lineTo()方法绘制直线： ctx.lineTo(x,y);绘制矩形：rect(x,y,width,height)；

绘制大小为新canvas的尺寸，！如果截取的大于canvas尺寸会隐藏掉。：代表从image的(10,10)位置截取，截取大小为300*300大小。：想要在刚刚生成空白的canvas的什么位置开始绘制，这里设置为原点。低代码生成模板后，想要在使用时将低代码模板截取出部分作为后续选择。：img标签，video视频元素，canvas，img图片。

1.rotate(xxdeg) //2D旋转2.rotateX()或rotateY() //3D旋转旋转都是以中心为基点,deg表示旋转的角度，为负数时表示逆时针旋转1.所有的基点默认都在中心位置，我们可以使用来改变元素基点2.x也可以设置对应的百分比位置left=100%;center=0%;right=0%3.y也可以设置对应的百分比1.语法：transition-delay: timez-index属性是用来设置元素的堆叠顺序或者叫做元素层级，z-index的值越大，元素的层级越高。

如果在setAttribute时发现a标签中download属性发生改变但是window文件窗口的名称未改变，那么可能是因为服务端返回的响应头中设置了文件名。这时候，浏览器会优先使用服务端返回的文件名作为下载文件的名称，而忽略前端设置的下载属性。

下方ctx.beginPath()开辟新路径前后共生成两个环形图，第一个代表下方灰色，第二个代表蓝色。1.通过标签给出canvas宽高，绑定canvas-id一会根据这个进行生成。2.页面挂载调用方法进行环形图渲染。

【代码】三栏布局 - 四种实现方式(flex/float/grid/position定位)

控制台的延迟渲染：浏览器控制台在显示数组时，可能会使用一种延迟渲染的机制。当你点击展开数组时，控制台会重新计算数组的内容，并显示最新的状态。console.log打印数组在控制台中显示的长度正常，实际展开内容变化。这里不要理解为console.log。

较新版本的 Chrome（版本 125.0.6422.142）已经更新了其国际化实现，以默认使用24小时制。较旧版本的 Chrome（版本 86.0.4240.198）仍然使用12小时制。

下拉刷新和上拉加载两种交互方式通常出现在移动端，本质上等同于pc网页中的分页，只是交互形式不同开源社区有很多优秀的解决方案，如iscroll等使用原生方式实现上拉加载，下拉刷新，有助于对对第三方库有更好的理解与使用。

实现节流防抖函数