# 性能优化总结
# 性能优化常用建议
减少 Http 请求
使用 Http2， 优点就是 Http2 的优点
使用服务端渲染,优点是首屏渲染快，SEO好，缺点是需要服务端配合，并且消耗大量资源
静态资源使用 CDN，优点就是 CDN 的优势
将 CSS 放在文件头部，JavaScript 文件放在底部。原因是如果
head标签放入大量的JS和CSS会照成堵塞渲染，如果这些文件需要解析很长时间，页面就白屏了。CSS放置于头部是为了第一时间加载出样式，另外JS文件也可以放置于头部，但是需要加上 defer 属性，异步下载。使用字体图标 iconfont 代替图片图标，优点是文件小，不失真，还可以设置样式
善用缓存，不重复加载相同的资源，具体做法: 1.发送请求时添加
Expires(这段时间之前不请求，只用缓存) 或max-age(相对时间) 这一行，避免用户每次都得请求文件。2. 当文件更新怎么办，具体做法是更新页面引用的资源地址，让浏览器主动放弃缓存，加载新资源，然后这里就让资源文件的修改和文件内容进行关联了，这里建议使用数据摘要算法压缩文件，nginx开启
gzip，webpack使用JavaScript：UglifyPlugin，CSS ：MiniCssExtractPlugin，HTML：HtmlWebpackPlugin 插件进行压缩图片优化 https://juejin.cn/post/6892994632968306702#heading-16 (opens new window)
通过 webpack 按需加载代码，提取第三库代码，减少 ES6 转为 ES5 的冗余代码 https://juejin.cn/post/6892994632968306702#heading-23 (opens new window)
减少重绘重排 https://juejin.cn/post/6892994632968306702#heading-27 (opens new window)
使用事件委托 事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。所有用到按钮的事件（多数鼠标事件和键盘事件）都适合采用事件委托技术， 使用事件委托可以节省内存。
使用 flexbox 而不是较早的布局模型
使用 transform 和 opacity 属性更改来实现动画