前端优化解决方案

我们的优化原则有以下几个：

• 能缓存的，尽量强缓存。
• 引入外部资源时不要出现超时、404的状况。
• 减少HTTP请求数。
• 合理设置cookie的大小以及过期时间。
• 合理利用懒加载

网页内容的优化

1. 懒加载数据
   首先根据标签的left和top属性判断是否显示在了屏幕中（如果显示在屏幕中，其left和top属性值应该是在0到窗口长宽之间）。 如果显示在屏幕中，则将src标签的内容替换为图片的url。
2. 使用外部引入的css和js文件，并且引入的css和js越少越好（HTTP2.0不适用）。 这里可以使用webpack打包这些文件，也可以使用强缓存与协商缓存来缓存这些文件。
3. 不要在Css中缩放图片。
   img计算缩放也需要时间
4. 避免重定向。
   重定向会重新渲染网页。
5. 尽量不要用iframe。
   因为iframe会阻塞渲染。
6. 使用base64编码将图片嵌入到样式表中，减少请求数（由于base64会比一般的图片大一点，只适用于那些体积比较小但是很常用的图片）。
7. 使用雪碧图（精灵图）： 通过使用background-position：-xpx -ypx;来调整图片的位置，不过HTTP2不适用，原因为HTTP2实际上是多路复用的，只用一个TCP连接，所以多个图片的请求也是在同一个TCP连接里，这样能省下非常多的请求时间，但坏处就是单连接开销很大，如果要传多个大文件，就很麻烦。
8. 要有网站小图标favicon.ico。 如果没有小图标，会引起404，拖慢网页加载进度。
9. 能使用jpeg就不要用png，能使用png8就不要用png24。 （1）色彩丰富的、大的图片切成jpg的；
   （2）尺寸小的，色彩不丰富的和背景透明的切成gif或者png8的；
   （3）半透明的切成png24。
10. 10、使用canvas压缩图片。

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即内容分发网络。它依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。

针对webpack打包优化

针对webpack打包优化主要是减少打包后的代码体积，主要的措施有：

1. 进行tree-shaking
2. 使用UglifyJS等插件压缩代码
3. 分割代码、按需加载

我们可以使用webpack-bundle-analyzer这个插件来查看每部分代码的加载耗时，进而分析可以优化的地方