http优化2

## 前言 基于第一篇教程相信你已经对http优化可以从哪些方面入手有了一定的了解，通过该系列的第二篇教程，你可以通过项目实战来一步步的优化你的项目，并且看到优化成果。 ## audits（审计）视图 从http图我们能够分析出哪些资源的加载情况以及整体耗时，但可能你还是无从下手。这里推荐给大家一种开发者自带的审计小工具，可以为你提供初步的建议。  ## 网络通讯审计 ### 合并脚本 * Combine external JavaScript（12） > 要求你吧引入外联的脚本文件进行合并，同时来自于不同域名的进行合并，尽量放到同一域名。如果其他域名是cdn的，忽略这条合并域名的建议。 * gulp-concat 构建合并脚本，也可以合并样式 * 实践 ### 文档压缩 * Enable gzip compression (11) > 要求你压缩文件，比如可以用gzip压缩，可以达到的效果：compressing the following resources with gzip could reduce their transfer size by about two thirds (~101 KB):下面列举的是每个文件压缩之后可能效果。 * gulp-htmlmin,gulp-minify-css,gulp-uglify,gulp-imagemin 为你提供了方案 * 实践 ### 增强文档的有效期 * leverage browser caching (30) > 一般会按照情况指明当前资源所处的情况，是未设置有效期，还是有效期过短，还是不可缓存。The following resources are missing a cache expiration. Resources that do not specify an expiration may not be cached by browsers：没有设置合适的有效期；The following cacheable resources have a short freshness lifetime:有效期过短；The following resources are explicitly non-cacheable. Consider making them cacheable if possible:不可缓存文件 * http-status 304 not modified * server cache-control 以及page cache-control ### 指明图片资源的大小 * Specify image dimensions (6) > 没有指明图片大小的，浏览器需要加载图片，获取原图片大小，然后重构页面给适当的显示空间，耗时耗能。如果有了具体的宽高，只要按照代码设置宽高即可；如果设置了宽度，那有了宽高比也可以得到适当的缩放，至少宽度上可以得到正确的展现。 * 根据数据不同，限制图片显示； * lazyload()插件 * 实践 ## web page performance ### 合适的加载顺序 * Optimize the order of styles and scripts (2) > 1. The following external CSS files were included after an external JavaScript file in the document head. To ensure CSS files are downloaded in page(建议你把脚本文件放在样式文件之后,保证页面被正确的加载) > 2. 1 inline script block was found in the head between an external CSS file and another resource. To allow parallel downloading, move the inline(如果允许并行下载，请把这段脚本移动到内联) * 无用的脚本写到css之后 * 实践 ### 移除无用的样式规则 * Remove unused CSS rules (1323) > 1323 rules (77%) of CSS not used by the current page(会帮你具体分析哪个文件有多少样式是没被使用到的，能够最大程度的反应你的代码冗余程度)。 * 通过less做项目分析，简单页面做单独的layout处理，避免无用样式。