专栏首页JowayYoung谈前端前端性能优化指南

前端性能优化指南

前言

发现总结性的小干货可以为大家提升更好的开发技巧和编码思维,对代码量产化提供更扎实的质量和支持。这次我们来聊聊大家可能都比较关心的话题:「性能优化」

一说到页面的性能优化,大家可能都会想起雅虎军规2-5-8原则3秒钟首屏指标等规则,这些规则在开发过程中不是强制要求的,但是有时候为了追求页面性能的完美和体验,就不得不对原有的代码进行修改和优化。

下面就结合自己三年多的开发经验和大量的项目实践,整理出一些常用的性能优化要点,同时再罗列一下雅虎军规2-5-8原则3秒钟首屏指标这三个常用规则的要点。

❝为了方便记忆和阅读,文章使用部分简写名词,解释如下 ❞

  • 「D端」:桌面端页面Desktop End Page
  • 「M端」:移动端页面Mobile End Page

概述指南

  1. D端优化手段在M端同样适用
  2. 在M端提出3秒钟渲染完成首屏指标
  3. 基于第二点,首屏加载3秒内完成或使用Loading进行占位
  4. 基于联通3G网络平均338kb/s(2.71mb/s),首屏资源不应超过1014kb
  5. M端因配置原因,除加载外渲染速度也是优化重点
  6. 基于第五点,要合理处理代码减少渲染损耗
  7. 基于第二点和第五点,所有影响首屏加载和渲染的代码应在处理逻辑中后置
  8. 加载完成后,用户交互使用时也需注意性能

「加载优化」

  • 「减少HTTP请求」:尽量减少页面的请求数(「首次加载同时请求数不能超过4个」),移动设备浏览器同时响应请求为4个请求(Android支持4个,iOS5+支持6个」)
    • 合并CSS和JS
    • 使用CSS精灵图
  • 「缓存资源」:使用缓存可减少向服务器的请求数,节省加载时间,所有静态资源都要在服务器端设置缓存,并且尽量使用长缓存(「使用时间戳更新缓存」)
    • 缓存一切可缓存的资源
    • 使用长缓存
    • 使用外联的样式和脚本
  • 「压缩代码」:减少资源大小可加快网页显示速度,对代码进行压缩,并在服务器端设置GZip
    • 压缩代码(多余的缩进、空格和换行符)
    • 启用Gzip
  • 「无阻塞」:头部内联的样式和脚本会阻塞页面的渲染,样式放在头部并使用link方式引入,脚本放在尾部并使用异步方式加载
  • 「首屏加载」:首屏快速显示可大大提升用户对页面速度的感知,应尽量针对首屏的快速显示做优化
  • 「按需加载」:将不影响首屏的资源和当前屏幕不用的资源放到用户需要时才加载,可大大提升显示速度和降低总体流量(「按需加载会导致大量重绘,影响渲染性能」)
    • 懒加载
    • 滚屏加载
    • Media Query加载
  • 「预加载」:大型资源页面可使用Loading,资源加载完成后再显示页面,但加载时间过长,会造成用户流失
    • 可感知Loading:进入页面时Loading
    • 不可感知Loading:提前加载下一页
  • 「压缩图像」:使用图像时选择最合适的格式和大小,然后使用工具压缩,同时在代码中用srcset来按需显示(「过度压缩图像大小影响图像显示效果」)
    • 使用TinyJpg和TinyPng压缩图像
    • 使用CSS3、SVG、IconFont代替图像
    • 使用img的srcset按需加载图像
    • 选择合适的图像:webp优于jpgpng8优于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动画
  • 「优化高频事件」scrolltouchmove等事件可导致多次渲染
    • 函数节流
    • 函数防抖
    • 使用requestAnimationFrame监听帧变化:使得在正确的时间进行渲染
    • 增加响应变化的时间间隔:减少重绘次数
  • 「GPU加速」:使用某些HTML5标签和CSS3属性会触发GPU渲染,请合理使用(「过渡使用会引发手机耗电量增加」)
    • HTML标签:videocanvaswebgl
    • CSS属性:opacitytransformtransition

