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

点击上方蓝色字体【学习web前端】可【快速关注】

【讲座】大咖说-前端大型免费公开讲座
<http://mp.weixin.qq.com/s?__biz=MzI1ODI5NjE1NQ==&mid=2247484964&idx=1&sn=95fd26744f9aa5e9398326b334bdcd15&chksm=ea0b1610dd7c9f06b8c307b355a59028f8e352ed8026d7a83fe8dbeb706fea03c2598e602ff7&scene=21#wechat_redirect>

【福利】
<http://mp.weixin.qq.com/s?__biz=MzI1ODI5NjE1NQ==&mid=2247485050&idx=2&sn=93a1939ea5b9368a52b2953893ad012b&chksm=ea0b164edd7c9f586042f56d67f631504d773757c8b0d244e99546720ee5154ca460c2e3e775&scene=21#wechat_redirect>
2018自学者的web前端系统学习福利
<http://mp.weixin.qq.com/s?__biz=MzI1ODI5NjE1NQ==&mid=2247485050&idx=2&sn=93a1939ea5b9368a52b2953893ad012b&chksm=ea0b164edd7c9f586042f56d67f631504d773757c8b0d244e99546720ee5154ca460c2e3e775&scene=21#wechat_redirect>

【教程】精品教程在这里
<http://mp.weixin.qq.com/s?__biz=MzI1ODI5NjE1NQ==&mid=2247484996&idx=2&sn=a62abb688ead90f59a48822a1ead2d80&chksm=ea0b1670dd7c9f66eaad2d02667b7a76e15f35c621242ac5238a6bc0ba3cadc3c64fca7e6c76&scene=21#wechat_redirect>

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

如果你这时是头脑一片空白，或是像之前的我一样，靠死记硬背或是之前的经历，答一下压缩代码，打包代码，雪碧图，cdn，事件代理，这说明你对性能优化还是缺乏一个整体，系统的掌握，对性能优化还只是处于听说过一个方法就加上去的阶段。这样也就无从去更好的优化性能。

性能优化是什么

从前端的角度来说，性能优化可以分为两个方向。从用户角度来看，一个是页面加载的很快，另一个是页面使用起来很流畅。因此，对性能优化的探索，我们可以分为页面加载时间跟页面运行效率两个方向来进行研究

从浏览器打开到页面渲染完成，花费了多少时间

是的，这个问题有点熟悉，面试官比较常问的是从浏览器打开到页面渲染完成，发生了什么事情。这个问题网上很多回答，我也不就重复的细说了。主要的过程是：

浏览器解析->查询缓存->dns查询->建立链接->服务器处理请求->服务器发送响应->客户端收到页面->解析HTML->构建渲染树->开始显示内容(白屏时间)->首屏内容加载完成(首屏时间)->用户可交互(DOMContentLoaded)->加载完成(load)

很显然，如果我们要进行加载时间的优化，我们需要从这里的每一个步骤都去思考，去总结，而避免东凑一点，西凑一点。

页面加载时间监控

有一句话说得好，If You Can't Measure It, You Can't Manage
It。在对这些环节进行优化之前，我们需要知道如何监控这些环节花费了多少时间。

首先推荐一个PerformanceTiming,可以获取到很多页面加载相关的数据。比较常用的有
DNS解析时间： domainLookupEnd - domainLookupStart TCP建立连接时间： connectEnd - connect
Start 白屏时间： 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的体积等等。

前端部分优化要点

前端部分可以对白屏时间，首屏事件，可交换时间，加载完成时间进行优化。

作者 | hpoenixf

声明 | 文章著作权归作者所有，如有侵权，请联系小编删除。

如果大家对特效或者小游戏开发学习感兴趣的话，可以加入小编学习交流QQ群（462411750），点击【阅读原文
】即可加入.每晚8点我都会在公开讲座上免费为大家分享一些特效及小游戏开发案例。带你从零开始，学习制作特效或小游戏。让我们相互陪伴，共同成长！
猜你喜欢的文章
►老司机程序员用到的各种网站整理
<http://mp.weixin.qq.com/s?__biz=MzI1ODI5NjE1NQ==&mid=2247485096&idx=1&sn=198a83ccc9c83deca562ab1935d58048&chksm=ea0b169cdd7c9f8aade7faae8d8f10c5dc574f13e2946a73c8b80058c5b624c3004b46ceb65c&scene=21#wechat_redirect>

► 程序员2万工资很高？金融从业者工资曝光，网友感慨程序员被秒杀
<http://mp.weixin.qq.com/s?__biz=MzI1ODI5NjE1NQ==&mid=2247485089&idx=1&sn=19ede7590e954de0071223113ab04df7&chksm=ea0b1695dd7c9f83900cab264c2a3d51e1f778fcd06752be22ab67668831502056be177eab17&scene=21#wechat_redirect>

► 程序员那些牛逼闪闪的禁术，看到第二条我就忍不住哈哈哈哈哈哈哈哈
<http://mp.weixin.qq.com/s?__biz=MzI1ODI5NjE1NQ==&mid=2247485086&idx=1&sn=42d7682c050d43558fa849ce9d79441e&chksm=ea0b16aadd7c9fbc088f86dfb5868db428184b5f4f78d754cb18ebc4eee8e2c76f248c96417f&scene=21#wechat_redirect>

► 【代码收藏】爬取妹子签名和日志并邮件发送
<http://mp.weixin.qq.com/s?__biz=MzI1ODI5NjE1NQ==&mid=2247485083&idx=1&sn=9cf10e1130cef25fcae2b41393d971f5&chksm=ea0b16afdd7c9fb95efffe64687fce5e561512eccb80f98438d52f32921e6804993071e6b220&scene=21#wechat_redirect>

► 浅谈canvas绘画王者荣耀-雷达图
<http://mp.weixin.qq.com/s?__biz=MzI1ODI5NjE1NQ==&mid=2247485157&idx=1&sn=b5c2b4f1da0de9ebcd6fb41ae47fb359&chksm=ea0b16d1dd7c9fc7597ab9017e7a30c647332a3e993f9fc854e94cd3aee091d5c948df80002b&scene=21#wechat_redirect>
点击“阅读原文”即可加入免费学习做游戏/项目。

热门工具换一换