前端性能优化

前端段

已于 2023-02-21 16:47:27 修改

阅读量202

点赞数

CC 4.0 BY-SA版权

文章标签：前端性能优化

于 2020-06-13 17:19:14 首次发布

本文链接：https://blog.youkuaiyun.com/hkduan/article/details/106727538

本文提供了一套全面的前端性能优化方案，涵盖缓存控制、TCP复用、GZIP压缩、Cookies管理、减少HTTP请求、多域名分发、使用CDN等技术手段，以及在HTML、CSS、JavaScript方面的具体优化策略，帮助提升网页加载速度和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 请求和响应

缓存控制

请求头里，可以发送 If-Modified-Since 以及 If-None-Match 等信息，来询问服务端请求内容是否有更新，如果没有更新，可返回304，告诉浏览器使用缓存，避免重新下载资源。Pragma 和 Cache-Control 等也能控制缓存。如告诉服务端不要缓存等。

响应头里，Expires 可以告诉浏览器过期时间，Last-Modified 最近更新时间，ETag 则可允许浏览器进行缓存验证(在 If-None-Match 请求信息中使用)。

复用TCP

请求头里，Connection 可控制 TCP 通道的使用，使用 keep-alive 可以复用上次打开的 TCP。

GZIP压缩

如果可以启用 gzip 压缩，将减少响应数据大小，加快响应。请求头里面可用 Accept-Encoding 告知浏览器支持的压缩方式，而服务端则用 Content-Encoding 作为回应。

发送请求时，cookies 也在请求之中。因此，cookies 也可以作为减少请求的优化对象。如，根据同源限制策略，可以使用多个域名加载资源，如加载静态资源，就不会发送多余的 cookies；同时，合理设置 cookies 的路径和域名，如在子站避免不必要的来自父站的 cookies。

减少HTTP请求

有很多细节可以实现，比如CSS Sprites、Data URL等等，由于此部分内容和下述内容有所重复，故部分细节在下面会讲到。

多域名分发

同域下浏览器能并发的请求有限，而为了增加并发，尤其是一些静态资源上，可以使用多个域名。但由于域名DNS解析本身也是耗时的，所以实践原则是2-4个为宜。

需要额外提醒的是，加载图像资源的时候，并发没有问题；但在加载 JavaScript 脚本的时候，还是会暂停加载其他资源。

使用CDN

根据用户能访问的最快位置加速访问。

避免重定向和404

重定向和404将浪费加载请求。

favicon.ico

浏览器默认加载的资源，最好能够缓存之。

2 HTML

减少DOM

过多的DOM元素会影响渲染、加载、执行。除了精简页面结构外，还可以适时删除不必要的DOM元素(页面内已经不会再访问的元素)，又或者可以懒加载(不一定会使用到的元素，如登录框)。

CSS 和 JavaScript 文件位置

CSS 放 head，JavaScript 放 body 闭标签前。乃是因为：

样式表不参与 DOM 修改，所以不会为了解析样式停止文档解析

浏览器要避免重绘，在没有拿到全部样式前不会开始渲染

解析样式时，有的浏览器(FF)会停止脚本运行，而有的(Webkit)则会在脚本访问样式属性但可能受未加载样式影响时停止脚本运行

脚本解析中可能请求样式，如果样式还未解析完毕就会出错

脚本执行将暂停文档的解析和资源的下载

因此，将二者放在适当的位置，能够极大提高渲染效率。

脚本延迟加载

可将脚本添加 defer 和 async 属性。两个属性的共通点在于，脚本的加载和文档的解析是同步进行的，而区别在于：async 一旦加载完毕，立即停止文档解析并执行脚本；defer 等待文档解析完毕后再执行。

合理使用内联

脚本和样式，应按需选择内联或者外链。对于访问少、样式和脚本复用少的页面，可以考虑使用内联样式从而减少 HTTP 请求。但如果页面访问频繁，样式脚本在多个页面经常复用，使用外链则是最优选择。

无论如何，需要避免使用 @import 来导入样式。

而图像也是一样，高级浏览器支持将图像数据直接 base64 编码在 src 属性里，必要时可直接在 HTML 里输出图片数据。

减少iframe

iframe 本身有许多优点，比如可以并行下载脚本，适合加载慢内容(如广告)，同时浏览器可以对其进行安全控制。

减少使用 iframe 的主要考虑是：iframe 会阻碍页面加载，同时也没有语义。

3 CSS

选择器

选择器效率排行如下：

ID选择器

类选择器

标签选择器

相邻选择器

子选择器

后代选择器

通配符选择器

属性选择器

伪类选择器

效率与优先级并不是对等关系，优先级高的不一定效率高。如 #id.class 合用比单个 #id 的优先级高，但效率却比值慢。

选择器书写建议是：

避免使用通配符

不使用标签名或类名修饰ID规则：如果规则使用ID选择器作为关键选择器，不要给规则添加标签名。因为ID本身就是唯一的，添加标签名会不必要地降低匹配效率