「样式优化」

  • 「避免在HTML中书写style」
  • 「避免CSS表达式」:CSS表达式的执行需跳出CSS树的渲染
  • 「移除CSS空规则」:CSS空规则增加了css文件的大小,影响CSS树的执行
  • 「正确使用display」display会影响页面的渲染
    • display:inline后不应该再使用floatmarginpaddingwidthheight
    • display:inline-block后不应该再使用float
    • display:block后不应该再使用vertical-align
    • display:table-*后不应该再使用floatmargin
  • 「不滥用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(touchstarttouchend)代替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错误
  • 样式
    • 「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」:使用外部JSCSS
    • 「Minify JavaScript And CSS」:压缩JSCSS
    • 「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域名的资源
  • 移动端
    • 「Keep Components Under 25kb」:保持资源小于25kb
    • 「Pack Components Into A Multipart Document」:打包资源到多部分文档中
  • 服务器
    • 「Use A Content Delivery Network」:使用CDN
    • 「Add An Expires Or A Cache-Control Header」:响应头添加ExpiresCache-Control
    • 「Gzip Components」Gzip资源
    • 「Configure ETags」:配置ETags
    • 「Flush The Buffer Early」:尽早输出缓冲
    • 「Use Get For AJAX Requests」AJAX请求时使用get
    • 「Avoid Empty Image Src」:避免图片空链接

「2-5-8原则」

在前端开发中,此规则作为一种开发指导思路,针对浏览器页面的性能优化。

  • 用户在2秒内得到响应,会感觉页面的响应速度很快 Fast
  • 用户在2~5秒间得到响应,会感觉页面的响应速度还行 Medium
  • 用户在5~8秒间得到响应,会感觉页面的响应速度很慢,但还可以接受 Slow
  • 用户在8秒后仍然无法得到响应,会感觉页面的响应速度垃圾死了(「此时会有以下四种可能」)
    • 难道是网速不好,发起第二次请求 => 刷新页面
    • 什么垃圾页面呀,怎么还不打开 => 离开页面,有可能转投竞争对手的网站
    • 垃圾程序猿,做的是什么页面啊 => 咒骂开发此页面的程序猿
    • 断网了 => 网线断了?Wi-Fi断了?信号不好?话费用完了?
知道这个规则的数字顺序怎样来的吗,看下键盘右方的数字键盘由下往上排序:2-5-8

「3秒钟首屏指标」

此规则适用于M端,顾名思义就是打开页面后3秒钟内完成渲染并展示内容。

结语

「❤️关注+点赞+收藏+评论+转发❤️」,原创不易,鼓励笔者创作更好的文章

「关注公众号IQ前端,一个专注于CSS/JS开发技巧的前端公众号,更多前端小干货等着你喔」

本文分享自微信公众号 - IQ前端(gh_4593b39979fb),作者:JowayYoung

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-03-13

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 妙用CSS变量,让你的CSS变得更心动

    「CSS变量」又叫「CSS自定义属性」,为什么会突然提起这个很少人用到的东西呢?因为最近在重构个人官网,不知道为什么突然喜欢用上「CSS变量」,可能其自身隐藏的...

    JowayYoung
  • 一行代码全站进入悼念模式

    为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞的深切哀悼,国务院发布公告,决定「2020年4月4日举行全国性哀悼活动」。

    JowayYoung
  • 聊聊苹果营销页中几个有趣的交互动画

    前两天在浏览 苹果 16寸 营销页面[1] 的时候,发现了几个比较有意思的交互,心里想着自己虽然是一个穷逼,但是知识是无界限的呀,于是便研究了一波。

    JowayYoung
  • 元编程实现优雅的懒加载

    计算机行业发展了这么多年,出现过无数的专业名词,有的古老名词过时了并被人们淡忘,但有的古老名词不仅没过时,还从本身的狭义概念上升到广义的哲学概念。

    Jean
  • WebView加载页面的两种方式——网络页面和本地页面

      加载网络页面,是最简单的一种方式,只需要传入http的URL就可以,实现WebView加载网络页面

    用户3030674
  • HTTP图解笔记(六)—— 第6章 HTTP首部

    为啥第一章直接跳到第六章呢,因为...博主当初看书的时候挑着看..只看了第一章和第六章┗( ▔, ▔ )┛

    小菠萝测试笔记
  • 多启动优盘制作

    @坤的
  • ​产品经理如何学机器学习——一篇以产品为中心的机器学习概论

    我现在常常听说产品负责人/经理、技术经理和设计师通过网上课程学习机器学习。我一直鼓励这种做法——实际上,我本人曾学习过那些课程(并且在博客上发表了相关内容)。 ...

    AI科技大本营
  • java类加载器加载机制

      Java的安全模型是的Java成为适于网络环境的技术——《深入Java虚拟机》

    the5fire
  • AI 技术讲座精选:​产品经理如何学机器学习——一篇以产品为中心的机器学习概论

    我现在常常听说产品负责人/经理、技术经理和设计师通过网上课程学习机器学习。我一直鼓励这种做法——实际上,我本人曾学习过那些课程(并且在博客上发表了相关内容)。但...

    AI科技大本营

扫码关注云+社区

领取腾讯云代金券