网站优化加速的一些方法

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 指令 (使用在一个外部样式表中或者页面内嵌的 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来做请求验证。尽可能的让资源能够在缓存中待得更久。

总结

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

原文链接：https://www.cnblogs.com/dxzg/p/7059979.html