# 页面优化

一个页面从输入 url 到最终呈现整个流程可以分为资源加载过程和页面渲染过程。优化页面时我们可以从这两个角度去思考得到一些性能调优的思路

# 加载过程

• 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 服务端渲染
• 使用防抖和节流

# 检测页面的内存泄漏

之前面试的时候被问到过这个问题，如何快速检测出页面存在内存泄露情况。当时完全懵了，不知道怎么样调试才能检测出。后来去网上搜找到了一篇文章讲的十分好，在此记录一下。How to find memory leaks in JavaScript