当面试官问你如何进行性能优化时，你该这么回答

更新

写了更新的文章 从负一步开始的性能优化，欢迎你们关注浏览，有收获的话但愿能够star一下 个人博客

背景

在开发好页面后，如何让页面更快更好的运行，是区分一个程序猿技术水平和视野的一个重要指标。因此面试时，面试官总会问你一个问题，如何进行性能优化呢？

若是你这时是头脑一片空白，或是像以前的我同样，靠死记硬背或是以前的经历，答一下压缩代码，打包代码，雪碧图，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预加载，域名收敛等手段优化。我还写了篇介绍DNS和CDN的文章

创建链接的重点是长链接和连接复用，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，谢谢！

有时间的同窗也能够看下个人文章大厂前端面试考什么? ,应该也有帮助