网站优化加速的一些方法

HTML优化

---

避免内联式/嵌入式代码

你能够经过三种方式在HTML页面中引入CSS或Javascript代码.

1. 内联式: 在HTML标签的style属性中定义样式，在onclick这样的属性中定义Javascript代码.
2. 嵌入式: 在页面中使用style标签订义样式，使用script标签订义Javascript代码.
3. 引用外部文件: 在link标签中定义href属性引用CSS文件，在script标签中定义src属性引入Javascript文件.

尽管前两种方式减小了HTTP请求数，但是实际上却增长了HTML文档的体积。不过，当你的页面中的CSS或者Javascript代码足够少，反而是开启一个HTTP请求的花费要更大时，采用这两种方式倒是最有用的。所以，你须要测试评估这种方式是否真的提高了速度。同时也要考虑到你的页面的目标和它的受众：若是你指望人们只会访问它一次，例如对一些临时活动来讲，你决不会指望有回访客出现，那么使用内联式/嵌入式代码可以帮助减小HTTP请求数。第三种方式不只使你的代码更有序，并且使得浏览器可以缓存它。这种方式在大多数的状况下都是首选，特别是一些大文件和多页面的状况。

样式在上，脚本在下

当咱们把样式放在标签中时，浏览器在渲染页面时就能尽早的知道每一个标签的样式，咱们的用户就会感受这个页面加载的很快。可是若是咱们将样式放在页面的结尾，浏览器在渲染页面时就没法知道每一个标签的样式，直到CSS被下载执行后。
另外一方面，对于Javascript来讲，由于它在执行过程当中会阻塞页面的渲染，因此大多数状况下把它放在页面的结尾。

使用async

为了解释这个属性对于性能优化是多么有用，咱们应该先明白，当不使用它时会发生什么。
<script src="example.js"></script>
使用上面这种方式时，页面会在这个脚本文件被彻底下载、解析、执行完后才去渲染以后的HTML，在这以前会一直处于阻塞状态。这就意味着会增长你的页面的加载时间。有时这种行为是咱们但愿的，而大多数时候则不想要。
<script async src="example.js"></script>
使用上面这种方式时，脚本的加载是异步的，不会影响到这以后的页面解析。脚本会在下载完以后当即执行。须要注意的是，若是有多个使用这种方式异步加载的脚本，他们是没有特定的执行顺序的。

CSS优化

---

压缩样式表

为了保持代码的可读性，最好的方法是在代码中添加注释和使用缩进。

.center {
  width: 960px;
  margin: 0 auto;
}

/* --- Structure --- */

.intro {
  margin: 100px;
  position: relative;
}

可是对于浏览器来讲，这些都是不重要的。正由于如此，经过自动化工具压缩你的CSS是很是有用的。
.center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}
这样作可以减少文件的大小，从而获得更快的下载、解析和执行。
而对于使用预处理器例如 Sass, Less, and Stylus, 你能够经过配置缩小编译输出的CSS代码。

合并css文件

合并你的CSS文件。文件数量的减小就会带来请求数量的减小和更快的页面加载速度。

使用link而不是@import

有两种方式能够引入一个外部的样式表：经过 link 标签，或者经过 @import 指令 (使用在一个外部样式表中或者页面内嵌的 style 标签中)，当你在一个外部样式表中使用第二种方式时，浏览器没法经过并行下载的方式下载这个资源，这样就会致使其余资源的下载被阻塞。

JAVASCRIPT优化

---

异步加载第三方内容

为了不这些在页面加载时成为问题，或者阻塞了所有页面的加载，应该异步加载这些代码

var script = document.createElement('script'),
    scripts = document.getElementsByTagName('script')[0];
script.async = true;
script.src = url;
scripts.parentNode.insertBefore(script, scripts);

不过这是老办法了。

避免使用document.write

最小化重绘和回流

当有任何属性或元素发生改变时，都会引发DOM元素的重绘和回流。
当一个元素的布局不变，外观发生改变时，就会引发重绘。Nicole Sullivan描述这个就像是样式的改变，例如改变background-color。
回流的代价是最高的，当改变一个页面的布局时就会发生回流，例如改变一个元素的宽。
毫无疑问，应当避免过多的重绘和回流，因此，对于下面的代码：

var div = document.getElementById("to-measure"),
    lis = document.getElementsByTagName('li'),
    i, len;

for (i = 0, len = lis.length; i < len; i++) {
  lis[i].style.width = div.offsetWidth + 'px';
}

应当变为：

var div = document.getElementById("to-measure"),
    lis = document.getElementsByTagName('li'),
    widthToSet = div.offsetWidth,
    i, len;

for (i = 0, len = lis.length; i < len; i++) {
  lis[i].style.width = widthToSet + 'px';
}

当你设置style.width时，浏览器须要从新计算布局。一般，浏览器暂时是不须要知道改变了元素的样式的，直到它须要更新屏幕时，正由于如此，改变多个元素的样式只会产生一次回流。然而，在第一个例子中，咱们每次请求offsetWidth时，都会使浏览器从新计算布局。
若是须要获得页面中的布局数据，那么请参照第二个例子，将这些操做放在任何会改变布局的设置前.。

避免没必要要的dom操做

当你得到DOM而又什么都不作时，这简直就是在杀死宝贵的生命。
说真的，浏览器遍历DOM元素的代价是昂贵的。虽然Javascript引擎变得愈来愈强大，愈来愈快速，可是仍是应该最大化的优化查询DOM树的操做。
最简单的替代方案就是，当一个元素会出现屡次时，将它保存在一个变量中，这样的话你就不必每次都去查询DOM树了。

