页面加载性能之HTTP请求

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

缩小资源个数，就能够缩小 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 time
var 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…