前端性能优化之初解析

做者：鱼某某@毛豆前端

想作前端性能优化，就要知道从输入url，按下回车那一刻，到页面呈如今你面前这个过程到底经历了什么？

从上图中咱们能够总结为4点：

一、DNS解析次数

二、TCP链接接时间

三、Http请求和响应

四、浏览器渲染

下面，咱们将性能优化分为请求速度优化和渲染优化两部分来说：

一、请求速度优化

资源从请求发出到接受这个部分要经历，DNS解析，TCP链接，请求和服务端响应这几个部分，而且这些部分都是要花费时间的，下面咱们依次来说述如何减小各个节点的时间：

DNS解析

说到DNS解析，咱们能作的就是将解析过程前置，就是俗称的预解析，DNS解析后会缓存，待真正请求资源时，就不会再花费DNS解析的时间。

注：浏览器会将咱们页面中使用的域名自动进行DNS解析，因此咱们只需配置页面中没有出现的域名便可，可是要注意的是，要合理配置dns的解析，不然会浪费一些没必要要的资源

TCP链接

讲解如何减小TCP链接次数以前，先来复习下三次握手和四次挥手： TCP三次握手🤝

Https比Http多了SSL解析（第四次握手🤝）

TCP四次挥手👋

从上图能够看到这个每次http请求所要链接和断开的时间远远比咱们想象的要多，可是页面中避免不开http的请求，因此下面咱们就要来讲说如何减小tcp的链接次数：

一、Keep-alive

二、握手复用 三、减小http请求

四、http2戳我👇

减小http请求咱们经常使用的方法有：

一、合并静态资源

二、缓存

三、本地存储

缓存分为Memory cache、Disk cache、Servivce worker cache三种：

具体如何设置呢，打开控制台，仔细看一看请求头中的字段，能够总结为下图：

服务端响应

tcp创建链接后，就要面对静态资源传输速度的问题，从传输这两个字来看，确定会和传输大小和传输距离有关，因此咱们就要考虑如何将静态资源变的小，传输距离变得短？

一、Gzip

二、构建工具缩小js，css文件大小

三、CDN

CDN域名咱们须要注意一下下，它和咱们的域名是不同的哦，这样它就不须要携带cookie，这样也变相的减小了请求头的大小

四、选择合理的图片类型

其余

多域名，利用浏览器的并发性，浏览器一次能够请求同域名下4-6个静态资源，因此在遇到阻塞的状况，不一样域名下的静态资源则不会收到影响，因此能够利用多域名来加载静态资源，但须要注意的是，不要设置过多域名，会形成性能浪费，3-4个就好

二、浏览器渲染优化

众所周知页面解析时遇到link，js标签会停下等待资源的加载，而且为了防止浏览器裸奔，render tree的造成很重要，因此css放在头部，js放在尾部是必然的

减小重绘和回流的次数

重绘：当render tree中的一些元素须要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，好比background-color，则称为重绘

回流：当render tree中的一部分(或所有)由于元素的规模尺寸，布局，隐藏等改变而须要从新构建，这就称为回流 注意：回流必将引发重绘，而重绘不必定会引发回流

回流什么时候发生：

一、添加或者删除可见的DOM元素

二、元素位置改变

三、当页面布局或几何属性改变——边距、填充、边框、宽度和高度

四、内容改变——好比文本改变或者图片大小改变而引发的计算值宽度和高度改变

五、页面渲染初始化

六、浏览器窗口尺寸改变——resize事件发生时

七、获取offsetTop/Left/Width/Height , scrollTop/Left/Width/Height , clientTop/Left/Width/Height，Width/Height

因此：

一、用class来改变样式

二、脱离文档流，display：none或者position：absolute/fixed

三、dom结构离线处理后一次插入

四、不要常常访问会引发浏览器flush队列的属性，若是你确实要访问，利用缓存

懒加载

原则就是将必须呈现的东西快速加载，其他的资源能够按需加载，让用户快速看到页面，减小等待时间

一、白屏时间（从按下回车到第一个元素出现的时间）

二、首屏时间（第一屏展现出的时间）

总结

极端的总结为一句话😁：请求能少发就少发，资源能多小就多小，请求距离能多短就多短，dom操做能不变就不变，能一次作的毫不两次作

性能优化是一个漫长的过程，慢慢体验⛽️