前言我发现总结的干货可以提升你的开发技能和编码思维，为代码的量产提供更扎实的质量和支持。这一次，我们来说说大家可能比较关心的一个话题：性能优化。说到页面性能优化，大家可能会想到Yahoo!军规、2-5-8原则、3秒首屏指标等规则。这些规则在开发过程中并不是强制要求的，但有时为了追求完美的页面性能和体验，不得不对原有代码进行修改和优化。下面我将结合自己三年多的开发经验和大量的项目实践，整理出一些常用的性能优化点。同时，我会列出雅虎军规的三个常用规则，2-5-8原则，3秒首屏指标要点。为方便记忆和阅读，文中使用了一些缩写名词，解释如下D端：桌面端页面M端：移动端页面概览指南D端优化方法同样适用于M端结束并建议3秒渲染完成。第一屏的索引是基于第二点的。首屏在3秒内加载或使用Loading占用空间。基于联通3G网络平均338kb/s（2.71mb/s），由于M端配置原因，首屏资源不应超过1014kb除了加载，渲染速度也是优化的重点.基于第五点，合理处理代码，减少渲染损失。基于第二点和第五点，所有影响首屏加载和渲染的代码都应该在处理逻辑中进行后加载。用户交互使用时也要注意性能加载优化，减少HTTP请求：尽量减少页面请求数（首次加载同时请求数不能超过4），移动设备浏览器同时响应4个请求（Android支持4个请求，iOS5+支持6个）合并CSS和JS使用CSSsprites缓存资源：使用缓存可以减少对服务器的请求次数，节省加载时间。所有静态资源都必须缓存在服务器端，并尽量使用长缓存（使用时间戳更新缓存）缓存所有可缓存的资源使用长缓存使用外联样式和脚本压缩代码：减少资源大小以加快网页速度页面显示，压缩代码，服务器端设置GZip压缩代码（额外缩进，空格，换行）head使用链接方式导入，脚本放在tail异步加载提速并降低整体流量（按需加载会造成大量重绘，影响渲染性能）LazyloadingscrollingloadingMediaQueryloadingpreloading：加载可用于大资源pages，加载资源后会显示页面，但加载时间过长。会造成用户流失PerceivedLoading:进入页面时加载UnPerceivedLoading:提前加载下一页大小影响图片显示效果)使用TinyJpg和TinyPng压缩图片使用CSS3,SVG,IconFont替换图片使用img的srcset按需加载图片选择合适的图片：webp优于jpg，png8优于gif当图片大于1014kb且宽度不大于640px时，D面存图质量为80，M面存图质量side为60。减少cookies：cookies会影响加载速度，静态资源域名不使用cookies。避免重定向：重定向会影响加载速度，正确设置服务器避免重定向和异步加载第三方资源：不可控的第三方资源会影响页面的加载和显示，异步加载第三方资源的加载过程是最耗时的过程，可能占总耗时的80%（**优化关键**）执行优化CSS写在head，JS写在tail，异步避免空srcimg、iframe等：清空src会重新加载当前页面，影响速度和效率尽量避免重置图片大小：多次重置图片大小会导致图片多次重绘，影响性能。尽量避免使用DataURL：DataURL图片没有使用图片压缩算法，文件会变大，渲染前必须先解码。加载慢需要很长时间执行不当会阻塞页面加载和渲染渲染优化设置viewport：HTMLviewport可以加快页面渲染减少DOM节点：DOM节点过多影响页面渲染，尽量减少DOM节点优化动画，尽量使用CSS3动画，合理使用requestAnimamotionFrame动画代替setTimeout正确使用Canvas动画：5个元素以下使用CSS动画，5个元素以上使用Canvas动画，iOS8+可以使用WebGL动画优化高频事件：scroll、touchmove等事件可以引发多个renderingfunctionstothrottlefunctionprevention使用requestAnimationFrame监控帧变化：在正确的时间渲染增加响应变化的时间间隔：减少重绘次数GPU加速：使用一些HTML5标签和CSS3属性会触发GPU渲染，请使用合理（过渡使用会导致手机功耗增加）HTML标签：video、canvas、webglCSS属性：opacity、transform、transition样式优化避免在HTML中写样式避免CSS表达式：CSS表达式的执行需要跳出移除CSS空规则的CSS树的呈现:CSS空规则增加了css的大小文件，它会影响CSS树的执行。display的正确使用：display会影响页面的渲染。在display:inline之后，您不应使用float、margin、padding、width和height。在display:inline-block之后，你不应该使用它。你应该使用floatdisplay:block然后你不应该使用vertical-aligndisplay:table-*并且你不应该再次使用float和margin。不要滥用float：float在渲染时计算量大，尽量减少使用webfonts：WebFonts需要在当前页面下载、解析、重绘。尽量少用。不要声明太多的font-size：太多的font-size会影响CSS树的效率。当值为0时，不需要单位：为了浏览器兼容性和性能，当值为0时，不带单位标准化各种浏览器前缀不应该放在最后的前缀属性CSS动画属性只使用-webkit-，无前缀，其他前缀为-webkit-、-moz-、-ms-、无前缀四：Opera改用blink内核，-o-已被淘汰，避免让选择器看起来像正则表达式：高级选择器执行时间长，不易阅读，避免使用脚本优化，减少Redraw和reflow，避免不必要的DOM操作避免使用document.write减少drawImage尝试改变class而不是style，使用classList而不是className缓存DOM选择和计算：每个DOM选择都必须计算和缓存缓存的值.length：每Times.length计算使用变量保存值尝试使用事件代理：避免批量绑定事件尝试使用id选择器：id选择器选择元素是最快的触摸事件优化：改用tap（touchstart和touchend）点击的（注意touch响应太快，容易造成误操作）通用规则雅虎军规雅虎团队总结了以下7类35个前端优化通过大量实践制定规则。详细规则可以参考这位兄弟的《雅虎前端优化35条规则翻译》内容减少HTTP请求：减少HTTP请求的数量减少DNS查找：减少DNS查询避免重定向：避免重定向使Ajax可缓存：缓存AJAX请求后加载组件：延迟加载资源预加载组件：预加载资源减少DOM元素的数量：减少DOM元素数量SplitComponentsAcrossDomains：跨域拆分资源MinimizeTheNumberOfIframes：减少iframe的数量No404s：消除404错误StylesPutStylesheetsAtTheTop：顶级样式AvoidCSSExpressions：避免CSSexpressions选择Over@import：选择而不是@import避免过滤器：避免过滤脚本将脚本放在底部：将脚本放在底部外部制作JavaScript和CSS：使用外部JS和CSS缩小JavaScript和CSS：压缩JS和CSS删除重复脚本：删除重复脚本MinimizeDOMAccess：减少DOM操作DevelopSmartEventHandlers：开发高效的事件处理图片OptimizeImages:优化图像优化CSSSprites:优化CSSspritesDon'tScaleImagesInHTML:DonotscalingimagesinHTMLMakeFavicon.icoSmallAndCacheable：使用小型可缓存的favicon缓存ReduceCookieSize：减小cookie大小UseCookie-FreeDomainsForComponents：使用cookie-freedomainresourcesMobileKeepComponentsUnder25kb：将资源保持在25kb以下PackComponentsIntoAMultipart文档：将资源打包成多部分文档服务器使用内容交付网络：使用CDN添加过期或缓存控制标头：将过期或缓存控制添加到响应标头Gzip组件：Gzip资源配置ETags：配置ETags尽早刷新缓冲区:Outputbufferingasearly对AJAX请求使用get:使用getAvoidEmptyImageSrcwhenAJAXrequests:Avoidimageemptylinks2-5-8原则在前端开发中，这个规则作为浏览器页面的开发指南的性能优化如果用户在2秒内得到响应，他们会觉得页面的响应速度非常快。快速地。如果用户在2-5秒内得到响应，他们会觉得页面的响应速度还可以。响应速度很慢，但是可以接受。慢用户8秒后仍然得不到响应，他们会觉得页面的响应速度很垃圾。（这时候就会有以下四种可能）。请求=>刷新页面，什么垃圾页面，你为什么不打开它=>离开页面，可能会切换到竞争对手的网站，你做的是什么页面？=>骂开发这个页面的程序员，掉线了=>网线坏了？Wi-Fi坏了？信号不好？话费算完了？你知道这个规则的序号是怎么来的吗？查看键盘右侧的数字键盘，从下到上排序：2-5-83秒首屏Indicators这条规则适用于M端，顾名思义就是内容的渲染和显示页面打开后3秒内完成。最后的结论几乎是一样的。如果我想到以后有什么其他的前端性能优化我错过了，我会继续完成这篇文章。同时也希望小伙伴们能够对文章中的要点进行补充或者提出自己的看法。欢迎在下方评论或补充，喜欢的可以点赞或收藏，保证开发中能用得上。
