背景

在开发好页面后，怎样让页面更快更好的运转，是辨别一个顺序猿技术水平和视野的一个重要目标。所以口试时，口试官总会问你一个题目，怎样举行机能优化呢？

假如你这时候是思想一片空白，或是像之前的我一样，靠死记硬背或是之前的阅历，答一下紧缩代码，打包代码，雪碧图，cdn，事宜代办，这说明你对机能优化照样缺少一个团体，体系的控制，对机能优化还只是处于听说过一个要领就加上去的阶段。如许也就无从去更好的优化机能。

近来一个礼拜经由猖獗的口试和查询材料，我总算积累了一些履历和思索，在这个雇用的黄金时候，分享给人人，愿望人人能够有一点收成。假如有收成，迎接关注和star一下博客，github

机能优化是什么

从前端的角度来讲，机能优化能够分为两个方向。从用户角度来看，一个是页面加载的很快，另一个是页面运用起来很流通。因而，对机能优化的探究，我们能够分为页面加载时候跟页面运转效力两个方一直举行研究

从浏览器打开到页面衬着完成，花费了若干时候

是的，这个题目有点熟习，口试官比较常问的是从浏览器打开到页面衬着完成，发生了什么事情。这个题目网上许多回复，我也不就反复的细说了。重要的历程是：

浏览器剖析->查询缓存->dns查询->竖立链接->服务器处置惩罚请求->服务器发送相应->客户端收到页面->剖析HTML->构建衬着树->最先显现内容(白屏时候)->首屏内容加载完成(首屏时候)->用户可交互(DOMContentLoaded)->加载完成(load)

很显然，假如我们要举行加载时候的优化，我们须要从这里的每个步骤都去思索，去总结，而防备东凑一点，西凑一点。

页面加载时候监控

有一句话说得好，If You Can’t Measure It, You Can’t Manage It。在对这些环节举行优化之前，我们须要晓得怎样监控这些环节花费了若干时候。

起首引荐一个PerformanceTiming,能够获取到许多页面加载相干的数据。
比较经常使用的有

DNS剖析时候： domainLookupEnd - domainLookupStart
TCP竖立衔接时候： connectEnd - connectStart
白屏时候： responseStart - navigationStart
dom衬着完成时候： domContentLoadedEventEnd - navigationStart
页面onload时候： loadEventEnd - navigationStart

假如不运用该API，能够以服务器衬着返回的时候，或是SPA路由跳转脱离的时候为出发点，domContentLoaded，load等事宜为完毕点举行纪录。或是直接上google analytics。要领许多，就不细说了。

服务器部份优化要点

后端部份能够对缓存，dns查询时候，链接时候，处置惩罚请求时候，相应时候等举行优化。

缓存就不细说了。

dns查询时候能够运用httpdns或是dns预加载，域名收敛等手腕优化。

竖立衔接的重点是长衔接和链接复用，keep-alive，long-polling，http-straming，websocket或是本身写过别的协定，更好的是直接上http2。为了优化链接的环节，前端这里还须要对资本运用cdn，雪碧图，代码兼并等手腕。

服务器处置惩罚请求这里能够优化的点也不少，值得注意的就是挪动端接见PC端页面须要跳转到挪动端页面时，要再服务器端运用302跳转，不要在前端举行跳转。另有就是启用hsts，请求浏览器在以后的接见运用https，削减无谓的http跳转https，同时还能够防备ssl剥离进击，提拔安全性。

服务器发送相应环节，能够运用Transfer-Encoding=chunked，屡次返回相应，具体操作查询bigpipe。另有就是减小cookie的体积等等。

前端部份优化要点

前端部份能够对白屏时候，首屏事宜，可交换时候，加载完成时候举行优化。

-未完，待续-

博客文章链接web机能优化（一），github，迎接star和follow，感谢！

有时候的同砚也能够看下我的文章大厂前端口试考什么? ,应当也有协助