所谓性能优化就是为了让网站运行的更快,我们可以让加载的文件加载的更快也就是获取文件更快,第二个是文件获取之后代码文件执行更快。
加载更快我们有很多的策略,比如说浏览器的缓存,文件打包压缩,webpack相应的代码优化等。因为有了前端编译的功能,所以前端性能优化可做的事情越来越多。很多性能优化的事情可以在编译层做。
我们经常会遇到这样一个问题,从输入url到页面加载完成做了哪些事情,我们的性能优化就是从这样一个切入点开始讲解。这里面涉及到的每一步都有性能优化的空间。
1.用户输入taobao.com
2.浏览器通过DNS,把url解析为ip
3.浏览器和ip地址建立tcp链接,发送http请求
4.服务器接收请求后进行查库,读文件等,拼接好返回的http相应数据。
5.浏览器收到首屏html,开始渲染。
6.解析html中的dom
7.解析css
8.dom + css生成render-tree绘图
9.加载script的js文件
10.执行js脚本。
所谓性能优化,就是上面的步骤加在一起的时间尽可能的短,所以基本也就两大方向。一个是少加载文件,另个一个少执行代码。

DNS缓存

我们首先来说DNS,他的全程是domain name service就是专门把域名转换为ip的这样一个服务,其实DNS也像是网络的一个协议。
我们对于DNS的性能优化是DNS的预解析,就是我们在html中可以先设置一些DNS的解析路径,因为DNS并不是一次就可以拿到内容的,他是一个递归查询,一级一级查找到的。
DNS预解析就是在html中声明一些link标签,在项目中如果涉及到其他域名的资源可以在加载过程中同时去处理DNS,这样在我们发起请求的时候DNS已经在本地缓存中了。

<link rel="dns-prefetch" href="//q.alicdn.com" />
<link rel="dns-prefetch" href="//img.alicdn.com" />

TCP

TCP是很重要的一个协议,http就是在TCP的基础上构建的,TCP理解也很简单,他就像是浏览器和服务器的聊天过程,这个过程也是我们性能优化的主要途径。
在代码层面我们的性能优化成效微乎其微,但是在网络层面的优化收益却是巨大的。
http是一种tcp/ip协议,ip是网址域名通过DNS解析后拿到的地址,可以理解为要请求的服务器位置,tcp负责数据的完整性和有序性。
优化策略也很简单:
1.建立长连接
2.减少文件体积
比如文件压缩,gzip传输等
3.减少文件请求次数
雪碧图,js和css打包,缓存控制,懒加载
4.减少用户和服务器的距离
cdn使用
5.本地存储。
http会携带无用的数据,比如header和cookie,应该合理利用缓存机制解决这些问题。

浏览器缓存机制

通过网络获取内容既速度缓慢又开销巨大,较大的响应需要在客户端与服务器之间进行多次往返通信,这回延迟浏览器获得和处理内容的时间,还会增加访问者的流量费用。
因此,缓存并重复利用之间获取的资源的能力成为性能优化的一个关键方面。
广义的缓存可以分为四个。
1.http cache
浏览器需要某个文件,首先会查看强缓存中是否存在,Expires和Cache-Control两个header响应头控制强缓存。

expires: Wed, 11 Mar 2019 16:12:18 GMT
cache-control: max-age=31536000

如果命中强缓存,就不会请求服务器,直接使用缓存中的内容。如果没有命中,则会进入协商缓存。
协商缓存的工作原理也很简单,浏览器请求服务器询问请求文件的修改时间,如果服务器返回的文件修改时间小于等于当前浏览器缓存的文件的修改时间,则代表文件无更新,服务器会返回304,告诉浏览器使用缓存中的文件。
写上缓存还通过一个Etag的响应头,他的准确率要比文件修改时间高很多,如果存在这个响应头会优先使用他来判断。
2.service worker cache
service worker是一种独立于主线程之外的javascript线程,他脱离于浏览器窗体,算是幕后工作,可以实现离线缓存,网络代理等。
3.memory cache
内存缓存,时间比较短,常用在base64图片,体积小的静态资源。
4.push cache
http2的缓存模式。
删除冗余代码的tree-shaking,和去除无效代码,我们在webpack那里都介绍过了,这里不赘述了,如果是个别页面使用了echarts这种库,一定记得懒加载。

图片优化

图片通常是最占用流量的,PC端加载的平均图片大小是600k,简直比js打包后的文件还大了,所以针对图片的优化,也是收益不错的。
不同场景使用不同的文件类型。
1.jpg
一种有损压缩图片格式,体积小,不支持透明,常用于背景图和轮播图。
2.png
一种有损压缩图片,质量高,支持透明,色彩线条丰富,常用于logo和icon
3.svg
一种文本格式,体积小的矢量图,存在渲染成本和学习成本。
一般我们会把图片打包成雪碧图,减少http请求次数。webpack-spritesmith
####gzip
http压缩就是以缩小体积为目的,对http内容进行重新编码的过程。
gzip压缩背后的原理是在一个文本文件中找出一些重复出现的字符串,临时替换他们,从而使整个文件变小。
根据这个原理,文件中代码的重复率越高,那么压缩的效率就越高,使用gzip的收益也就越大,反之亦然。
基本上来说,gizp基本上是服务器的配置。

本地存储

1.cookie
最早出现的存储机制,体积限定4k,性能较差,所有的请求都会携带上所有当前域名的cookie
2.storage
H5标准推出的新的存储机制,存储量大,不会发送给服务端。
3.indexdb
运行在浏览器上的非关系型数据库
4.pwa
基于缓存技术的应用模型
使用cdn和服务端渲染都可提高网页性能。