几个月前口试的时刻问我机能优化我能够会最先背诵雅虎军规，加点
webp，代码层面稍稍讲点，如今体系的梳理下机能优化的各个方面
本文触及方面有:
代码优化
收集要求历程角度入手
DNS剖析TCP竖立链接收集往复时延(
RTT)数据传输
收集题目角度入手
要求数目
流量
机能优化测试东西
代码优化
css代码优化
防止类正则的属性选择器
CSS3添加了庞杂的属性选择器，能够经由过程类正则表达式的体式格局对元素的属性值举行婚配。固然这些范例的选择器定是会影响机能的，正则表达式婚配会比基于种别的婚配会慢许多。大部份情况下我们应只管防止运用 *=， |=， ^=， $=， 和 ~=语法的属性选择器。
合写CSS
除了紧缩的体式格局，我们还能够经由过程少写CSS属性来抵达削减CSS字节的目标
运用继续CSS
css的继续机制也能够帮我们再肯定程度上缩减字节数，我们晓得CSS有许多属性是能够继续的即在父容器设置了默写属性，子容器会默许也运用这些属性，因而假如我们愿望全文字体尺寸是14px，大可不必为每一个容器设置，只须要在body上设置就能够了。运用这个技能，把CSS属性在能够的情况下提到父容器是能够帮我们节约CSS字节的，趁便说一下哪些属性能够继续
一切元素可继续：
visibility和cursor内联元素和块元素可继续：
letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction块状元素可继续：
text-indent和text-align列表元素可继续：
list-style、list-style-type、list-style-position、list-style-image表格元素可继续：
border-collapse不可继续的：
display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before
不必CSS表达式
不乱花CSS reset或属性设置
防止实用通配符或隐式通配符
javascript代码优化
只管运用原生要领
javaScript是解释性言语，比拟编译性言语实行速率要慢。浏览器已完成的要领，就不要再去完成一遍了。别的，浏览器已完成的要领在算法方面已做了许多优化
不要范例转换
JavaScript是动态范例，但假如你想进步速率不要运用该功用。只管坚持变量的范例一致。这也实用于数组，只管主如果由浏览器都举行了优化,但只管不要混用差别范例的数组
防止运用不支持的语法
优化编译器不支持一些特定的语句, 运用这些语法会使包括它的函数没法获得优化.
有一点请注意, 纵然这些语句没法抵达或许不会被实行, 它们也会使相干函数没法被优化
现在不会被优化的有:
generator函数包括
for...of语句的函数包括
try...catch的函数包括
try...finally的函数包括复合
let赋值语句的函数 (原文为 compound let assignment)包括复合
const赋值语句的函数 (原文为 compound const assignment)包括含有
__proto__或许get/set声明的对象字面量的函数
能够永久不会被优化的有:
包括
debugger语句的函数包括字面挪用
eval()的函数包括
with语句的函数
处置惩罚要领
之前提到过的一些语句在临盆环境中是没法防止的, 比方 try...finally 和 try...catch. 为了是价值最小, 它们必需被断绝到一个最小化的函数, 以保证重要的代码不受影响.
运用微类库
一般开辟者都邑运用JavaScript类库，如jQuery、Mootools、YUI、Dojo等，然则开辟者每每只是运用JavaScript类库中的部份功用。为了更大的提拔机能，应只管防止运用这类大而全的类库，而是按需运用微类库来辅佐开辟
用做标记的变量只管运用布尔范例
直接用true和false做标记，不要运用数字或许字符串的1和0来做标记。
jquery最好实践
收集要求角度入手
一般的一次收集要求会阅历4个历程，分别是：
DNS剖析 ->TCP竖立链接 -> 收集往复时延(RTT) -> 数据传输，面对的应战能够总结为时延较高、带宽有限、流量有本钱，详细各历程面对的应战和优化步伐以下。
DNS剖析重要应战：剖析耗时长
优化步伐
削减域名
首屏在3个域名内
削减
DNS查找，防止重定向。浏览器DNS缓存 、计算机DNS缓存、 服务器DNS缓存、运用Keep-Alive特征 来削减DNS查找。
参考资料: DNS剖析
TCP衔接重要应战：除了TCP握手会多一次收集往复，别的在挪动端收集竖立
TCP链接前，还须要举行信令的交互，在2G环境下影响最为显著优化步伐（复用）
HTTP2.0多路复用HTTP/2能够很轻易的去完成多流并行而不必依靠竖立多个 TCP 衔接，HTTP/2 把 HTTP 协定通讯的基本单位减少为一个一个的帧，这些帧对应着逻辑流中的音讯。并行地在同一个 TCP 衔接上双向交流音讯。单衔接多资本的体式格局，削减服务端的链接压力,内存占用更少,衔接吞吐量更大 因为 TCP 衔接的削减而使收集堵塞状态得以改良，同时慢启动时候的削减,使堵塞和丢包恢复速率更快HTTP1.1耐久衔接
参考资料：知乎HTTP2.0
收集往复时延(
RTT)重要应战：耗时长
优化步伐（复用、兼并、就近接入）
就近接入
静态资本：接入
CDN动态数据
接入挪动运营商和小运营商反向代办举行加快
兼并要求，削减要求数目
首屏制止301、302跳转
兼并款式和剧本
运用
css图片精灵首屏必需小图片运用
base64花样内嵌入HTML初始首屏以外的图片资本按需加载，静态资本耽误加载
兼并外联代码
缓存
抽出大众代码复用缓存
运用
LocalStorage等缓存数据图片/外链代码开启缓存
数据传输
重要应战：带宽有限、流量有本钱
优化步伐（复用、紧缩、分包）
紧缩
图片优化
不须要背景通明的采纳jpg替代png 运用webp 运用适宜尺寸的图片，而不是对图片举行拉伸开启
GZIP紧缩代码
静态资本运用不带
cookie的域名
复用
HTTP 304
收集题目角度入手
页面在收集上碰到的题目能够总结为一个或多个收集要求以及每一个要求的流量题目，在要求数目以及每一个要求的流量牢固的情况下，能够经由过程优化要求递次以及合理分别流量来提拔用户体验，要求递次和流量分别一般碰到的题目和优化步伐以下。
要求
重要应战：
没有充分运用有限的并发数目，串行加载数据
能够预先加载的操纵没有预先加载
无用要求抢占并发数目优化
DNS的预剖析
能够经由过程用meta信息来示知浏览器, 我这页面要做DNS预剖析<meta http-equiv="x-dns-prefetch-control" content="on" />能够运用link标签来强迫对DNS做预剖析:<link rel="dns-prefetch" href="http://ke.qq.com/" />HTTP管线化
HTTP管线化能够战胜同域并行要求限定带来的壅塞，它是竖立在耐久衔接之上，是把一切要求一并发给服务器，然则服务器须要根据递次一个一个相应，而不是比及一个相应返来才发下一个要求，如许就节约了许多要求到服务器的时候。不过，HTTP管线化仍旧有壅塞的题目，若上一相应迟迟不回，背面的相应都邑被壅塞到。删除无用要求
流量
重要应战：种种流量混在一同加载，流量之间没有优先级
优化步伐（耽误加载）
耽误加载非首屏代码(拆分首屏css，首屏js)
耽误加载非首屏数据
懒加载，屏幕滚动到才加载耽误加载非首屏图片
轮播图片等第一张图片加载后再加载背面其他图片
网站机能东西
YSLOW
会根据雅虎军规剖析网站
Page Speed Online
Google Page Speed 是当下很盛行的在线测试网站机能东西，基于Google的一套最好的前端机能的划定规矩，你能够很轻易获得大批的机能信息，以至还供应了挪动装备的最好实践报告。
Show Slow
它能从三个盛行的测试东西YSlow，Page Speed和DynaTrace按期猎取测试数据举行总结对照，免费，但须要注册。
