前端性能优化

前端性能优化

方法简述

减少请求数量、减小资源大小、优化网络连接、优化资源加载、减少重绘回流、使用性能更好的API和构建优化。

一.减少请求数

常用的减少http请求数有以下几种：

1.合并图片

当图片较多时，可以合并为一张大图，从而减少http请求数。经常变化的图片可能不太合适，变化相对稳定的就可以考虑。合并大图除了能减少http 请求数外，还可以充分利用缓存来提升性能。

2.合并压缩css样式表和js脚本

他们的共同目的都是为了减少http连接数。

3.去掉不必要的请求

开发写代码或者系统升级之后残留的无效请求连接。

4.充分利用缓存

这里说的缓存是客户端侧缓存或者说浏览器缓存。Expires头信息是客户端侧缓存的重要依据，格式类似于Expires:sun ,20 Dec 2017 23:00:00 GMT。 如果当前时间小于Expires指定的时间，浏览器就会从缓存中直接获取相关的数据信息或html文件，如果当前时间大于Expires指定的时间，浏览器会向服务器发送请求来获取相关数据信息。

以Apache为例，可在Apache的配置文件httpd.conf中设置Expires。

5）.减少重定向

尽量避免使用重定向，当页面发生了重定向，就会延迟整个HTML文档的传输。在HTML文档到达之前，页面中不会呈现任何东西，也没有任何组件会被下载，降低了用户体验

如果一定要使用重定向，如http重定向到https，要使用301永久重定向，而不是302临时重定向。因为，如果使用302，则每一次访问http，都会被重定向到https的页面。而永久重定向，在第一次从http重定向到https之后 ，每次访问http，会直接返回https的页面。

6.不使用CSS @import

CSS的@import会造成额外的请求

7.避免使用空的src和href

a标签设置空的href，会重定向到当前的页面地址

form设置空的method，会提交表单到当前的页面地址

二.减小资源大小

1.压缩

1、HTML压缩

HTML代码压缩就是压缩在文本文件中有意义，但是在HTML中不显示的字符，包括空格，制表符，换行符等

2、CSS压缩

CSS压缩包括无效代码删除与CSS语义合并

3、JS压缩与混乱

JS压缩与混乱包括无效字符及注释的删除、代码语义的缩减和优化、降低代码可读性，实现代码保护

4、图片压缩

1）尽可能的使用PNG格式的图片，它相对来说体积较小。

2）对于不同格式的图片，在上线之前最好进行一定的优化。

3）图片的延迟加载，也叫做赖加载。

2.webp

在安卓下可以使用webp格式的图片，它具有更优的图像数据压缩算法，能带来更小的图片体积，同等画面质量下，体积比jpg、png少了25%以上，而且同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性

3.开启gzip

HTTP协议上的GZIP编码（数据压缩）是一种用来改进WEB应用程序性能的技术，用于压缩使用Internet传输的所有文本资源。大流量的WEB站点常常使用GZIP压缩技术来让用户感受更快的速度。这一般是指WWW服务器中安装的一个功能，当有人来访问这个服务器中的网站时，服务器中的这个功能就将网页内容压缩后传输到来访的电脑浏览器中显示出来。一般对纯文本内容可压缩到原大小的40%。
　　开启GZIP的方法很简单，到对应的web服务配置文件中设置一下即可。以Apache为例，在配置文件httpd.conf中添加。

三. 优化网络连接

1.使用CDN

CDN全称是Content Delivery Network，即内容分发网络，它能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度

2.使用DNS预解析

当浏览器访问一个域名的时候，需要解析一次DNS，获得对应域名的ip地址。在解析过程中，按照浏览器缓存、系统缓存、路由器缓存、ISP(运营商)DNS缓存、根域名服务器、顶级域名服务器、主域名服务器的顺序，逐步读取缓存，直到拿到IP地址

DNS Prefetch，即DNS预解析就是根据浏览器定义的规则，提前解析之后可能会用到的域名，使解析结果缓存到系统缓存中，缩短DNS解析时间，来提高网站的访问速度

方法是在 head 标签里面写上几个 link 标签

<link rel="dns-prefecth" href="https://www.google.com">
<link rel="dns-prefecth" href="https://www.google-analytics.com">

对以上几个网站提前解析 DNS，由于它是并行的，不会堵塞页面渲染，这样可以缩短资源加载的时间

3.并行连接

由于在HTTP1.1协议下，chrome每个域名的最大并发数是6个。使用多个域名，可以增加并发数

4.持久连接

使用keep-alive或presistent来建立持久连接，持久连接降低了时延和连接建立的开销，将连接保持在已调谐状态，而且减少了打开连接的潜在数量

5.管道化连接

