前端性能优化

偏执的太偏执、 2022-06-09 10:30 409阅读 0赞

## 第一部分 ##

1、内容层面
      DNS解析优化（DNS缓存、减少DNS查找、keep-alive、适当的主机域名）
      避免重定向（/还是需要的）
      切分到多个域名
      杜绝404
    
    2、网络传输阶段
        减少传输过程中实体的大小
        缓存
        cookie优化
        文件压缩（Accept-Encoding：g-zip）
        减少请求的次数
        文件适当的合并
        雪碧图
        异步加载（并发,requirejs）
        预加载、延后加载、按需加载
    
    3、渲染阶段
        js放底部，css放顶部
        减少重绘和回流
        合理使用Viewport 等meta头部
        减少dom节点
        BigPipe
    
    4、脚本执行阶段
        缓存节点，尽量减少节点的查找
        减少节点的操作（innerHTML）
        避免无谓的循环，break、continue、return的适当使用
        事件委托

## 第二部分 ##

1、请减少HTTP请求

合并图片（css sprites），合并CSS和JS文件；图片较多的页面也可以使用 lazyLoad 等技术进行优化。

2、 请正确理解 Repaint 和 Reflow

Repaint(重绘)就是在一个元素的外观被改变，但没有改变布局(宽高)的情况下发生，如改变visibility、outline、背景色等等。
    
    Reflow(重排)就是DOM的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证DOM树上的所有其它结点的visibility属性，这也是Reflow低效的原因。如：改变窗囗大小、改变文字大小、内容的改变、浏览器窗口变化，style属性的改变等等。
    
    减少性能影响的办法：
    
    有动画效果的元素，它的position属性应当设为fixed或absolute，这样不会影响其它元素的布局；如果功能需求上不能设置position为fixed或absolute，那么就权衡速度的平滑性。

3、 请减少对DOM的操作

对DOM操作的代价是高昂的，这在网页应用中的通常是一个性能瓶颈。
    
    合理的使用JavaScript变量储存内容，考虑大量DOM元素中循环的性能开销，在循环结束时一次性写入。
    
    减少对DOM元素的查询和修改，查询时可将其赋值给局部变量。

4、 使用JSON格式来进行数据交换

JSON是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是 JavaScript原生格式，这意味着在 JavaScript 中处理 JSON数据不需要任何特殊的 API 或工具包。
    
    与XML序列化相比，JSON序列化后产生的数据一般要比XML序列化后数据体积小，所以在Facebook等知名网站中都采用了JSON作为数据交换方式。
    
    JS操作JSON：
    
    在JSON中，有两种结构： 对象和数组。
    
    var jsonlist=[{
       "name":"darren","age":24,"location":"beijing"},{
       "name":"weidong.nie","age":24,"location":"hunan"}];

5、 高效使用HTML标签和CSS样式

HTML是一门标记语言，使用合理的HTML标签前你必须了解其属性，比如Flow Elements，Metadata Elements ，Phrasing Elements。比较基础的就是得知道块级元素和内联元素、盒模型、SEO方面的知识。
    
    CSS是用来渲染页面的，也是存在渲染效率的问题。CSS选择符是从右向左进行匹配的，这里对css选择符按照开销从小到大的顺序梳理一下：
    
    ID选择符 #box
    
    类选择符 .box
    
    标签 div
    
    伪类和伪元素 a:hover
    
    当页面被触发引起回流（reflow）的时候，低效的选择符依然会引发更高的开销，所以请避免低效。

6、 使用CDN加速（内容分发网络）

基本原理：
    
    CDN的全称是Content Delivery Network，即内容分发网络。
    
    "其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。" - 百度百科。

7、 将CSS和JS放到外部文件中引用，CSS放头，JS放尾

JavaScript是浏览器中的霸主，为什么这么说，因为在浏览器在执行JavaScript代码时，不能同时做其它事情，即<script>每次出现都会让页面等待脚本的解析和执行（不论JavaScript是内嵌的还是外链的），JavaScript代码执行完成后，才继续渲染页面。这个也就是JavaScript的阻塞特性。

8、精简CSS和JS文件：

1.压缩JS
    
        java -jar yuicompressor-2.4.2.jar api.js > api.min.js
    
    2.压缩CSS
    
        java -jar yuicompressor-2.4.2.jar style.css > style.min.css。

9、压缩图片和使用图片Sprite技术

注：其实压缩图片和图片精灵是两个方面的技术，可是既然都是关于图片的优化还是放到一块吧。
    
    现在由于工作的细分，专业的前端工程师已经少有机会去切图了，可是关于图片压缩还是得略微了解，一般图片压缩的方式有：
    
        1.缩小图片分辨率；
    
        2.改变图片格式；
    
        3.降低图片保存质量。

10、 注意控制Cookie大小和污染

因为Cookie是本地的磁盘文件，每次浏览器都会去读取相应的Cookie，所以建议去除不必要的Coockie，使Coockie体积尽量小以减少对用户响应的影响；
    
    使用Cookie跨域操作时注意在适应级别的域名上设置coockie以便使子域名不受其影响；
    
    Cookie是有生命周期的，所以请注意设置合理的过期时间，合理地Expire时间和不要过早去清除coockie，都会改善用户的响应时间。