性能优化

减少请求数量
【合并】：公共库合并、不同页面单独合并
【图片处理】：雪碧图、Base64、使用字体图标来代替图片
【减少重定向】：使用重定向会延迟整个HTML文档的传输
【使用缓存】：使用cach-control或expires
【不使用css@import】：会造成额外的请求
【避免使用空的src和href】：a标签设置空的href，会重定向到当前页面地址、from设置空的method，会提交表单到当前的页面地址
减少资源大小
【压缩】：HTML、css、js、图片
【webp】：有更优的图像数据压缩算法，能带来更小的图片体积。
【开启gzip】：用于改进web应用程序性能的技术
优化网络连接
【使用CDN】:使用户就近取得所需内容，解决Internet网络拥挤的状况，提高用户访问网站的响应速度
【使用DNS预解析】:根据浏览器定义的规则，提前解析之后可能会用到的域名，使解析结果缓存到系统缓存中，缩短DNS解析时间，来提高网站的访问速度。
【并行连接】:使用多个域名，可以增加并发数
【持久连接】:keep-alive、presistent
【管道化连接】：单条连接的多路复用
优化资源加载
【资源加载位置】：css放在head中，js放在body底部，body中间尽量不写style和script、处理页面和处理页面布局的js文件放在head中
【资源加载时机】：异步script标签（defer，async）、按需加载、使用资源预加载preload和资源预读取prefetch、资源懒加载和资源预加载
减少重绘回流
【样式设置】：不用table布局、给图片设置尺寸、避免使用css表达式、避免使用层级较深的选择器、尽量使用css实现效果
【渲染层】：设置定位，对一些进行动画的元素，使用硬件渲染
【DOM优化】：缓存DOM，减少DOM深度以及DOM数量、批量操作DOM、批量操作css样式、在内存中操作DOM、DOM元素离线更新、DOM读写分离、事件代理、防抖与节流、及时清理环境
性能更好的API
用对选择器、使用requestAnimationFrame替代setTimeout和setInterval、使用IntersectionObserver来实现图片可视区域的懒加载、使用web worker
webpack优化
【打包公共代码】：将公告模块拆出来，最终合成的文件能够在最开始的时候加载一次
【动态导入和按需加载】：通过模块的内联函数调用来分离代码
【删除无用代码】：把一些没有用的代码删了就行了
【长缓存优化】：hash替换为chunkhash，当chunk不变时候，缓存依然有效、使用Name而不是id、
【公共代码内联】：使用html-webpack-inline-chunk-plugin插件将mainfest.js内联到html文件中