在HTTP2协议中，可以开启管道化连接，即单条连接的多路复用，每条连接中并发传输多个资源，这里就不需要添加域名来增加并发数了
CDN即内容分发网络，可以使用户就近取得所需内容，解决网络拥挤的状况，提高用户访问网站的响应速度。

四. 优化资源加载

1.资源加载位置

通过优化资源加载位置，更改资源加载时机，使尽可能快地展示出页面内容，尽可能快地使功能可用

1、CSS文件放在head中，先外链，后本页

2、JS文件放在body底部，先外链，后本页

3、处理页面、处理页面布局的JS文件放在head中，如babel-polyfill.js文件、flexible.js文件

4、body中间尽量不写style标签和script标签

2.资源加载时机

1、异步script标签
　　defer: 异步加载，在HTML解析完成后执行。defer的实际效果与将代码放在body底部类似
　　async: 异步加载，加载完成后立即执行

2、模块按需加载

在SPA等业务逻辑比较复杂的系统中，需要根据路由来加载当前页面需要的业务模块

按需加载，是一种很好的优化网页或应用的方式。这种方式实际上是先把代码在一些逻辑断点处分离开，然后在一些代码块中完成某些操作后，立即引用或即将引用另外一些新的代码块。这样加快了应用的初始加载速度，减轻了它的总体体积，因为某些代码块可能永远不会被加载

webpack 提供了两个类似的技术，优先选择的方式是使用符合 ECMAScript 提案 的 import()
语法。第二种则是使用 webpack 特定的 require.ensure

3、使用资源预加载preload和资源预读取prefetch
preload让浏览器提前加载指定资源，需要执行时再执行，可以加速本页面的加载速度
prefetch告诉浏览器加载下一页面可能会用到的资源，可以加速下一个页面的加载速度

4、资源懒加载与资源预加载
　　资源延迟加载也称为懒加载，延迟加载资源或符合某些条件时才加载某些资源
　　资源预加载是提前加载用户所需的资源，保证良好的用户体验
　　资源懒加载和资源预加载都是一种错峰操作，在浏览器忙碌的时候不做操作，浏览器空间时，再加载资源，优化了网络性能

五. 减少重绘回流

1.样式设置

1. 避免使用层级较深的选择器，或其他一些复杂的选择器，以提高CSS渲染效率

2. 避免使用CSS表达式，CSS表达式是动态设置CSS属性的强大但危险方法，它的问题就在于计算频率很快。不仅仅是在页面显示和缩放时，就是在页面滚动、乃至移动鼠标时都会要重新计算一次

3. 元素适当地定义高度或最小高度，否则元素的动态内容载入时，会出现页面元素的晃动或位置，造成回流

4. 给图片设置尺寸。如果图片不设置尺寸，首次载入时，占据空间会从0到完全出现，上下左右都可能位移，发生回流

5. 不要使用table布局，因为一个小改动可能会造成整个table重新布局。而且table渲染通常要3倍于同等元素时间

6. 能够使用CSS实现的效果，尽量使用CSS而不使用JS实现

2.渲染层

1. 此外，将需要多次重绘的元素独立为render layer渲染层，如设置absolute，可以减少重绘范围

2. 对于一些进行动画的元素，使用硬件渲染，从而避免重绘和回流

3.DOM优化

1. 缓存DOM
   const div = document.getElementById(‘div’)
   由于查询DOM比较耗时，在同一个节点无需多次查询的情况下，可以缓存DOM

2. 减少DOM深度及DOM数量
   HTML 中标签元素越多，标签的层级越深，浏览器解析DOM并绘制到浏览器中所花的时间就越长，所以应尽可能保持 DOM 元素简洁和层级较少。

3. 批量操作DOM
   由于DOM操作比较耗时，且可能会造成回流，因此要避免频繁操作DOM，可以批量操作DOM，先用字符串拼接完毕，再用innerHTML更新DOM

4. 批量操作CSS样式
   通过切换class或者使用元素的style.csstext属性去批量操作元素样式

5. 在内存中操作DOM
   使用DocumentFragment对象，让DOM操作发生在内存中，而不是页面上

6. DOM元素离线更新
   对DOM进行相关操作时，例、appendChild等都可以使用Document Fragment对象进行离线操作，带元素“组装”完成后再一次插入页面，或者使用display:none 对元素隐藏，在元素“消失”后进行相关操作

7. DOM读写分离
   浏览器具有惰性渲染机制，连接多次修改DOM可能只触发浏览器的一次渲染。而如果修改DOM后，立即读取DOM。为了保证读取到正确的DOM值，会触发浏览器的一次渲染。因此，修改DOM的操作要与访问DOM分开进行

