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

在对这些环节进行优化之前，我们需要知道如何监控这些环节花费了多少时间。

可以获取到很多页面加载相关的数据。比较常用的有

  • 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的体积等等。

推荐阅读：

swoole通往大神之路——swoole任务中心说明及进程任务架构搭建

版权声明：本文为a609251438原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/a609251438/p/12173776.html