前端面经前端优化

前端面经 前端优化


降低请求量&＃xff1a;合并资源&＃xff0c;减少 HTTP 请求数&＃xff0c;minify / gzip 压缩&＃xff0c;webP&＃xff0c;lazyLoad。

加快请求速度&＃xff1a;预解析 DNS&＃xff0c;减少域名数&＃xff0c;并行加载&＃xff0c;CDN 分发。

缓存&＃xff1a;HTTP 协议缓存请求&＃xff0c;离线缓存 manifest&＃xff0c;离线数据缓存 localStorage。

渲染&＃xff1a;JS/CSS 优化&＃xff0c;加载顺序&＃xff0c;服务端渲染&＃xff0c;pipeline。

HTTP/2 Web优化最佳实践

DNS与解析

DNS 预读取是一项使浏览器主动去执行域名解析的功能&＃xff0c;其范围包括文档的所有链接&＃xff0c;无论是图片的&＃xff0c;CSS 的&＃xff0c;还是 Javascript 等其他用户能够点击的 URL&＃xff0c;减少用户点击链接时的延迟。

作用&＃xff1a;作用&＃xff1a;根据浏览器定义的规则&＃xff0c;提前解析之后可能会用到的域名&＃xff0c;使解析结果缓存到系统缓存中&＃xff0c;缩短DNS解析时间&＃xff0c;来提高网站的访问速度

如何使用

1. 打开和关闭DNS预解析
   希望在HTTPS页面开启自动解析功能&＃xff0c;添加如下标记

   <meta http-equiv&＃61;"x-dns-prefetch-control" content&＃61;"on">
也可以通过在服务器端发送 X-DNS-Prefetch-Control 报头

2. 自动解析
   Chromium会自动解析href属性&＃xff08;a标签&＃xff09;&＃xff0c;该行为与用户浏览网页是并行的。但为了确保安全&＃xff0c;HTTPS页面不会自动解析
   

   
   

   Chromium不使用浏览器的网络堆栈&＃xff0c;直接使用操作系统的缓存。通过8个异步线程执行预解析&＃xff0c;每个线程处理一个队列&＃xff0c;来等待域名的响应&＃xff0c;最终操作系统会响应一个DNS结果给线程&＃xff0c;然后线程丢弃它&＃xff0c;等待下一个预解析请求。

   
   

3. 手动添加解析

   <link rel&＃61;"dns-prefetch" href&＃61;"http://www.google.com">


4. 在浏览器中设置
   一般来说并不需要去管理预读取&＃xff0c;但是可能会有用户希望关闭预读取功能。这时只需要设置 network.dns.disablePrefetch preference 值为 true 就可以了
   默认情况下&＃xff0c;通过 HTTPS 加载的页面上内嵌链接的域名并不会执行预加载。在 Firefox 浏览器中&＃xff0c;可以通过设置 network.dns.disablePrefetchFromHTTPS 值为 false 来改变这一默认行为。

CDN分发

CDN这个技术其实说起来并不复杂&＃xff0c;最初的核心理念&＃xff0c;就是将内容缓存在终端用户附近。
内容源不是远么&＃xff1f;那么&＃xff0c;我们就在靠近用户的地方&＃xff0c;建一个缓存服务器&＃xff0c;把远端的内容&＃xff0c;复制一份&＃xff0c;放在这里&＃xff0c;不就OK了&＃xff1f;
具体来说&＃xff0c;CDN就是采用更多的缓存服务器&＃xff08;CDN边缘节点&＃xff09;&＃xff0c;布放在用户访问相对集中的地区或网络中。当用户访问网站时&＃xff0c;利用全局负载技术&＃xff0c;将用户的访问指向距离最近的缓存服务器上&＃xff0c;由缓存服务器响应用户请求。


从应用的角度来说&＃xff0c;一般当我们的脚本与 DOM 元素和其它脚本之间的依赖关系不强时&＃xff0c;我们会选用 async&＃xff1b;当脚本依赖于 DOM 元素和其它脚本的执行结果时&＃xff0c;我们会选用defer。

