前端优化

前端性能优化

1、HTTP请求过程讲解

1. 域名解析

2. 开启TCP链接【耗时长】

3. 发送请求

4. 等待（网络延迟、服务器处理时间）【耗时长】

5. 下载资源

2、减少HTTP请求

1. 合并JS

2. 合并CSS

   工具YUI Compressor

3. 雪碧图

4. 静态资源加缓存头

   Expires

   Cache-Control:max-age=

   Last-Modifed

   ETag

5. 缓存过期策略控制：使用工具根据SVN版本号生成文件

3、减少请求的数据量

1. JS、CSS、HTML压缩

2. GZIP：不要对图片启用GZIP

3. cookie

4. 图片压缩

   YUI图片压缩工具、Chrome开发工具压缩

5. 204状态：没content-length

6. 图片懒加载。【lazyload插件】

7. 路由懒加载。【Vue】

8. webpack

9. 模块的异步加载

4、JS加载与解析

1. JS阻塞加载特性

   JS放在页面底部，防止阻塞后面的资源下载

2. JS延迟加载：

   defer：指出该脚本在页面最后才开始加载

   async：表示并行加载，不影响当前页面的ready

   Ajax异步加载脚本，加载后eval

3. 使用cdn

5、大量图片加载

1. 多域名下载图片，突破并发限制