Web性能优化白皮书

最近在准备面试，就看了许多关于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。