web前端性能优化汇总

一、概述

web前端性能优化主要点为：减少HTTP请求，减小请求文件大小、其他优化。

二、优化细节

1、减少HTTP请求

（1）使用缓存

（2）雪碧图

（3）合并文件

（4）将javascript和css从外部引入

(5)图片base64编码

 

2、减小请求文件大小

（1）压缩html/css/js/图片文件大小

（2）减少DOM数量

（3）减小cookie大小

 

3、其他优化

（1）按需加载：lazyload、滚屏加载、Media Query加载

（2）预加载：loading、提前加载下一页

（3）css、js放在正确的位置

（4）适度使用cdn

 

更新2019.1.4

（1）资源压缩合并、减少http请求

（2）非核心代码异步加载（包括添加动态script，defer，async）

（3）缓存

（4）CDN

静态资源尽量使用 CDN 加载，由于浏览器对于单个域名有并发请求上限，可以考虑使用多个 CDN 域名。对于 CDN 加载静态资源需要注意 CDN 域名要与主站不同，否则每次请求都会带上主站的 Cookie。

（5）预解析DNS

如：<link rel="dns-prefetch" href="//img20.360buyimg.com">