在网页开发的世界里,如何使页面飞速加载并流畅运行,是衡量一个程序员技术水平和视野的重要指标。当面对面试官的“性能如何优化?”这一问题时,如果你支支吾吾,或者只凭借死记硬背和以往的经验回答一些零碎的方法,如压缩代码、打包代码等,那么说明你对于性能优化尚未形成全面、系统的掌握。这样的状态是无法真正做好性能优化的。
那么,什么是性能优化呢?从前端的角度来看,性能优化可以划分为两个方向:一是用户视角的页面快速加载,二是用户视角的页面流畅使用。我们可以围绕页面加载时间和页面运行效率这两个方面来研究和探讨性能优化。
当我们谈论从浏览器打开到页面渲染完成所花费的时间时,这个问题就变得非常关键了。面试时,面试官经常会问到这个问题。整个过程包括浏览器解析、查询缓存、dns查询、建立链接、服务器处理请求、服务器发送响应、客户端接收页面等一系列步骤。很显然,如果我们想要优化加载时间,就需要对每一个环节进行深入思考、总结,而不是采取一些零散、片段化的方法。
在性能优化的过程中,页面加载时间监控是非常重要的一环。有一句话说得好:“如果你不能度量它,你就不能管理它。”在优化之前,我们需要了解每个环节花费了多少时间。为此,我们可以借助PerformanceTiming这个工具来获取许多与页面加载相关的数据。比如DNS解析时间、TCP建立连接时间、白屏时间等等。除了使用这个API,我们还可以采用其他方法来进行监控,比如记录服务器渲染返回的时间点、SPA路由跳转离开的时间点等。我们还可以利用google analytics等工具来进行监测。
在服务器端的优化方面,我们可以对缓存、dns查询时间、连接时间等进行优化。对于缓存的优化就不多说了。在dns查询时间方面,我们可以采用httpdns或dns预加载等技术来优化。而在建立连接方面,我们可以使用长连接和链接复用技术,比如keep-alive、http2等来提高连接效率。为了进一步优化链接环节,前端还可以采用资源使用cdn、雪碧图以及代码合并等手段。在服务器处理请求方面,我们可以采用一些优化手段,比如在移动端访问PC端页面时进行服务器端302跳转等。还可以启用hsts来提升安全性。在服务器发送响应环节,我们可以使用Transfer-Encoding=chunked技术来多次返回响应等。
在前端部分的优化方面,我们可以针对白屏时间、首屏事件等进行优化。性能优化是一个综合性的工作,需要我们从整体和细节两方面去考虑和实践。只有这样,才能真正做好性能优化工作。这篇文章由hpoenixf原创撰写。如果发现任何版权问题或侵权内容,请联系删除。
文章来自《钓虾网小编|www.jnqjk.cn》整理于网络,文章内容不代表本站立场,转载请注明出处。