web前端性能优化

web前端包括浏览器加载、网站视图模型、图片服务、CDN服务等，主要优化手段有浏览器访问、使用反向代理才、CDN等。

浏览器访问优化：

减少HTTP请求

 http协议是无状态的应用层协议，意味着每次http请求都需要建立通信链路、进行数据传输，而在服务器端，每个http都需要启动独立的线程去处理。这些通信和服务的开销都很昂贵，减少http请求的数目可有效提高访问性能。

1、合并css

2、合并js

3、合并图片

4、合理设置缓存，css,javascript,logo,图标等更新频率低的静态资源，可直接通过HTTP Header的cache-control和Expires设置很长的过期头；变化不频繁又可能会变的资源用Last-Modifed做请求验证，尽可能让资源在缓存中待更久。如果需要更新应一个个文件逐步更新，并有一定的时间间隔，以避免浏览器忽然大量缓存失效，或造成网络堵塞，服务器负载增加的情况。

5、懒加载

6、css放上面，js放下面，页面解析时需要用到js，再放底部就不适合了。

7、异步请求callback

 

通用性能清单：

1、合理设置缓存

2、启用压缩

3、优化关键资源的优先级(srcset)

4、使用CDN

 

图片优化：

1、没必要的图片消除，合并，或用代码构造，阴影、渐变、动画、形状等

2、

• JPEG：颜色非常丰富的图片（例如照片）
• PNG–8：色彩相对单一的图片
• PNG–24：局部透明的图片
• GIF：动图

3、试用新格式：WebP、JPEG 2000 和 JPEG-XR，无损的 WebP 比 PNG 小26％，比 JPG 小25-34％

 

WEB字体优化：

4种网络字体格式：EOT、TTF、WOFF 和最近的 WOFF2。TTF 和 WOFF 被广泛使用，拥有超过90％的浏览器支持率。根据支持情况，最有可能安全地使用WOFF2，并在旧版浏览器降级使用 WOFF。使用WOFF2的优点是，一套定制的预处理和压缩算法（如Brotli），并有大约30％的文件大小减少和改进的解析能力。

在@font-face中定义网页字体的来源时，请使用format()提示来指定应使用哪种格式。

 

。。。。。。