// really bad!
for (var i = 0; i < 100; i++) {
  document.getElementById("myList").innerHTML += "<span>" + i + "</span>";
}

// much better :)
var myList = "";

for (var i = 0; i < 100; i++) {
  myList += "<span>" + i + "</span>";
}

document.getElementById("myList").innerHTML = myList;

// much *much* better :)
var myListHTML = document.getElementById("myList").innerHTML;

for (var i = 0; i < 100; i++) {
  myListHTML += "<span>" + i + "</span>";
}

压缩你的脚本

和CSS同样，为了保持代码的可读性，最好的方法是在代码中添加注释和使用缩进：

BrowserDiet.app = function() {
  var foo = true;
  return {
    bar: function() {
      // do something
    }
  };

};

可是对于浏览器来讲，这些都是不重要的。正由于如此，请记住用自动化工具压缩你的Javascript代码。
BrowserDiet.app=function(){var a=!0;return{bar:function(){}}}
这样作可以减少文件的大小，从而获得更快的下载、解析和执行。

将多个js文件合并

对于脚本的组织和维护，另外一个好方法是将他们模块化。

<script src="navbar.js"></script>
<script src="component.js"></script>
<script src="page.js"></script>
<script src="framework.js"></script>
<script src="plugin.js"></script>

然而，这样每一个文件就是一个HTTP请求（咱们都知道，浏览器的并行下载数是有限的）
<script src="main.js"></script>
合并你的JS文件，文件数量的减小就会带来请求数量的减小和更快的页面加载速度。
想要一箭双鵰？经过构建工具自动化这个过程吧。

图片

---

使用css-sprites

这个技术就是将各类图片整合到一个文件中去，俗称雪碧图，而后经过CSS去定位它们。
在使用sprite时，应当避免在每一个图片之间的空隙过大。这个虽然不会影响到文件的大小，可是会影响到内存的消耗。

Data-URI

这种技术是CSS Sprites的替代方法。是指使用图片的数据代替一般使用的图片URI，在下面的例子中，咱们就使用它减小了HTTP请求数。
使用前:

.icon-foo {
  background-image: url('foo.png');
}

使用后:

.icon-foo {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII%3D');
}

全部的现代浏览器和IE8及以上版本的IE都支持这个方法，图片须要使用base64方法编码。
这种技术和CSS Sprites技术都是可使用构建工具获得的。使用构建工具的好处是不用手工去进行图片的拼合替换，在开发时使用单独的文件就能够。
然而坏处是，随着你的HTML/CSS文件的增大增多，你必须考虑你可能会有一个很是大的图片。若是你在HTTP请求中没有使用gzip技术压缩你的HTML/CSS，那么咱们不推荐使用这种方法，由于减小HTTP请求数获得的大文件对于速度来讲可能带来相反的结果。

不要在 标签中调整图像

老是在img标签中设置width和height属性。这样能够防止渲染过程当中的重绘和回流。
<img width="100" height="100" src="logo.jpg" alt="Logo">
知道这个以后，一个开发者将一个700x700px的图像设置为50x50px来显示。
可是这个开发者不知道的是，大量的没有用的数据也发送到了客户端。
因此请记住：你能够在标签中定义一个图片的寬高，但不意味着你应该经过这么作来(等比)缩放大图。

优化图片

图片文件中包含许多对于Web来讲没有用的东西。举例来讲，一个JPEG图片中可能包含一些Exif元数据（数据，相机型号，坐标等等）。一个PNG图片会包含有关颜色，元数据的信息，有时甚至还包含一个缩略图。这些只会增长文件的大小，而对于浏览器来讲却毫无用处。
有不少工具可以帮你从图片中去除这些信息，而且不会下降图片的质量。咱们把这个称作无损压缩。
另外一种优化图片的方式是，以图片质量为代价进行压缩。咱们称之为有损压缩。举例来讲，当你导出一个JPEG图片时，你能够选择导出的图片质量（从0到100）。考虑到性能，老是选择可接受范围内的最低值。在PNG图片中，另外一个常见的有损技术是减小颜色数量，或者将PNG-24格式转换为PNG-8格式。
为了提高用户的体验，你还应该将你的JPEG文件转换为渐进式的。如今大多数的浏览器都支持渐进式JPEG文件，而且这种格式的文件建立简单，没有明显的性能损失问题。页面中的这种格式的图片可以更快的展示。

其余

---

合理设置 HTTP缓存

缓存的力量是强大的，恰当的缓存设置能够大大的减小 HTTP请求。以有啊首页为例，当浏览器没有缓存的时候访问一共会发出 78个请求，共 600多 K数据 (如图 1.1)，而当第二次访问即浏览器已缓存以后访问则仅有 10个请求，共 20多 K数据 (如图 1.2)。 (这里须要说明的是，若是直接 F5刷新页面的话效果是不同的，这种状况下请求数仍是同样，不过被缓存资源的请求服务器是 304响应，只有 Header没有Body ，能够节省带宽 )　　怎样才算合理设置 ?原则很简单，能缓存越多越好，能缓存越久越好。例如，不多变化的图片资源能够直接经过 HTTP Header中的Expires设置一个很长的过时头 ;变化不频繁而又可能会变的资源可使用 Last-Modifed来作请求验证。尽量的让资源可以在缓存中待得更久。

---

总结

以上就是网站优化的一些技巧，主要参考点击这里