前端性能优化（二）

页面优化

加载过程

• DNS预取：首先从地址栏输入一个url我们需要将url地址解析，获取其中的主机地址，然后再对主机地址发送请求获取资源。这里我们先需要进行DNS查询，而DNS查询这个过程我们可以让浏览器进行DNS预取加快查询，电脑主机会先从本机DNS缓存中查找域名映射，若没有则会默认进行DNS递归查询。

• TCP preconnect：tcp调优、HTTP/2、keep-alive

• http缓存：让本地客户端缓存一些常用资源、from cache、from disk

• CND加速：多地分布服务器资源

• 合并请求：如雪碧图、nignx模块、SSR服务端渲染

• 减小资源体积：减小cookie体积（为什么cookie才4KB容量）、图片压缩、gzip压缩

• 文档加载：css样式放在html文档头部，js脚本放在html文档末尾、异步加载js

渲染过程

• 合并DOM操作，减少DOM操作

• 尽早开始执行js，用DOMContentLoad

• 懒加载

• 对DOM查询进行缓存

• SSR服务端渲染

• 使用防抖和节流

检测页面的内存泄漏