资源的合并和压缩
资源的合并（减少HTTP的请求数量）
因为HTTP的建立和释放都需要时间，而且浏览器对同一个域名的并发数量是有限制的，所以减少HTTP请求可以提升性能。
每个HTTP请求从建立到释放的步骤
- 客户端连接到到Web服务器
- 发送HTTP请求
- 服务器接受请求并返回HTTP响应
- 释放TCP连接
资源合并（文件合并）存在的问题：
- 首屏渲染问题：合并JS文件后，文件会变大，请求的时间也会变长。如果渲染HTML时需要这个JS文件，会导致首屏渲染的时间变长。
- 缓存失效问题：如果将多个文件合并成一个文件，只要任意修改其中任何一个文件都会导致文件缓存失效
资源合并（文件合并）方法：
- CSS-sprites(雪碧图）:将多张图片合并成一张图片，通过background-position属性来控制偏移量从而得到相应的图片
- 将图片的内容嵌入到HTML中：使用内联样式将URL嵌入到HTML中
- 多用SVG矢量图：压缩效果好，代码内嵌，相对较小（icon，logo）
- 使用Webpack,gulp等工具合并文件
资源压缩
减少HTML，JS，CSS文件的大小。删除注释等等无效的代码。
可以使用Webpack，gulp等工具
CSS和JS的装载和执行
HTML渲染过程的特点
-
顺序执行：进行词法分析，从上到下
-
并发加载：并发请求外部资源，但是并发度受到浏览器域名的限制
-
阻塞：
- CSS在head中通过link方式引入会阻塞页面渲染
- CSS不阻塞外部资源请求，但是阻塞JS的执行
- 引入JS会阻塞HTML文档的分析，页面的渲染
- JS不阻塞外部资源加载
- 依赖关系
- 页面渲染需要依赖CSS的加载
- JS顺序执行，后面的代码会依赖前面的代码；JS依赖DOM节点
优化
- CSS样式表置顶：防止页面在没有CSS的时候渲染出来
- 用link代替import引入CSS： import会在页面加载完成后才执行（部分高版本浏览器没有区别）
- JS脚本置底：防止阻塞页面渲染和CSS加载
- 合理使用JS异步加载
图片懒加载和预加载
懒加载
在图片进入可视区域后再请求图片资源，需要监听scroll函数document.addEventListener('scroll',lazyload),使用getBoundingClientRect获取某个元素相对于视窗的集合item.getBoundingClientRect()，若图片的top小于视窗的高度document.documentElement.clientHeight，说明进入了可视区域。
预加载
在使用图片等静态资源前提前请求
实现方式
<img src="http://..." style="display: none" />- 使用Image对象
var image = new Image();image.src = "http://..."; - 使用XMLHttpRequest对象
- 使用PreloadJS，提供了一个一致的方式预先加载在HTML应用的内容，以及预加载可以使用HTML标签作为XHR完成。