8. 事件代理
   事件代理是指将事件监听器注册在父级元素上，由于子元素的事件会通过事件冒泡的方式向上传播到父节点，因此，可以由父节点的监听函数统一处理多个子元素的事件。
   利用事件代理，可以减少内存使用，提高性能及降低代码复杂度

9. 防抖和节流
   使用函数节流（throttle）或函数去抖（debounce），限制某一个方法的频繁触发

10. 及时清理环境
    及时消除对象引用，清除定时器，清除事件监听器，创建最小作用域变量，可以及时回收内存

六. 性能更好的API

1. 用对选择器
   选择器的性能排序如下所示，尽量选择性能更好的选择器

   id选择器（#myid）
   类选择器（.myclassname）
   标签选择器（div,h1,p）
   相邻选择器（h1+p）
   子选择器（ul > li）
   后代选择器（li a）
   通配符选择器（*）
   属性选择器（a[rel="external"]）
   伪类选择器（a:hover,li:nth-child）
   

   样式嵌套尽量不要超过三层

2. 使用requestAnimationFrame来替代setTimeout和setInterval。
   希望在每一帧刚开始的时候对页面进行更改，目前只有使用 requestAnimationFrame 能够保证这一点。使用 setTimeout 或者 setInterval 来触发更新页面的函数，该函数可能在一帧的中间或者结束的时间点上调用，进而导致该帧后面需要进行的事情没有完成，引发丢帧

3. 使用IntersectionObserver来实现图片可视区域的懒加载。
   传统的做法中，需要使用scroll事件，并调用getBoundingClientRect方法，来实现可视区域的判断，即使使用了函数节流，也会造成页面回流。使用IntersectionObserver，则没有上述问题

4. 使用web worker
   客户端javascript一个基本的特性是单线程：比如，浏览器无法同时运行两个事件处理程序，它也无法在一个事件处理程序运行的时候触发一个计时器。Web Worker是HTML5提供的一个javascript多线程解决方案，可以将一些大计算量的代码交由web Worker运行，从而避免阻塞用户界面，在执行复杂计算和数据处理时，这个API非常有用

七. webpack优化

1.打包公共代码

使用CommonsChunkPlugin插件，将公共模块拆出来，最终合成的文件能够在最开始的时候加载一次，便存到缓存中供后续使用。这会带来速度上的提升，因为浏览器会迅速将公共的代码从缓存中取出来，而不是每次访问一个新页面时，再去加载一个更大的文件

webpack 4 将移除 CommonsChunkPlugin, 取而代之的是两个新的配置项 optimization.splitChunks 和 optimization.runtimeChunk

通过设置 optimization.splitChunks.chunks: “all” 来启动默认的代码分割配置项

2.动态导入和按需加载

webpack提供了两种技术通过模块的内联函数调用来分离代码，优先选择的方式是，使用符合 ECMAScript 提案 的 import() 语法。第二种，则是使用 webpack 特定的 require.ensure

3.剔除无用代码

tree shaking 是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块系统中的静态结构特性，例如 import 和 export。这个术语和概念实际上是兴起于 ES2015 模块打包工具 rollup

JS的tree shaking主要通过uglifyjs插件来完成，CSS的tree shaking主要通过purify CSS来实现的

4.长缓存优化

1、将hash替换为chunkhash，这样当chunk不变时，缓存依然有效

2、使用Name而不是id

每个 module.id 会基于默认的解析顺序(resolve order)进行增量。也就是说，当解析顺序发生变化，ID 也会随之改变

下面来使用两个插件解决这个问题。第一个插件是 NamedModulesPlugin，将使用模块的路径，而不是数字标识符。虽然此插件有助于在开发过程中输出结果的可读性，然而执行时间会长一些。第二个选择是使用 HashedModuleIdsPlugin，推荐用于生产环境构建

5.公用代码内联

使用html-webpack-inline-chunk-plugin插件将mainfest.js内联到html文件中

八.回流重绘

1.什么是回流(重排 reflow)？

回流（重排 reflow）：对DOM树进行渲染，只要修改DOM或修改元素的形状大小，就会触发reflow，reflow的时候，浏览器会使已渲染好受到影响的部分失效，并重新构造这部分，完成reflow后，浏览器会重新绘制受影响的部分到屏幕中

2.什么是重绘(repaint)？

重绘(repaint)：当我们对DOM的修改导致的样式变化，但未影响几何属性时，浏览器不需要重新计算元素的几何属性，直接可以为该元素绘制新的样式，跳过了回流环节，这个过程就叫重绘。

结论：回流必定会发生重绘，重绘不一定发生回流

在页面交互中存在频繁的回流与重绘，这个过程，会很大程度的影响性能，因为回流所需成本比重绘高的多，因此能用重绘就不要用回流了。

知乎上关于性能优化的文章

性能指标文章