http优化2

最后更新于:2022-04-02 05:28:13

## 前言 基于第一篇教程相信你已经对http优化可以从哪些方面入手有了一定的了解,通过该系列的第二篇教程,你可以通过项目实战来一步步的优化你的项目,并且看到优化成果。 ## audits(审计)视图 从http图我们能够分析出哪些资源的加载情况以及整体耗时,但可能你还是无从下手。这里推荐给大家一种开发者自带的审计小工具,可以为你提供初步的建议。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/71d003018d0772b71afe195f7377545e_609x428.png) ## 网络通讯审计 ### 合并脚本 * 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处理,避免无用样式。
';