使用字体图标iconfont代替图片图标

字体图标就是将图标制作成一个字体&＃xff0c;使用时就跟字体一样&＃xff0c;可以设置属性&＃xff0c;例如 font-size、color 等等&＃xff0c;非常方便。并且字体图标是矢量图&＃xff0c;不会失真。还有一个优点是生成的文件特别小。

降低CSS选择器的复杂性

浏览器读取选择器&＃xff0c;遵循的原则是从选择器的右边到左边&＃xff1a;

#block .text p {
color: red;
}


1. 查找所有 P 元素。
2. 查找结果 1 中的元素是否有类名为 text 的父元素
3. 查找结果 2 中的元素是否有 id 为 block 的父元素

总结&＃xff1a;

1. 减少嵌套。后代选择器的开销是最高的&＃xff0c;因此我们应该尽量将选择器的深度降到最低&＃xff08;最高不要超过三层&＃xff09;&＃xff0c;尽可能使用类来关联每一个标签元素
2. 关注可以通过继承实现的属性&＃xff0c;避免重复匹配重复定义
3. 尽量使用高优先级的选择器&＃xff0c;例如 ID 和类选择器。
4. 避免使用通配符&＃xff0c;只对需要用到的元素进行选择

减少重绘和回流

重绘&＃xff1a;当页面中元素样式的改变并不影响它在文档流中的位置时&＃xff08;例如&＃xff1a;color、background-color、visibility等&＃xff09;&＃xff0c;浏览器会将新样式赋予给元素并重新绘制它&＃xff0c;这个过程称为重绘

回流&＃xff1a;当Render Tree中部分或全部元素的尺寸、结构、或某些属性发生改变时&＃xff0c;浏览器重新渲染部分或全部文档的过程称为回流。

回流必将引起重绘&＃xff0c;重绘不一定会引起回流&＃xff0c;回流比重绘的代价更高

如何避免

CSS&＃xff1a;

• 避免使用table布局
• 尽可能在DOM树的最末端改变class
• 避免设置多层内联样式
• 将动画效果应用到position属性为absolute或fixed的元素上
• 避免使用CSS表达式&＃xff08;例如&＃xff1a;calc()&＃xff09;

JS&＃xff1a;

• 避免频繁操作样式&＃xff0c;最好一次性重写style属性&＃xff0c;或者将样式列表定义为class并一次性更改class属性。
• 避免频繁操作DOM&＃xff0c;创建一个documentFragment&＃xff0c;在它上面应用所有DOM操作&＃xff0c;最后再把它添加到文档中。
• 也可以先为元素设置display: none&＃xff0c;操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘。
• 避免频繁读取会引发回流/重绘的属性&＃xff0c;如果确实需要多次使用&＃xff0c;就用一个变量缓存起来。
• 对具有复杂动画的元素使用绝对定位&＃xff0c;使它脱离文档流&＃xff0c;否则会引起父元素及后续元素频繁回流。

图片资源优化

1. 使用雪碧图&＃xff1a;
   雪碧图的作用就是减少请求数&＃xff0c;而且多张图片合在一起后的体积会少于多张图片的体积和&＃xff0c;这也是比较通用的图片压缩方案

2. 降低图片质量&＃xff1a;
   压缩方法有两种&＃xff0c;一是通过在线网站进行压缩&＃xff0c;二是通过 webpack 插件 image-webpack-loader。

3. 图片懒加载
   在页面中&＃xff0c;先不给图片设置路径&＃xff0c;只有当图片出现在浏览器的可视区域时&＃xff0c;才去加载真正的图片&＃xff0c;这就时延迟加载。对于图片较多的网站来说&＃xff0c;一次性加载全部的图片&＃xff0c;会对用户体验造成很大的影响

Webpack优化

参考文章:https://blog.csdn.net/qq_56303170/article/details/126452385