摘要：背景在开发好页面后，如何让页面更快更好的运行，是区分一个程序猿技术水平和视野的一个重要指标。在对这些环节进行优化之前，我们需要知道如何监控这些环节花费了多少时间。为了优化链接的环节，前端这里还需要对资源使用，雪碧图，代码合并等手段。
背景
在开发好页面后，如何让页面更快更好的运行，是区分一个程序猿技术水平和视野的一个重要指标。所以面试时，面试官总会问你一个问题，如何进行性能优化呢？
如果你这时是头脑一片空白，或是像之前的我一样，靠死记硬背或是之前的经历，答一下压缩代码，打包代码，雪碧图，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，谢谢！
有时间的同学也可以看下我的文章大厂前端面试考什么? ,应该也有帮助
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/93751.html
摘要：正因为如此，现在很多简历上的项目经历的质量都是参差不齐，同时有的项目经历又非常相似，面试官一眼就能知道你的项目到底是真是假。虽然以上三点原则不能包治百病，但是对很多同学来说应该是蛮有益处的。阅读本文大概需要 5 分钟。作者：黄小斜showImg(https://user-gold-cdn.xitu.io/2019/3/30/169cdb4bd2cac24c);作为一个程序员，想必大家曾经都...
摘要：所谓高并发，就是同一时间有很多流量通常指用户访问程序的接口页面及其他资源，解决高并发就是当流量峰值到来时保证程序的稳定性。索引多主多从分布式数据库缓存连接池消息队列等是从数据库方便考虑如何优化性能。 所谓高并发，就是同一时间有很多流量(通常指用户)访问程序的接口、页面及其他资源，解决高并发就是当流量峰值到来时保证程序的稳定性。 我们一般用QPS(每秒查询数，又叫每秒请求数)来衡量程序的...
摘要：如果你只是简单罗列出这几个钩子函数的名称，不具体深入阐述的话，你这样的回答很难令面试官满意。那么接下来，闰土大叔将手摸手教你如何深入浅出地说出令面试官满意的有亮点的回答。 当面试官问：谈谈你对vue的生命周期的理解，听到这句话你是不是心里暗自窃喜：这也太容易了吧，不就是beforeCreate、created、beforeMount、mounted、beforeUpdate、updat...
阅读 3527·2021-09-22 15:50
阅读 3232·2019-08-30 15:54
阅读 2747·2019-08-30 14:12
阅读 3057·2019-08-30 11:22
阅读 2078·2019-08-29 11:16
阅读 3574·2019-08-26 13:43
阅读 1191·2019-08-23 18:33
阅读 918·2019-08-23 18:32
