前端性能优化笔记

A### 前端性能优化笔记

性能优化对于每个开发者来说都是一个非常重要且不可忽略的问题，本文写的就是我在学习性能优化过程中的一些笔记。

1、资源加载和页面渲染

在学习性能优化前，首先简单的了解前端资源加载和页面渲染的过程

（1）加载资源的过程

浏览器根据DNS服务器得到域名的IP地址

浏览器向这个IP的服务器发送http请求

服务器收到、处理并返回http请求

浏览器得到返回内容

（2）浏览器渲染页面的过程

根据HTML结构生成DOM Tree

根据CSS生成CSSOM

将DOM和CSSOM整合形成RenderTree

根据RenderTree开始渲染和展示（注： 遇到<script>时，会执行并阻塞渲染）

图示如下：

2、前端性能优化的内容

当我们谈到性能时，一般包括的方面有：

 页面加载时间

 浏览器性能

 网络性能

 开发效率

3、性能优化的一般原则

多使用内存、缓存或者其他方法

减少CPU计算、减少网络    

4、性能的准则

根据对页面加载时间影响的强弱排序总结路路以下10项性能优化准则：

（1）减少HTTP请求

http请求是性能优化中影响很大的一个方面，减少http请求，一般可以：

合并资源文件。

使用图片精灵。

合并资源就是可以把多个css文件或js文件合并到一起，而使用图片精灵，我之前也有一篇文章介绍CSS Sprite，这里就不再赘述了。

（2）使用CDN加速（内容分发系统）

CDN是一个拥有很多很多服务器/经过策略性部署/可以覆盖全球的网络系统。不管你在世界的哪个地方，只要访问有关的资源，它就会从最近的一个节点获取数据返回。

但是，这些节点缓存的文件一般是不易改动的，所以在CDN上存放静态文件，如：图片、字体、JavaScript库等。

例：

<link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet">

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

（3）避免空的src或href属性值

在页面加载过程中，一个有着空的src属性的img标签被JavaScript动态赋值，
虽然在脚本执行前元素已经被浏览器渲染了，即使src属性是空值依然会发起一个http请求，href也一样。

一个简单的解决办法就是把href的值设成一条什么都不会做的JavaScript语句。
例如：

<a href=”javascript:;” id=”triggerName”></a>

更好的办法是给对应的标签创建一个带有描述性的href属性。

例如:

<a href=”#Something_Descriptive” id=”triggerName”></a>

<script>
    $(‘#triggerName’).click(function(e){
    // 取消单击事件的默认动作，从而阻止链接的跳转
    e.preventDefalut();
    // 其他代码
})
</script>

（4）增加过期头

增加过期头主要是为了让浏览器可以缓存静态文件，所以可以给所有的静态文件（图片、样式、脚本等）上都加上过期头，过期的日期要定的非常遥远，基本上可以认为永不过期。

例如：一个典型的过期头 Expires: Web, 1 Jan 2100 00:00:00 GMT

（5）启用GZIP压缩

GZIP压缩是一中普遍的压缩方式，启用压缩减少路文件传输时间，增强路用户体验。

一般压缩的是HTML、CSS、JS、JSON等一些文本类的内容，一般图片和PDF是不压缩的，因为PDF本身就是可压缩的格式，图片会越压越大，因为压缩引擎会加入一些自己的代码使得图片压缩后变得更大。

（6）把CSS放到头部，把JavaScript放到尾部

一般把CSS放到内，JavaScript放到尾部，这么做和浏览器的页面加载和页面渲染有关。

很多浏览器会等所有的样式文件加载完毕后才渲染页面，把CSS放到可以提高用户的体验，如果放在页面底部，那么用户就会出现白屏的状况。

而脚本会阻止并行加载，意思就是当浏览器加载一个脚本时候，同一时间内是不会加载其他文件的。

如果将JavaScrip放在页面头部，就会阻止页面的渲染，使得开始的时候用户什么都看不到，所以把JavaScript放到尾部在本质上解决路脚本阻塞加载的问题。

（7）避免使用CSS表达式

只有IE5/6/7支持CSS表达式，但是现在基本没有或者很少人使用了，所以必须或者应该避免使用CSS表达式，而且CSS表达式比正常的CSS长的多，还会频繁的执行，简直就是一个灾难。

（8）删除不使用的CSS语句

很多浏览器的样式引擎是通过遍历CSS规则来寻找匹配的元素，如果有很多的没有的CSS语句，就会造成大量时间的浪费。

（9）对JavaScript、CSS进行代码压缩

对JavaScript、CSS的压缩一般是指把所有非必要的非功能性的字符从代码中移除，比如空白行/换行符、注释、分割符等这些不会对功能产生任何影响的字符。

常用的压缩工具有：雅虎的YUI等（https://yuilibrary.com/）。

（10）减少重绘

重绘，简单理解就是当页面的内容发生改变时，就会发生重绘。

规定图片的宽和高

当浏览器在生成布局树的时候，会给每一个元素留一个区域，如果不在一开始的时候设置好img的宽和高，浏览器不知道预留区域的大小，只能靠猜，猜错几率十分大，如果后面发现预留区域错了，只好重绘来纠正错误。

不要使用表格布局

浏览器是一行一行显示表格的，如果有一行的列宽或行高和之前的不一样，那么之前绘好的行也必须重绘。

定义字符集

字符集是渲染页面的一个重要因素，在页面渲染过程中，多数浏览器（除了IE6/7/8）都会暂停页面渲染直到找到字符集的定义。

不要重组DOM

重新排列DOM会引发浏览器重绘，如果一定要对DOM操作的话，比如要许多节点要添加，不要一次一次的添加，而是应一次添加多个，这样才能减少重绘的次数。

5、从资源加载和页面渲染简单总结性能优化的措施

（1）加载资源优化

A、静态资源的压缩、合并 

B、静态资源缓存 

C、使用CDN让资源加载更快 

D、使用SSR后端渲染，数据直接输出到HTML中 

（2）渲染优化

A、CSS放在前面，JS放在后面。 

B、懒加载（图片懒加载，下拉加载更多） 

C、减少DOM查询，对DOM查询做缓存。 

D、减少DOM操作，多个操作尽量合并在一起执行。 比如：合并DOM插入

E、事件节流。 

F、尽早执行操作（如DOMContentLoaded）。 

本文到此结束啦～～，谢谢您的阅读，若有不足之处，望包含，也欢迎您的留言或联系本人。