前端性能优化大致分为以下几个点
- 网络加载类
- 页面渲染类
- 缓存类
- 图片类
- 脚本类
- 渲染类
- 架构协议类
分别以一句话简单描述
网络加载类
- 减少 HTTP 资源请求次数和单个请求大小，尽可能合并资源(静态资源图片，JavaScript或css代码)；
- 将JavaScript和css放到外部文件中（在 HTML 文件中引用外部资源可以有效利用浏览器的静态资源缓存）
- 避免页面中空的 href 和 src当标签的 href 属性为空（浏览器在渲染的过程中仍会将 href 属性或 src 属性中的空内容进行加载，直至加载失败，这样就阻塞了页面中其他资源的下载进程，而且最终加载到的内容是无效的，因此要尽量避免）
- 减少页面重定向
- 使用静态资源 CDN 来存储文件如果条件允许，可以利用 CDN 网络加快同一个地理区域内重复静态资源文件的响应下载速度，缩短资源请求时间。
- 使用可缓存的ajax。使用get方法效率会比post方法高。减少cookie大小
$.ajax({
url : url,
type : 'get',
cache : true, //推荐使用缓存
data : {},
success (){//...},
error (){//...}
});
页面渲染类
- style放置于页面顶部优先加载, script放置于html底部，减少页面的重绘和回流（页面渲染原理）
- 尽量预先设定图片等大小在加载大量的图片元素时，尽量预先限定图片的尺寸大小，否则在图片加载过程中会更新图片的排版信息，产生大量的重排
- 尽可能的是dom层级减少， 尽量减少使用JS动画JS 直接操作 DOM 极容易引起页面的重排。
- 尽量避免在选择器末尾添加通配符（渲染树的过程是从右到左的逆向匹配）
缓存类
- 为 HTML 指定 Cache-Control 或 Expires，为 HTML 内容设置 Cache-Control 或 Expires 可以将 HTML 内容缓存起来，避免频繁向服务器端发送请求
<meta http-equiv="Cache-Control" content="max-age=7200">
<meta http-equiv="Expires" content="Mon,20Jul201623:00:00GMT">
- 合理设置 Etag 和 Last-Modified合理设置 Etag 和 Last-Modified 使用浏览器缓存，对于未修改的文件，静态资源服务器会向浏览器端返回304，让浏览器从缓存中读取文件，减少 Web 资源下载的带宽消耗并降低服务器负载。
<meta http-equiv="last-modified" content="Sun,05 Nov 2017 13:45:57 GMT">
图片类
- 使用雪碧图减少网络请求，使用较小的图
- 图片懒加载
脚本类
- 尽量是用id选择器，因为id选择器选择更快
- 使用事件委托来绑定事件
- 设置函数节流，函数防抖
- 使用es6更高效
渲染类
- 移动端使用Viewport可以加快渲染
<!--设置viewport不缩放-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
- 避免各种形式重排重绘，页面的重排重绘很耗性能
- 在 DOM 渲染树生成后的布局渲染阶段，使用 float 的元素布局计算比较耗性能
- 不滥用 web 字体或过多 font-size 声明过多的 font-size 声明会增加字体的大小计算
架构协议类
- 使用后端数据渲染的方式可以加快页面内容的渲染展示
网友评论