1.减少请求数量
文件合并
图片合并或base64
避免使用空的src和href
不使用CSS @import
减少重定向
使用缓存
2.减小资源大小
资源压缩
安卓下使用webp格式的图片
开启gzip
3.优化网络连接
使用CDN
使用DNS预解析
<script type="text/javascript">
< link rel = "dns-prefecth"
href = "https://www.google.com" >
<
link rel = "dns-prefecth"
href = "https://www.google-analytics.com" >
//提前解析之后可能会用到的域名，使解析结果缓存到系统缓存中，缩短DNS解析时间，来提高网站的访问速度
</script>
并行连接: 由于在HTTP1.1协议下，chrome每个域名的最大并发数是6个。使用多个域名，可以增加并发数
持久连接: 使用keep-alive或presistent来建立持久连接，持久连接降低了时延和连接建立的开销，将连接保持在已调谐状态，而且减少了打开连接的潜在数量
管道化连接: 在HTTP2协议中，可以开启管道化连接，即单条连接的多路复用，每条连接中并发传输多个资源，这里就不需要添加域名来增加并发数了
4.优化资源加载
资源加载位置
资源加载时机: 异步script标签、模块按需加载、使用资源预加载preload和资源预读取prefetch、资源懒加载与资源预加载
5.减少重绘回流
避免使用层级较深的选择器，或其他一些复杂的选择器，以提高CSS渲染效率
避免使用CSS表达式
元素适当地定义高度或最小高度，否则元素的动态内容载入时，会出现页面元素的晃动或位置，造成回流
给图片设置尺寸。如果图片不设置尺寸，首次载入时，占据空间会从0到完全出现，上下左右都可能位移，发生回流
不要使用table布局
能够使用CSS实现的效果，尽量使用CSS而不使用JS实现
DOM优化：
1、缓存DOM
const div = document.getElementById('div')
由于查询DOM比较耗时，在同一个节点无需多次查询的情况下，可以缓存DOM
2、减少DOM深度及DOM数量
HTML 中标签元素越多，标签的层级越深，浏览器解析DOM并绘制到浏览器中所花的时间就越长，所以应尽可能保持 DOM 元素简洁和层级较少。
3、批量操作DOM
由于DOM操作比较耗时，且可能会造成回流，因此要避免频繁操作DOM，可以批量操作DOM，先用字符串拼接完毕，再用innerHTML更新DOM
4、批量操作CSS样式
通过切换class或者使用元素的style.csstext属性去批量操作元素样式
5、在内存中操作DOM
使用DocumentFragment对象，让DOM操作发生在内存中，而不是页面上
6、DOM元素离线更新
对DOM进行相关操作时，例、appendChild等都可以使用Document Fragment对象进行离线操作，带元素“组装”完成后再一次插入页面，或者使用display:none 对元素隐藏，在元素“消失”后进行相关操作
7、DOM读写分离
浏览器具有惰性渲染机制，连接多次修改DOM可能只触发浏览器的一次渲染。而如果修改DOM后，立即读取DOM。为了保证读取到正确的DOM值，会触发浏览器的一次渲染。因此，修改DOM的操作要与访问DOM分开进行
8、事件代理
事件代理是指将事件监听器注册在父级元素上，由于子元素的事件会通过事件冒泡的方式向上传播到父节点，因此，可以由父节点的监听函数统一处理多个子元素的事件
利用事件代理，可以减少内存使用，提高性能及降低代码复杂度
9、防抖和节流
使用函数节流（throttle）或函数去抖（debounce），限制某一个方法的频繁触发
10、及时清理环境
及时消除对象引用，清除定时器，清除事件监听器，创建最小作用域变量，可以及时回收内存
6.使用性能更好的API
使用requestAnimationFrame来替代setTimeout和setInterval
使用IntersectionObserver来实现图片可视区域的懒加载
使用web worker： Web Worker是HTML5提供的一个javascript多线程解决方案，可以将一些大计算量的代码交由web Worker运行，从而避免阻塞用户界面
7.构建优化（webpack优化）
【打包公共代码】
使用CommonsChunkPlugin插件，将公共模块拆出来，最终合成的文件能够在最开始的时候加载一次，便存到缓存中供后续使用。这会带来速度上的提升，因为浏览器会迅速将公共的代码从缓存中取出来，而不是每次访问一个新页面时，再去加载一个更大的文件
webpack 4 将移除 CommonsChunkPlugin, 取而代之的是两个新的配置项 optimization.splitChunks 和 optimization.runtimeChunk
通过设置 optimization.splitChunks.chunks: "all" 来启动默认的代码分割配置项
【动态导入和按需加载】
webpack提供了两种技术通过模块的内联函数调用来分离代码，优先选择的方式是，使用符合 ECMAScript 提案 的 import() 语法。第二种，则是使用 webpack 特定的 require.ensure
【剔除无用代码】
tree shaking 是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块系统中的静态结构特性，例如 import 和 export。这个术语和概念实际上是兴起于 ES2015 模块打包工具 rollup
JS的tree shaking主要通过uglifyjs插件来完成，CSS的tree shaking主要通过purify CSS来实现的
【长缓存优化】
1、将hash替换为chunkhash，这样当chunk不变时，缓存依然有效
2、使用Name而不是id
每个 module.id 会基于默认的解析顺序(resolve order)进行增量。也就是说，当解析顺序发生变化，ID 也会随之改变
下面来使用两个插件解决这个问题。第一个插件是 NamedModulesPlugin，将使用模块的路径，而不是数字标识符。虽然此插件有助于在开发过程中输出结果的可读性，然而执行时间会长一些。第二个选择是使用 HashedModuleIdsPlugin，推荐用于生产环境构建
【公用代码内联】
使用html-webpack-inline-chunk-plugin插件将mainfest.js内联到html文件中