- 减少http请求
http请求每次都需要建立通信链路,进行数据传输,在服务端每个http都需要启动独立的线程去处理,这些开销很昂贵,减少请求的数量可有效的提高访问性能。例如:- 合并公用的小css/js块
- 雪碧图、字体图标、base64图标
- 使用http2.0及其以上版本
- 使用浏览器缓存
通过设置http头中的cache-control和expires的属性,可设定浏览器缓存,缓存时间可以是数天,甚至是几个月。可改变文件名来进行更新,进行避免一次性过多的更新,那样会导致服务器负载骤增,网络阻塞等问题。 - 启用压缩
- 代码压缩:css代替空Dom、去除分号空格,js压缩和混淆
- 服务器Gzip压缩
- 图片使用合适的格式和大小
- 根据场景选择合适的格式jpegpngwebpsvg,如色彩丰富和透明场景选png
- 优化大小(配合后端裁剪),根据场景选择合适的大小:如4G网图片400*400,2G100*100大小
- 懒加载和预加载
网站中图片相对大小还是较大,响应式加载图片,也可先渲染图片占位符,然后加载图片 - css放在头部 js放在body闭合标签前
css尽量都放在一起且位于头部,如果在页面渲染的过程中再次遇到css会导致dom回流,位于javascript下方的css样式会被阻塞影响页面。 - 避免页面回流和重绘
回流是会导致页面重新渲染的一些元素,从而影响性能,回流是元素大小位置发生变化,重绘是字体颜色,背景颜色等发生变化相对回流性能影响较小- 多次重绘的元素使用绝对定位脱离文档流减少整体重绘,如动画元素
- 多个元素变化后,再一次性渲染到dom中(vue等框架的虚拟dom)
- 减少cookie传输
cookie包含在每次请求和响应中,太大的cookie会严重影响数据传输,对于静态资源来说不需要存在cookie 可使用独立的域名访问。 - javascript 代码优化
- 避免使用 eval和 Function
- HTML Collection请转为数组使用
- 减少作用域链查找
- 数据访问
Javascript中的数据访问包括直接量 (字符串、正则表达式 )、变量、对象属性以及数组,其中对直接量和局部变量的访问是最快的,对对象属性以及数组的访问需要更大的开销。当出现以下情况时,建议将数据放入局部变量:
a. 对任何对象属性的访问超过 1次
b. 对任何数组成员的访问次数超过 1次
另外,还应当尽可能的减少对对象以及数组深度查找。 - 字符串拼接推荐使用数组的join
- 异步加载:
<script defer src="http://t.zoukankan.com/index.js"></script>
- css选择器优化
- css选择符的解析是由右到左,尽量层级不要多
- 单个元素样式尽量使用id(效率最高),避免使用子选择器
- 多个相同样式才使用class
- 选择器性能排序:
id选择器(#myid) 类选择器(.myclassname) 标签选择器(div,h1,p) 相邻选择器(h1+p) 子选择器(ul > li) 后代选择器(li a) 通配符选择器(*) 属性选择器(a[rel="external"]) 伪类选择器(a:hover,li:nth-child)
- 使用cdn(内容分发网络)
就近访问,加快用户访问速度,减少数据中心负载压力,部分cdn支持自动优化图片 - 避免重定向
- Ajax请求使用缓存
- javascript按需加载,webpack打包有插件帮助分割和优化
- 根据文件内容产生hash串
如果文件发生改变则文件名改变,没有改变则可进行缓存,尽量将一些不常改动的文件合并到一起,常改动的单独分开。 - 加快DNS的解析速度
Dns预加载,<link rel="dns-prefetch" href="http://t.zoukankan.com/www.baidu.com" />
- 动态页面静态化:后端是动态页面的话,提前静态化常用页面
- 其他编码优化
- 避免较深的dom结构,减少dom节点数量
- 不适用table布局
- 给元素适当添加默认尺寸,避免动态元素载入时大规模重绘
- 不使用CSS @import,css表达式等耗资源的语法
- 使用硬件渲染
- 防抖和节流:使用函数节流(throttle)或函数去抖(debounce),限制某一个方法的频繁触发
- 及时清理环境:及时消除对象引用,清除定时器,清除事件监听器,创建最小作用域变量,可以及时回收内存
- 事件代理
- 事件代理是指将事件监听器注册在父级元素上,由于子元素的事件会通过事件冒泡的方式向上传播到父节点,因此,可以由父节点的监听函数统一处理多个子元素的事件
- 利用事件代理,可以减少内存使用,提高性能及降低代码复杂度
- 使用requestAnimationFrame来替代setTimeout和setInterval
- 希望在每一帧刚开始的时候对页面进行更改,目前只有使用 requestAnimationFrame 能够保证这一点。使用 setTimeout 或者 setInterval 来触发更新页面的函数,该函数可能在一帧的中间或者结束的时间点上调用,进而导致该帧后面需要进行的事情没有完成,引发丢帧
前端全链路优化总结
免责声明:文章转载自《前端全链路优化总结》仅用于学习参考。如对内容有疑问,请及时联系本站处理。
上篇adb 通过局域网 连接并操作手机Confluence 6 计划任务下篇
宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=