这是我参与「第五届青训营 」伴学笔记创作活动的第 13 天。
前端优化的解决方案是每个前端人必须要掌握的知识点，结合本次青训营的学习内容，我将其总结如下:
一、 css的优化
1、避免使用@import。 使用@import相当于将引入的css放在了页面底部，因为使用@import引用的文件只有在引用它的那个css文件被下载、解析之后，浏览器才会知道还有另外一个css需要下载，这时才去下载，然后下载后开始解析、构建render tree等一系列操作。因此使用@import会拖慢渲染的过程。
2、将样式表放在head中。 如果放在body中，可能出现在浏览器下载好css样式表之前，组件就已经加载好了的情况，这可能会导致重新渲染。
3、避免使用css表达式。 如：expression((new Date()).getHours()%2 ? “#B8D4FF” : “#F08A00” ); 解析表达式和计算都需要时间。
二、JavaScript的优化
1、尽量减少DOM访问。
2、使用事件代理（减少DOM操作）。
3、把脚本放在底部（加载脚本时会阻塞页面渲染）。
4、合理使用节流函数和防抖函数。 使用CDN优化加载速度 CDN即内容分发网络。它依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。
5、懒加载数据。 首先根据标签的left和top属性判断是否显示在了屏幕中（如果显示在屏幕中，其left和top属性值应该是在0到窗口长宽之间）。 如果显示在屏幕中，则将src标签的内容替换为图片的url。
三、 针对webpack打包优化
针对webpack打包优化主要是减少打包后的代码体积，主要的措施有：
1、进行tree-shaking
2、使用UglifyJS等插件压缩代码
3、分割代码、按需加载 我们可以使用webpack-bundle-analyzer这个插件来查看每部分代码的加载耗时，进而分析可以优化的地方。
