性能优化

@sakila1012 2018-03-19 12:34:56发表于 sakila1012/blog

写在最前面

在开发好页面后,如何让项目的页面更快更好更流畅地运行,是区分一个程序员技术水平和视野的一个重要指标。

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

性能优化是什么?

从前端的角度来说,性能优化可以分为两个方向:用户角度,页面使用流畅,对于性能优化的探索,我们分为页面加载时间跟页面运行效率两个方向来进行研究

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

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

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

页面加载时间监控

有一句话说的好:If You Can't Measure It, You Can't Manage It。

首先推荐一个 Performance Timing ,可以获取到更多页面加载相关的数据。比较常用的有:

DNS解析时间: domainLookupEnd - domainLookupStart
TCP建立连接时间: connectEnd - connectStart
白屏时间: responseStart - navigationStart
dom渲染完成时间: domContentLoadedEventEnd - navigationStart
页面onload时间: loadEventEnd - navigationStart

服务器部分优化

服务器端可以对缓存,DNS 查询时间,链接时间,处理请求时间,响应时间等进行优化

DNS 查询时间:可以使用 http dns 预加载,域名收敛等方法优化
链接时间:建立连接的重点是长连接和连接复用,keep-alive,long-polling,http-straming,websocket,或者自己写过别的协议,更好的是直接上 HTTP2。为了优化链接的环节,前端这里需要对资源使用 CDN,雪碧图,代码合并

服务器发送响应环节,可以使用 Transfer-Encoding=chunked,多次返回响应,具体操作查询 bigpipe。还有减少 cookie 的体积。

前端部分优化

首屏时间,首屏时间,可交换时间,加载完成时间进行优化。