发现总结性的小干货可以为大家提升更好的开发技巧和编码思维,对代码量产化提供更扎实的质量和支持。这次我们来聊聊大家可能都比较关心的话题:「性能优化」。
一说到页面的性能优化,大家可能都会想起雅虎军规
、2-5-8原则
、3秒钟首屏指标
等规则,这些规则在开发过程中不是强制要求的,但是有时候为了追求页面性能的完美和体验,就不得不对原有的代码进行修改和优化。
下面就结合自己三年多的开发经验和大量的项目实践,整理出一些常用的性能优化要点,同时再罗列一下雅虎军规
、2-5-8原则
、3秒钟首屏指标
这三个常用规则的要点。
❝为了方便记忆和阅读,文章使用部分简写名词,解释如下 ❞
Desktop End Page
Mobile End Page
首屏指标
Loading
进行占位338kb/s(2.71mb/s)
,首屏资源不应超过1014kb
❝「加载优化」 ❞
Android
支持4个,iOS5+
支持6个」)GZip
link
方式引入,脚本放在尾部并使用异步方式加载Loading
,资源加载完成后再显示页面,但加载时间过长,会造成用户流失Loading
srcset
来按需显示(「过度压缩图像大小影响图像显示效果」)webp
优于jpg
,png8
优于gif
1014kb
、不宽于640px
Cookie
会影响加载速度,静态资源域名不使用Cookie
加载过程是最为耗时的过程,可能会占到总耗时的`80%时间(**优化重点**)
❝「执行优化」 ❞
src
会重新加载当前页面,影响速度和效率DataURL
图像没有使用图像的压缩算法,文件会变大,并且要解码后再渲染,加载慢耗时长执行处理不当会阻塞页面加载和渲染
❝「渲染优化」 ❞
viewport
可加速页面的渲染
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1">
CSS动画
,5个元素以上使用Canvas动画
,iOS8+
可使用WebGL动画
scroll
、touchmove
等事件可导致多次渲染GPU渲染
,请合理使用(「过渡使用会引发手机耗电量增加」)video
、canvas
、webgl
opacity
、transform
、transition
❝「样式优化」 ❞
display
会影响页面的渲染display:inline
后不应该再使用float
、margin
、padding
、width
和height
display:inline-block
后不应该再使用float
display:block
后不应该再使用vertical-align
display:table-*
后不应该再使用float
和margin
float
在渲染时计算量比较大,尽量减少使用font-size
影响CSS树的效率0
时不要带单位Opera
改用blink
内核,-o-
已淘汰❝「脚本优化」 ❞
.length
计算用一个变量保存值id
选择器选择元素是最快的tap
(touchstart
和touchend
)代替click
(「注意touch
响应过快,易引发误操作」)❝「雅虎军规」 ❞
雅虎团队通过大量实践总结出以下7类35条
前端优化规则,规则详情请参考这位兄弟的《雅虎前端优化35条规则翻译》。
HTTP
请求数DNS
查询AJAX请求
DOM
元素数量iframe
数量404
错误CSS
表达式<link>
代替@import
JS
和CSS
JS
和CSS
DOM
操作CSS精灵图
HTML
中缩放图片favicon
Cookie
大小Cookie
域名的资源25kb
CDN
Expires
或Cache-Control
Gzip
资源ETags
AJAX请求
时使用get
❝「2-5-8原则」 ❞
在前端开发中,此规则作为一种开发指导思路,针对浏览器页面的性能优化。
2秒内
得到响应,会感觉页面的响应速度很快 Fast2~5秒间
得到响应,会感觉页面的响应速度还行 Medium5~8秒间
得到响应,会感觉页面的响应速度很慢,但还可以接受 Slow8秒后
仍然无法得到响应,会感觉页面的响应速度垃圾死了(「此时会有以下四种可能」)刷新页面
离开页面,有可能转投竞争对手的网站
咒骂开发此页面的程序猿
网线断了?Wi-Fi断了?信号不好?话费用完了?
知道这个规则的数字顺序怎样来的吗,看下键盘右方的数字键盘由下往上排序:2-5-8
❝「3秒钟首屏指标」 ❞
此规则适用于M端,顾名思义就是打开页面后3秒钟内完成渲染并展示内容。
「❤️关注+点赞+收藏+评论+转发❤️」,原创不易,鼓励笔者创作更好的文章
「关注公众号IQ前端
,一个专注于CSS/JS开发技巧的前端公众号,更多前端小干货等着你喔」