共计 613 个字符，预计需要花费 2 分钟才能阅读完成。
最近在准备面试，就看了许多关于 web 性能优化方面的内容，现在先把它们大概记下来，以后还会补充：
- 压缩源码和图片：选择合适图片格式：图片颜色较多就用 jpg 格式，颜色数较少就用 png 格式，能通过服务器端判断浏览器支持 webP，就用 WebP 格式和 svg 格式; 开启服务器端 Gzip 压缩，尽量减少每一个资源的体积
- 合并静态资源：包括 css、javascript 和小图片，如雪碧图，减少 http 请求
- 使用 CDN：使用第三方提供的静态资源地址。一方面增加并发下载量，另一方面能够和其他网站共享缓存
延长静态缓存时间，设置 expires、cache-control 时间、etag 标签，尽量使用强缓存。 - css 放在页面头部，js 放在页面底部
- 能使用原生 css 实现的样式就尽量使用原生 css，避免使用雪碧图增加请求。
- 异步加载 js，提高首屏加载速度，其他静态资源等到用户需要时再加载。js 异步加载可以设置 script 标签 async。
- 因为事件冒泡机制，最好使用事件代理，减少注册监听事件的 dom 数量，提高性能。
- 第一次加载 dom 元素后将其用变量缓存，避免下次使用时再重新获取 dom 元素。
- 使用 localStorage 缓存一些静态数据，避免去服务器查询。
- 静态资源缓存更新，在更新的文件名后面加上 hash 值使其 url 不同而发起新的连接使其缓存更新。
- 减少 dom 元素，可用到虚拟 dom 思想，用对象缓存 dom 树，通过 diff 算法得到一个 patch，然后最后再渲染真正的 dom。
正文完
