文本内容、图片内容的优化都是基于自身大小的，但有一个更根底的计划能够施行，就是缩小这些资源的下载频率。

缩小资源个数，就能够缩小HTTP申请个数。

合并文本资源

每个文件都须要发动一个HTTP申请，每个申请会耗费肯定的工夫，合并这些文件就能晋升页面的加载速度。

CSS比拟非凡，是层叠款式，同一个选择器不会报错和抛出异样，而是能失常运行，后者笼罩前者。但有时候这个会跟咱们预期不统一，所以倡议给一些特地的款式加特定的类名。如下：

h2 { font-size: 1em; color: #000080; } /* master stylesheet */ h2 { font-size: 2em; color: #ff0000; } /* Marketing stylesheet（防止应用） */ section.product h2 { font-size: 2em; color: #ff0000; } /* Marketing stylesheet（举荐） */

合并文本资源对于缩小HTTP申请数很无效，不过这样做的时候也要小心，前面会介绍一些注意事项。

合并图片资源

图片和文本一样，也能够通过合并的形式来缩小HTTP申请数。

尽管这个办法能够实用于任意图片，但咱们最罕用的还是合并小图标，为这些小图标发动多个HTTP申请切实是一种节约。

咱们能够用CSS的background-position属性来展现相应的图片——俗称"精灵图"。CSS重定位十分疾速、无缝，不必放心抖动问题。

你可能会有一系列的社交网站图标，比起下载3个独自的图片，合并成一张图片会更适合，如下：

以下是CSS的示例：

a.facebook {  display: inline-block;  width: 64px;  height: 64px;  background-image: url("socialmediaicons.png");  background-position: 0px 0px;}a.twitter {  display: inline-block;  width: 64px;  height: 64px;  background-image: url("socialmediaicons.png");  background-position: -64px 0px;}a.pinterest {  display: inline-block;  width: 64px;  height: 64px;  background-image: url("socialmediaicons.png");  background-position: -128px 0px;}

"facebook"的类里的"background-position"属性实际上是能够省略的，但此处为了放弃一致性，所以保留。

注意事项

  • 下面提到的合并文本和图片资源，在HTTP/2协定下，可能成果没有预期的那样，因为HTTP/2的申请更快，如果想理解更具体的，能够参考 https://developers.google.com...
  • 如果合并的资源外面蕴含一个频繁改变的动静资源，比方node_modules打包成的vendor.js，如果蕴含了一个首页的js文件，而首页改变频繁，会导致缓存生效，每次都要从新下载一遍整个vendor.js

JavaScript的地位和内联脚本（Inline Push）

咱们假如所有的CSS和JavaScript资源都是存在于独自的文件，这也是最优的做法。脚本的加载是个微小简单的流程，详情能够参考这篇文章 Deep Dive Into the Murky Waters of Script Loading。有以下两个点值得注意：

脚本的地位

  • 尽可能地把脚本放在body的完结标签上方，比起放head标签，这样不会阻塞页面渲染。
  • 如果脚本须要操纵初始dom，或者在渲染期间提供一些函数，这类脚本能够独自放在head标签内引入，常见的有：window.onerror的事件绑定、反爬虫、性能监控等
  • 最高效的资源加载程序，也被称为要害渲染门路（Critical Rendering Path），详情能够参考：Bits of Code。

代码的地位

  • 尽可能的防止将一个JavaScript拆成2个文件，最好的做法是把这部分拆分的代码间接内嵌在HTML文件中，成为内联脚本（Inline Push）.
  • 当你想在渲染的时候展现一些已有的数据（例如：工夫等），能够通过内联脚本，这样不必期待整个页面加载完就能显示进去。

  • 内联脚本次要是解决两个问题：

    • 为了加载一小段代码，而发动一个HTTP申请的节约
    • 让一些代码在渲染初期就能执行
<h1>Our Site</h1> <h2 id="greethead">, and welcome to Our Site!</h2> <script>//insert time of day greeting from computer timevar hr = new Date().getHours();var greeting = "Good morning";if (hr > 11) {    greeting = "Good afternoon";}if (hr > 17) {    greeting = "Good evening";}h2 = document.getElementById("greethead");h2.innerHTML = greeting + h2.innerHTML;</script> <p>Blah blah blah</p>

总结

本文次要介绍了升高HTTP申请次数的一些办法，思考了文本和图片两种资源。缩小与服务器的交互次数，能够帮咱们节省时间，减速页面的加载，让用户能够更快的看到内容。

参考

https://developers.google.com...