性能优化对于每个开发者来说都是一个非常重要且不可忽略的问题，本文写的就是我在学习性能优化过程中的一些笔记。
1、资源加载和页面渲染
在学习性能优化前，首先简单的了解前端资源加载和页面渲染的过程
（1）加载资源的过程
浏览器根据DNS服务器得到域名的IP地址
浏览器向这个IP的服务器发送http请求
服务器收到、处理并返回http请求
浏览器得到返回内容
（2）浏览器渲染页面的过程
根据HTML结构生成DOM Tree
根据CSS生成CSSOM
将DOM和CSSOM整合形成RenderTree
根据RenderTree开始渲染和展示（注： 遇到<script>时，会执行并阻塞渲染）图示如下：
2、前端性能优化的内容
当我们谈到性能时，一般包括的方面有：
页面加载时间
浏览器性能
网络性能
开发效（2）使用CDN加速（内容分发系统）
CDN是一个拥有很多很多服务器/经过策略性部署/可以覆盖全球的网络系统。不管你在世界的哪个地方，只要访问有关的资源，它就会从最近的一个节点获取数据返回。
但是，这些节点缓存的文件一般是不易改动的，所以在CDN上存放静态文件，如：图片、字体、JavaScript库等。
例：
率3、性能优化的一般原则
多使用内存、缓存或者其他方法
减少CPU计算、减少网络 4、性能的准则
根据对页面加载时间影响的强弱排序总结路路以下10项性能优化准则：
（1）减少HTTP请求
http请求是性能优化中影响很大的一个方面，减少http请求，一般可以：
合并资源文件。
使用图片精灵。
合并资源就是可以把多个css文件或js文件合并到一起，而使用图片精灵，就是把所有图片合成一张图，原理则是利用background-position:属性定位到对应的icon
（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）。
