Web前端性能优化

性能优化是前端开发无法避免的点，给客户带去良好的访问体验也是开发人员必须关注的问题。

前端性能优化大体分为两个部分：代码优化、资源及其他优化，本文主要记录资源及其他优化要怎么做。

1、CSS样式文件在页面头部引入，Javascript文件在页面尾部引入

页面加载单线程可能会阻塞页面的加载。

2、服务端渲染（SSR）

前后端分离的开发方式，页面构建在客户端渲染，很容易造成页面初次渲染的白屏。

制作SSR页面，能够使服务器直接返回页面，减少首屏的渲染时间。

3、gzip压缩

服务器配置支持gzip压缩的资源传输方式，这样在浏览器支持gzip解析的时候，服务器就可以推送gzip的资源。

4、静态资源cnd缓存

静态资源如css、js、图片、应用程序安装包等可以做cdn缓存，把资源发布到全国或全球各地的节点，使用户可以更快访问到。

5、静态资源使用单独域名

浏览器请求有并发限制，同一域名在同一时间请求的资源有数量限制，所以给静态资源使用单独域名可以减少请求资源的数量，也方便做cdn缓存和分流。

6、字体图标代替图片图标

页面中一些通用的小图标，如箭头、加号，可以使用字体图标，以减少请求次数，使渲染更快。

7、精灵图

页面中一些带有功能特色的小图标，如购物车、表情，可以使用精灵图，让一张图上带多个小图，然后使用css背景定位来显示在合适的位置，大大减少请求次数。

8、图片懒加载

多图片的页面初次渲染时，为了使渲染更快，可以先设置一张加载图，当页面滚动到可视区域时再替换位真正的图片。

如果页面有尺寸很大的高清图，可以先渲染分辨率低缩略图，在页面基本构建完成后再替换为高清图。

9、图片预加载

在页面加载完成之后请求一些其他地方需要的图片，当进去那个页面或位置之后，浏览器可以从缓存里直接读取该图片。

10、使用PNG格式的图片

PNG是Web图像中最通用的格式，它是一种无损压缩格式。

11、小于10k的图片打包为base64格式

使用base64格式传输图片，虽然数据大小会大1/3，但是可以减少一个http请求。

12、尽量减少HTTP请求的数量

html文件里的css、js等资源，每一个文件都会有一个http请求，而减少http请求的次数可以减少资源加载的时间。

另外浏览器也会限制同一个域名同一时间建立的tcp连接的数量。

13、使用HTTP2.0

http2.0采用二进制格式传输数据而不是文本格式，减小数据大小；对消息头采用Hpack进行压缩，节省消息头占用的网络流量；采用异步连接多路复用；Server Push使服务器端能够更快的把资源推送给客户端；且能够保持与HTTP 1.1语义的向后兼容。

这些都优化了服务器端的数据传输。

14、设置浏览器缓存策略

优化浏览器的缓存方式，可以合理的加快页面的加载。

15、白屏时间做加载动画

白屏时制作加载动画，增强用户体验。