从渲染角度

css

1. css放在head里面，边加载变成成css树
2. 尽量避免css层级过多，因为生成css树很复杂很耗时
3. 对于不是首屏需要的css可以采用懒加载的方式，prefectch配合as一起使用
4. css选择器是从右到左的，所以避免使用标签属性之类的
5. 避免使用昂贵的属性，比如calc计算属性之类的
6. 注意重绘和回流属性的正确的使用，比如获取宽高，改变字体，改变布局就会引起回流。像改变背景颜色之类的只会引起重绘
7. 使用transform和opacity来实现动画

js

1. 对于重复性的操作使用节流和防抖控制次数
2. 使用事件代理取代大量的事件绑定
3. 对于dom操作比较频繁的，使用Fragment减少操作次数
4. 把脚本放在底部，如果js放头部的，可以加defer来实现延迟加载js
5. defer,无阻塞加载Js文件，但是是等dom渲染完只会执行加载的Js
6. async，无阻塞加载Js文件，加载完之后立马执行

7. 当图片比较多的时候采用懒加载的方式加载图片

   从请求角度

8. 使用CDN加载静态资源

9. 划分内容到不同的域名
10. 添加cache-control和etag等相应头
11. 启动gzip
12. 文件合并打包，减少Http请求数量
13. 压缩请求内容的大小，一般压缩js/css/html

14. 图片懒加载，给图片添加个data-src存放真是的src，当图片可见的时候在把data-src赋值到src真正发送图片加载请求

    从打包角度

15. webpack按需加载

    1. 结合根据内容生成文件名，在output文件名后面加上contenthash,然后import实现按需加载
16. 提取第三方库
    1. splitChunk
17. 减少ES6转换为ES5的冗余代码
18. 抽取公共模块
19. tree-shaking