为什么我做的网页总是卡?前端性能优化规则要点
时间:2022-07-28
本文章向大家介绍为什么我做的网页总是卡?前端性能优化规则要点,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
一说到页面的性能优化,大家可能都会想起雅虎军规
、2-5-8原则
、3秒钟首屏指标
等规则,这些规则在开发过程中不是强制要求的,但是有时候为了追求页面性能的完美和体验,就不得不对原有的代码进行修改和优化。
下面整理出一些常用的性能优化要点,同时再罗列一下雅虎军规
、2-5-8原则
、3秒钟首屏指标
这三个常用规则的要点。
❝为了方便记忆和阅读,文章使用部分简写名词,解释如下 ❞
-
「D端」:桌面端页面
Desktop End Page
-
「M端」:移动端页面
Mobile End Page
概述指南
- D端优化手段在M端同样适用
- 在M端提出3秒钟渲染完成
首屏指标
- 基于第二点,首屏加载3秒内完成或使用
Loading
进行占位 - 基于联通3G网络平均
338kb/s(2.71mb/s)
,首屏资源不应超过1014kb
- M端因配置原因,除加载外渲染速度也是优化重点
- 基于第五点,要合理处理代码减少渲染损耗
- 基于第二点和第五点,所有影响首屏加载和渲染的代码应在处理逻辑中后置
- 加载完成后,用户交互使用时也需注意性能
❝「加载优化」 ❞
-
「减少HTTP请求」:尽量减少页面的请求数(「首次加载同时请求数不能超过4个」),移动设备浏览器同时响应请求为4个请求(「
Android
支持4个,iOS5+
支持6个」)- 合并CSS和JS
- 使用CSS精灵图
-
「缓存资源」:使用缓存可减少向服务器的请求数,节省加载时间,所有静态资源都要在服务器端设置缓存,并且尽量使用长缓存(「使用时间戳更新缓存」)
- 缓存一切可缓存的资源
- 使用长缓存
- 使用外联的样式和脚本
-
「压缩代码」:减少资源大小可加快网页显示速度,对代码进行压缩,并在服务器端设置
GZip
- 压缩代码(多余的缩进、空格和换行符)
- 启用Gzip
-
「无阻塞」:头部内联的样式和脚本会阻塞页面的渲染,样式放在头部并使用
link
方式引入,脚本放在尾部并使用异步方式加载 - 「首屏加载」:首屏快速显示可大大提升用户对页面速度的感知,应尽量针对首屏的快速显示做优化
-
「按需加载」:将不影响首屏的资源和当前屏幕不用的资源放到用户需要时才加载,可大大提升显示速度和降低总体流量(「按需加载会导致大量重绘,影响渲染性能」)
- 懒加载
- 滚屏加载
- Media Query加载
-
「预加载」:大型资源页面可使用
Loading
,资源加载完成后再显示页面,但加载时间过长,会造成用户流失- 可感知Loading:进入页面时
Loading
- 不可感知Loading:提前加载下一页
- 可感知Loading:进入页面时
-
「压缩图像」:使用图像时选择最合适的格式和大小,然后使用工具压缩,同时在代码中用
srcset
来按需显示(「过度压缩图像大小影响图像显示效果」)- 使用TinyJpg和TinyPng压缩图像
- 使用CSS3、SVG、IconFont代替图像
- 使用img的srcset按需加载图像
- 选择合适的图像:
webp
优于jpg
,png8
优于gif
- 选择合适的大小:首次加载不大于
1014kb
、不宽于640px
- PS切图时D端图像保存质量为80,M端图像保存质量为60
-
「减少Cookie」:
Cookie
会影响加载速度,静态资源域名不使用Cookie
- 「避免重定向」:重定向会影响加载速度,在服务器正确设置避免重定向
- 「异步加载第三方资源」:第三方资源不可控会影响页面的加载和显示,要异步加载第三方资源
加载过程是最为耗时的过程,可能会占到总耗时的`80%时间(**优化重点**)
❝「执行优化」 ❞
- 「CSS写在头部,JS写在尾部并异步」
-
「避免img、iframe等的src为空」:空
src
会重新加载当前页面,影响速度和效率 - 「尽量避免重置图像大小」:多次重置图像大小会引发图像的多次重绘,影响性能
-
「图像尽量避免使用DataURL」:
DataURL
图像没有使用图像的压缩算法,文件会变大,并且要解码后再渲染,加载慢耗时长
执行处理不当会阻塞页面加载和渲染
❝「渲染优化」 ❞
-
「设置viewport」:HTML的
viewport
可加速页面的渲染 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1"> - 「减少DOM节点」:DOM节点太多影响页面的渲染,尽量减少DOM节点
-
「优化动画」
- 尽量使用CSS3动画
- 合理使用requestAnimationFrame动画代替setTimeout
- 适当使用Canvas动画:5个元素以内使用
CSS动画
,5个元素以上使用Canvas动画
,iOS8+
可使用WebGL动画
-
「优化高频事件」:
scroll
、touchmove
等事件可导致多次渲染- 函数节流
- 函数防抖
- 使用requestAnimationFrame监听帧变化:使得在正确的时间进行渲染
- 增加响应变化的时间间隔:减少重绘次数
-
「GPU加速」:使用某些HTML5标签和CSS3属性会触发
GPU渲染
,请合理使用(「过渡使用会引发手机耗电量增加」)- HTML标签:
video
、canvas
、webgl
- CSS属性:
opacity
、transform
、transition
- HTML标签:
❝「样式优化」 ❞
- 「避免在HTML中书写style」
- 「避免CSS表达式」:CSS表达式的执行需跳出CSS树的渲染
- 「移除CSS空规则」:CSS空规则增加了css文件的大小,影响CSS树的执行
-
「正确使用display」:
display
会影响页面的渲染-
display:inline
后不应该再使用float
、margin
、padding
、width
和height
-
display:inline-block
后不应该再使用float
-
display:block
后不应该再使用vertical-align
-
display:table-*
后不应该再使用float
和margin
-
-
「不滥用float」:
float
在渲染时计算量比较大,尽量减少使用 - 「不滥用Web字体」:Web字体需要下载、解析、重绘当前页面,尽量减少使用
-
「不声明过多的font-size」:过多的
font-size
影响CSS树的效率 -
「值为0时不需要任何单位」:为了浏览器的兼容性和性能,值为
0
时不要带单位 -
「标准化各种浏览器前缀」
- 无前缀属性应放在最后
- CSS动画属性只用-webkit-、无前缀两种
- 其它前缀为-webkit-、-moz-、-ms-、无前缀四种:
Opera
改用blink
内核,-o-
已淘汰
- 「避免让选择符看起来像正则表达式」:高级选择符执行耗时长且不易读懂,避免使用
❝「脚本优化」 ❞
-
「减少重绘和回流」
- 避免不必要的DOM操作
- 避免使用document.write
- 减少drawImage
- 尽量改变class而不是style,使用classList代替className
- 「缓存DOM选择与计算」:每次DOM选择都要计算和缓存
-
「缓存.length的值」:每次
.length
计算用一个变量保存值 - 「尽量使用事件代理」:避免批量绑定事件
-
「尽量使用id选择器」:
id
选择器选择元素是最快的 -
「touch事件优化」:使用
tap
(touchstart
和touchend
)代替click
(「注意touch
响应过快,易引发误操作」)
常用规则
❝「雅虎军规」 ❞
雅虎团队通过大量实践总结出以下7类35条
前端优化规则,规则详情请参考这位兄弟的《雅虎前端优化35条规则翻译》。
- 内容
-
「Make Fewer HTTP Requests」:减少
HTTP
请求数 -
「Reduce DNS Lookups」:减少
DNS
查询 - 「Avoid Redirects」:避免重定向
-
「Make Ajax Cacheable」:缓存
AJAX请求
- 「Postload Components」:延迟加载资源
- 「Preload Components」:预加载资源
-
「Reduce The Number Of DOM Elements」:减少
DOM
元素数量 - 「Split Components Across Domains」:跨域拆分资源
-
「Minimize The Number Of Iframes」:减少
iframe
数量 -
「No 404s」:消除
404
错误
-
「Make Fewer HTTP Requests」:减少
- 样式
- 「Put Stylesheets At The Top」:置顶样式
-
「Avoid CSS Expressions」:避免
CSS
表达式 -
「Choose <link> Over @import」:选择
<link>
代替@import
- 「Avoid Filters」:避免滤镜
- 脚本
- 「Put Scripts At The Bottom」:置底脚本
-
「Make JavaScript And CSS External」:使用外部
JS
和CSS
-
「Minify JavaScript And CSS」:压缩
JS
和CSS
- 「Remove Duplicate Scripts」:删除重复脚本
-
「Minimize DOM Access」:减少
DOM
操作 - 「Develop Smart Event Handlers」:开发高效的事件处理
- 图像
- 「Optimize Images」:优化图片
-
「Optimize CSS Sprites」:优化
CSS精灵图
-
「Don't Scale Images In HTML」:不在
HTML
中缩放图片 -
「Make Favicon.ico Small And Cacheable」:使用小体积可缓存的
favicon
- 缓存
-
「Reduce Cookie Size」:减少
Cookie
大小 -
「Use Cookie-Free Domains For Components」:使用无
Cookie
域名的资源
-
「Reduce Cookie Size」:减少
- 移动端
-
「Keep Components Under 25kb」:保持资源小于
25kb
- 「Pack Components Into A Multipart Document」:打包资源到多部分文档中
-
「Keep Components Under 25kb」:保持资源小于
- 服务器
-
「Use A Content Delivery Network」:使用
CDN
-
「Add An Expires Or A Cache-Control Header」:响应头添加
Expires
或Cache-Control
-
「Gzip Components」:
Gzip
资源 -
「Configure ETags」:配置
ETags
- 「Flush The Buffer Early」:尽早输出缓冲
-
「Use Get For AJAX Requests」:
AJAX请求
时使用get
- 「Avoid Empty Image Src」:避免图片空链接
-
「Use A Content Delivery Network」:使用
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Python 线性回归分析以及评价指标详解
- Python实现从N个数中找到最大的K个数
- .NET开源工具类库-Masuit.Tools
- 如何伪装本地IP
- shell脚本执行错误 $‘r‘:command not found
- CentOS7下安装和配置yarn
- android采用FFmpeg实现音视频合成与分离
- 如何在Node.js和Express中上传文件
- Android底部导航栏的动态替换方案
- Android自定义View实现饼状图带动画效果
- Android音视频之视频采集(系统API预览)
- 在Node.js中使用Multer进行文件上传
- Android实现自动填充短信验证码功能
- django项目中新增app的2种实现方法
- 如何使用Node.js编辑XML文件