web前端性能优化

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

浏览器访问优化：

减小HTTP请求

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

一、合并css

二、合并js

三、合并图片

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

五、懒加载

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

七、异步请求callback

 

通用性能清单：

一、合理设置缓存

二、启用压缩

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

四、使用CDN

 

图片优化：

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

二、

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

三、试用新格式：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()提示来指定应使用哪一种格式。

 

。。。。。。