一说到页面的性能优化,大家可能都会想起雅虎军规
、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
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。