专题复习九、web性能优化

写于2017.08.07
web优化是个工程性的问题，因为有些优化策略本身是相互矛盾的，所以工作中优化策略的选择必须是根据实际数据测算结果后的考量结果，今天我们就谈下，理论上的优化策略
首先我们思考一个老生常谈的问题：
一、从你在网页地址栏输入URL敲回车到页面数据展现出来，这个过程中发生了什么？
1、DNS查询（找IP）
2、建立TCP连接（三次握手）
3、发送http请求
4、等待（等待服务器响应）
5、得到响应的第一个字节
6、下载响应文件，直到最后一个字节
7、解析HTML文件
8、渲染页面
我们就拿打开知乎来观测各个阶段的时间
1、找IP（DNS查询） 12.28ms
2、建立TCP连接 57.28ms
https加密 32.2ms
3、发送请求 0.12ms
4、等待 1.14s
5、响应（下载） 91.17ms
二、如何优化？
优化一般有两个目的：减少服务器压力和增加用户体验
我们这里谈的是增加用户体验，就是优化速度，分别在每个阶段如何优化？
1、DNS查询
可以设置缓存，比如两个小时之内不需要再查。还有就是减少域名个数。因为多一个域名意味着就要多查询一次IP
2、建立TCP连接
实际的情况是一个请求建立一次TCP连接，所以建议html、css、js文件整合在一个文件里，这样请求只发一次
3、发送请求
让cookie的体积尽量小
4、等待时间：完全取决于服务器，前端没法优化
5、下载响应
抛开宽带的影响，可以
①使用gzip，相当于就是个压缩包，下载后浏览器来解压
②cdn 设立中转服务器，减轻因地理位置远加载速度慢的影响
③使用缓存：但是这要分情况
④把img、css、js放在不同域名下，这样可以实现并行下载，但是这会增加DNS域名的查询时间，与1矛盾，所以要实际测算结果
代码层面如何优化
①懒加载
比如图片的懒加载，滑动鼠标到那个位置图片才会显示，节省服务器带宽
②预加载（增加用户体验）
比如UC浏览器看小说时，提前把下一页的内容下载好。这样增加带宽压力，但是增加了用户体验
③动态加载：把首页不显示的内容动态加载（不放在HTML中，放在js里面）
上一页完成了，动态下载HTML、CSS、js
如：
$(function(){
$.get('./nextpage.html').then(function(response){
docunment.body.lastChild.html=response
var link = document.createElement('link')
link.href=""
link.rel=""
})
}
)