一、减少文件数量，减少HTTP请求
图片个数：
可以采用“图片精灵”。把图片，尤其是雷打不动的图标，整合在一张图上。利用CSS背景背景的方式把各自的图标添加到对应的标签中。就像这样：
应用：
<span class="icon icon-weixin"></span>.icon{
background:url( 图片地址.png ) no-repeat ;
height:30px;
width:30px;
display:inline-block;
}
.icon-weixin{
background-position: -30px 0px;
}要展示多个图片，就控制CSS图片背景的位置就可以了。
CSS文件个数
可以利用SCSS预处理工具，对CSS代码进行整合压缩。其官网 https://www.sass.hk/guide/
注意：原来它叫 SASS，后改名为 SCSS了。
JS文件：
零碎的基础代码，可以写在一个文件中。一般不同功能模块的JS，还是建议分开写。
二、公用基础文件使用CDN
一些公用文件，比如jQuery, Vue 等，能用CDN的，就使用CDN，可以提高文件加载效率。
一般，我建议在开发过程中，使用本地的文件，上线的头一天，再改为CDN。
CDN简单理解，就是文件用网络的。
如：
这个是CDN文件，
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
这个是本地文件
<script src="js/jquery.min.js"></script>好用的CDN推荐：https://www.bootcdn.cn/
三、减少图片文件大小
使用 tinypng.com 或者 智图，对比较大的图片文件进行压缩。
四、对图片进行懒加载；对内容进行AJAX按需加载。
图片懒加载，可以使用 jquery的 lazyload插件。
AJAX按需加载，这个话题就长了，就不说明了。
五、将样式表放在头部，将脚本放在底部
虽然很多网站把JS放在头部的，但是真心不推荐。毕竟网站是内容优先。
六、利用 <html> manifest ，缓存重要文件。
利用 HTML5 的 manifest ，缓存重要文件，或者雷打不通的，不会怎么变化的文件，尤其是图片。比如，图标文件，公用样式文件等等。提高第二次加载页面的效率。
350
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