不使用标签名修饰类：相较于标签，类更具独特性

尽量选择最具体的方式：造成低效的最简单粗暴的原因就是在标签上使用太多规则。给元素添加类可以更快细分到类方式，可以减少规则去匹配标签的时间

关于后代选择器和子选择器：避免使用后代选择器，非要用的话建议用子选择器代替，但子选择器也要慎用，标签规则永远不要包含子选择器

利用可继承性：没必要在一般内容上声明样式

避免滤镜、表达式、Hack

效率低。

Sprites

合并图片可减少 HTTP 请求。其他建议有：

Sprite 中水平排列图片，垂直排列会增加文件大小

Sprite 中把颜色较近的组合在一起可以降低颜色数，理想状况是低于256色以便适用PNG8格式

不要在Spirite的图像中间留有较大空隙。这虽然不大会增加文件大小,但对于用户代理来说它需要更少的内存来把图片解压为像素地图。100×100的图片为1万像素，1000×1000就是100万像素

使用3D动画

使用 transform: translate3d 等可加速 GPU 渲染。

4 JavaScript

避免重排

渲染中可能存在的高成本操作：

修改、增加、删除DOM节点

移动DOM位置或者动画效果

CSS样式修改(重绘比重排好些)

调整窗口大小，或者滚动时有绝对定位、fixed 背景以及动画

修改页面默认字体

浏览器一般会缓存Render Tree的更新渲染，但以下情况除外：

调整窗口大小和修改页面默认字体

client/offset/scroll

getComputedStyle() currentStyle

优化建议：

修改 className 而非 style

离线 DOM 后修改，如 documentFragment 或者 display:none 后再调整样式

缓存属性值

动画使用 absolute/fixed

不使用 table 布局(牵一发动全身)

修改层级比较低的 DOM

事件委托

将多个节点上的事件放到其父节点(经典案例：将 li 上的事件绑定到 ul 上)。

内存管理

合理释放和缓存内存。如缓存复用的属性，接触对象引用等。

5 资源

压缩大小

压缩样式、脚本、图像等资源的大小。

针对图像资源，可从预览小图、格式选择等多角度优化。

懒加载

如图像的懒加载(滚动到显示区域后才加载)等。

预加载

针对之后会用到的资源提前加载。

6 客户端

localStorage 缓存

相比 cookies，localStorage 存储容量更大。可以将一些静态资源(如 jQuery库)等缓存。

一、原生dom性能优化

自定义变量，缓存对DOM元素查找的结果

var pDiv = document.getElementByid(“parent”); 通过缓存减少DOM元素的查找操作。
(查找id最快，查tag最慢)
把length缓存起来，不要在for里面动态取length

function loopCacheLengthCollection(){  
    var coll = document.getElementsByTagName('div'),  
        len = coll.length;  
    for (var count = 0; count < len; count++){  
        //processing...  
    }  
}

对比下面2种写法，第一种很慢，第二种缓存数据后快了百倍

//第一种
function collectionGlobal(){  
    var coll = document.getElementsByTagName('div'),  
        len = coll.length,  
        name = '';  
    for (var count = 0; count < len; count++){  
        name = document.getElementsByTagName('div')[count].nodeName;  
        name = document.getElementsByTagName('div')[count].nodeType;  
        name = document.getElementsByTagName('div')[count].tagName;  
        //我的天不会有人真的这么写吧...  
    }  
    return name;  
}

//第二种
function collectionNodesLocal(){  
    var coll = document.getElementsByTagName('div'),  
        len = coll.length,  
        name = '',  
        ele = null;  
    for (var count = 0; count < len; count++){  
        ele = coll[count];  
        name = ele.nodeName;  
        name = ele.nodeType;  
        name = ele.tagName;  
    }  
    return name;  
}

减少Repaint和Reflow操作

组织好DOM元素，一次性插入到DOM元素树中；
将需要操作的DOM隐藏，等操作完之后再显示出来；
尽量减少会引起reflow的方法的调用。例如：
offsetLeft
offsetTop
offsetHeight
offsetWidth
scrollTop/Left/Width/Height
clientTop/Left/Width/Height
getComputedStyle()
currentStyle(in IE))
一次性的修改DOM元素的样式；

大家可以对比一下这两个方法的时间，我的电脑测试方法一3秒，方法二10ms

//   方法一
        console.time(1) //这个打印方法可以打印出运行时长 与 console.timeEnd(1)配合；
        var list = document.getElementById('list')
        for (var i = 0; i < 1000; i++) {
          list.innerHTML += '<li>' + i + '</li>'
        }
        console.timeEnd(1)
      //3秒多，

      //   方法二
      //   如果只插入一次dom，速度会快很多
      console.time(1)
      var list = document.getElementById('list')
      var listli = ''
      for (var i = 0; i < 1000; i++) {
        listli += '<li>' + i + '</li>'
      }
      list.innerHTML = listli
      console.timeEnd(1)