作者：JowayYoung仓库：Github、CodePen博客：官网、掘金、师傅、知乎公众号：智商前端特别声明：原创不易，未经授权不得转载或抄袭，如需转载可以联系作者授权前言，发现总结干货可以提升你的开发技能和编码思维，为代码量产提供更扎实的品质和支持。这一次，我们来说说大家可能比较关心的一个话题：性能优化。说到页面性能优化，大家可能会想到Yahoo!军规、2-5-8原则、3秒首屏指标等规则。这些规则在开发过程中并不是强制要求的，但有时为了追求完美的页面性能和体验，不得不对原有代码进行修改和优化。下面我将结合自己三年多的开发经验和大量的项目实践，整理出一些常用的性能优化点。同时，我会列出雅虎军规的三个常用规则，2-5-8原则，3秒首屏指标要点。为了方便记忆和阅读，文中使用了一些缩写名词，解释如下D-side:DesktoppageDesktopEndPageM-side:MobilepageMobileEndPageOverviewGuide完成首屏指示符是根据关于第二点。3秒内完成首屏加载或使用Loading占位。基于联通3G网络平均338kb/s（2.71mb/s），由于配置原因，首屏资源不应超过1014kbM，除加载外的渲染速度也是优化的重点。基于第五点，合理处理代码，减少渲染损失。基于第二点和第五点，所有影响首屏加载和渲染的代码都应该在处理逻辑中进行后加载。用户交互使用时，还应注意性能加载优化，减少HTTP请求：尽量减少页面请求数（首次加载同时请求数不能超过4），移动设备浏览器响应4个请求同时（Android支持4个，iOS5+支持6个）1）结合CSS和JS，使用CSSsprites缓存资源：使用缓存可以减少对服务器的请求次数，节省加载时间。所有静态资源都必须缓存在服务器端，并尽量使用长缓存（使用时间戳来更新缓存）缓存所有可缓存的资源使用长缓存使用外联样式和脚本压缩代码：减少资源大小以加快速度网页显示，压缩代码，并在服务器端设置GZip压缩代码（额外的缩进，空格，换行符）启用Gzip非阻塞：头部内联的样式和脚本会阻塞页面的渲染，样式是放在头部使用链接方式导入，脚本放在尾部异步加载大大提高了用户对页面速度的感知，并尝试优化首屏的快速显示。按需加载：不影响首屏的资源和当前屏没有用到的资源在用户需要的时候加载，可以大大提高显示速度和降低整体流量（按需加载会导致大量重绘，影响渲染性能）LazyloadingscrollingloadingMediaQueryloadingpreloading：大资源页面可以使用Loading，资源加载完成后页面才会显示，但是加载时间过长会导致Loadingis感知用户流失：进入页面时感知不到加载加载：提前加载下一页压缩图片大小影响图片显示效果）使用TinyJpg、TinyPng压缩图片使用CSS3、SVG、IconFont替换图片使用img的srcset加载图片点播选择合适的图片：webp优于jpg，png8优于gif选择合适的大小：第一次加载不要大于1014kb，宽度不要大于640pxPS。切图时D端画质80，M端画质60。减少cookies：cookies会影响加载速度。静态资源域名不使用cookies避免重复Orientation：重定向会影响加载速度。正确设置服务器以避免重定向。第三方资源的异步加载：不可控的第三方资源会影响页面的加载和显示。异步加载第三方资源的加载过程是最耗时的过程。可能占总耗时的80%（**优化重点**）执行优化CSS写在head，JS写在tail，异步避免img、iframe等空src：emptysrc会重新加载当前Pages，影响速度和效率尽量避免重新设置图片大小：多次重新设置图片大小会导致图片多次重绘，影响性能。图片尽量避免使用DataURL：DataURL图片没有使用图片压缩算法，文件会变大。并且它需要在渲染之前进行解码。缓慢加载需要很长时间。处理不当会阻塞页面加载和渲染。渲染优化设置视口：HTML视口可以加快页面渲染减少DOM节点：DOM节点过多影响页面渲染，尽量减少DOM节点优化动画尽量使用CSS3动画，合理使用requestAnimationFrame动画代替setTimeout正确使用Canvas动画：小于使用CSS动画5个元素，超过5个元素使用Canvas动画，iOS8+可以使用WebGL动画优化高频事件：scroll、touchmove等事件可以引起多个渲染函数节流功能防抖使用requestAnimationFrame监听帧变化：make在正确的时间渲染增加响应变化的时间间隔：减少重绘次数GPU加速：使用一些HTML5标签和CSS3属性会触发GPU渲染，请合理使用（transitional使用会导致手机耗电增加）HTML标签：video、canvas、webglCSS属性：opacity、transform、transition样式优化避免在HTML中写样式避免CSS表达式：CSS表达式的执行需要跳出渲染CSS树移除CSS空规则：CSSEmptyrulesaddcss文件的大小影响CSS树的执行。display的正确使用：display会影响页面的渲染。display:inline之后，不应该使用float、margin、padding、width和height。在display:inline-block之后，你不应该在display:block之后使用float。不要在vertical-aligndisplay:table-*之后使用float和margin不要滥用float：float在渲染过程中是计算密集型的，尽量减少使用网页字体不要滥用网页字体：网页字体需要下载、解析、处理重绘页面，尽量少用不要声明太多的font-size：太多的font-size会影响CSS树的效率。值为0时不需要单位：为了浏览器的兼容性和性能，当值为0时不需要单位标准化各种浏览器前缀不带前缀的属性应该放在最后CSS动画属性只使用-webkit-，没有前缀另外两个前缀是-webkit-、-moz-、-ms-、无前缀四：Opera使用blink内核，-o-已过时避免让选择器看起来像正则表达式：高级选择器执行起来耗时且难以阅读，避免使用脚本优化减少重绘和回流避免不必要的DOM操作避免使用document.write减少drawImage尝试更改类而不是样式，并使用classList而不是className来缓存DOM选择和计算：必须计算和计算每个DOM选择缓存。cache.length的值：每次time.length计算使用一个变量保存值尽可能使用事件代理：避免批处理绑定事件尽可能使用id选择器：id选择器选择元素是最快的触摸事件优化：使用tap（touchstart和touchend）代替click（注意touch响应太快，容易造成误操作）常用规则雅虎军规雅虎团队通过大量实践，总结出以下7类35条前端优化规则.详细规则可以参考这位兄弟的《雅虎前端优化35条规则翻译》内容减少HTTP请求：减少HTTP请求的数量减少DNS查找：减少DNS查询避免重定向：避免重定向使Ajax可缓存：缓存AJAX请求后加载组件：延迟加载资源预加载组件：预加载资源减少DOM元素的数量：减少DOM元素数量SplitComponentsAcrossDomains：跨域拆分资源MinimizeTheNumberOfIframes：减少iframe的数量No404s：消除404错误样式PutStylesheetsAtTheTop：顶部样式AvoidCSSExpressions：避免CSSexpressions选择\在@import上：选择而不是@importAvoid过滤器：避免过滤脚本将脚本放在底部：使JavaScript和CSS外部化：使用外部JS和CSSMinifyJavaScript和CSS：压缩JS和CSS删除重复脚本：删除重复脚本MinimizeDOMAccess：减少DOM操作DevelopSmartEventHandlers：开发高效的事件处理ImagesOptimizeImages：优化images优化CSSSprites：优化CSSsprites不要缩放HTML中的图像：不要缩放HTML中的图像使Favicon.ico小且可缓存：使用小型可缓存的favicon缓存减少Cookie大小：减少cookie大小使用无Cookie域ForComponents:Usecookie-freedomainresourcesMobileKeepComponentsUnder25kb:Keepresourcesbelow25kbPackComponentsIntoAMultipartDocument:将资源打包成多部分文档MediumserverUseAContentDeliveryNetwork:UseCDNAAddAnExpiresOrACache-ControlHeader:添加ExpiresorCache-ControlHeader到响应头。GzipComponents:GzipresourcesConfigureETags:ConfigureETagsFlushTheBufferEarly:OutputbufferingasaspossibleearlyUseGetForAJAXRequests:AJAXUsegetAvoidEmptyImageSrcwhenrequesting:avoidimageemptylinks前端开发中的2-5-8原则，此规则用作优化浏览器页面性能的开发指南。用户会在2秒内得到响应，感觉页面响应速度非常快。快的用户在2-5秒内得到响应，感觉页面的响应速度还不错。中等用户在5-8秒内得到响应，他们觉得页面响应速度很慢，但Slow用户是可以接受的。8秒后还是得不到响应，你会觉得页面响应速度垃圾（此时有四种可能）。会不会是网速不好，发起二次请求=>刷新页面，什么垃圾页面，什么？尚未打开=>离开页面，并可能切换到竞争对手的网站。你在做什么类型的页面？Wi-Fi关闭？信号不好？话费用完了？你知道这个规则的序号是怎么来的吗？查看键盘右侧的数字键盘，从下到上排序：2-5-83秒首屏指示符此规则适用于M端。顾名思义，就是在打开页面后3秒内完成内容的渲染和显示。结语??关注+点赞+收藏+评论+转发??，原创不易，鼓励作者创作更多优质文章关注公众号IQ前端，一个专注于CSS/JS开发技巧的前端公众号，更多前端小技巧干货等着你。关注并回复即可免费领取学习资料。关注和回复群拉你进技术交流群。欢迎关注智商前端。更多CSS/JS开发技巧只会推送在公众号
