Web页面优化

Web页面优化

HTML页面加载和解析流程

1. 用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件。
2. 浏览器开始载入html代码，发现<head>标签内有一个<link>标签引用外部CSS文件。 
3. 浏览器又发出CSS文件的请求，服务器返回这个CSS文件。 
4. 浏览器继续载入html中<body>部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了。 
5. 浏览器在代码中发现一个<img>标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码。 
6. 服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码。 
7. 浏览器发现了一个包含一行Javascript代码的<script>标签，赶快运行它。
8. Javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个<style>（style.display=”none”）杯具啊，突然就少了这么一个元素，浏览器不得不重新渲染这部分代码。 
9. 终于等到了</html>的到来，浏览器泪流满面…… 
10. 等等，还没完，用户点了一下界面中的“换肤”按钮，Javascript让浏览器换了一下＜link＞标签的CSS路径。 
11. 浏览器召集了在座的各位<div><span><ul><li>们，“大伙儿收拾收拾行李，咱得重新来过……”，浏览器向服务器请求了新的CSS文件，重新渲染页面。

JS的加载

1. 不能并行下载和解析（阻塞下载）。

2. 当引用了JS的时候，浏览器发送1个js request就会一直等待该request的返回。因为浏览器需要1个稳定的DOM树结构，而JS中很有可能有 代码直接改变了DOM树结构，比如使用 document.write 或 appendChild,甚至是直接使用的location.href进行跳转，浏览器为了防止出现JS修 改DOM树，需要重新构建DOM树的情况，所以 就会阻塞其他的下载和呈现.

加快HTML页面加载速度

1. 页面减肥：

   a. 页面的肥瘦是影响加载速度最重要的因素。–精简代码

   b. 删除不必要的空格、注释。–去除无用

   c. 将inline的script和css移到外部文件。–外部引用

   d. 可以使用HTML Tidy来给HTML减肥，还可以使用一些压缩工具来给JavaScript减肥。(用插件使代码规范,压缩)

2. 减少文件数量：

   a. 减少页面上引用的文件数量可以减少HTTP连接数。

   b. 许多JavaScript、CSS文件可以合并最好合并

   c.去掉不必要的插件,每个插件都需要服务器处理，从而增加了页面加载时间.有些插件是必须的，如社交分享插件，你可以选择CMS内置的(系统自带)社交分享功能来代替安装插件。

3. 减少域名查询：

   a. DNS查询和解析域名也是消耗时间的(一般一次解析需要20～120毫秒,浏览器在DNS查询完成前不会下载任何东西)，所以要减少对外部JavaScript、CSS、图片等资源的引用，不同域名的使用越少越好。

4. 缓存重用数据：

   a. 对重复使用的数据进行缓存。

5. 优化页面元素加载顺序：

   a. 首先加载页面最初显示的内容和与之相关的JavaScript和CSS，然后加载HTML相关的东西，像什么不是最初显示相关的图片、flash、视频等很肥的资源就最后加载。

6. 减少inline JavaScript的数量：

   a. 浏览器parser会假设inline JavaScript会改变页面结构，所以使用inline JavaScript开销较大。

   b. 不要使用document.write()这种输出内容的方法，使用现代W3C DOM方法来为现代浏览器处理页面内容。

7. 使用现代CSS和合法的标签：

   a. 使用现代CSS来减少标签和图像，例如使用现代CSS+文字完全可以替代一些只有文字的图片。

   b. 使用合法的标签避免浏览器解析HTML时做“error correction”等操作，

8. Chunk your content：

   a. 不要使用嵌套table，而使用非嵌套table或者div。将基于大块嵌套的table的layout分解成多个小table，这样就不需要等到整个页面（或大table）内容全部加载完才显示。

9. 指定图像和table的大小：

   a. 如果浏览器可以立即决定图像或table的大小，那么它就可以马上显示页面而不要重新做一些布局安排的工作。

img-wrap{//图片外层样式设死
    position:relative;
    width:100%;
    height:0;
    padding-top:100%;//W3C标准 给padding值设置100%时,是根据 width值进行计算的,这样保证外层十个宽高相等的容器
}
img{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

b. 这不仅加快了页面的显示，也预防了页面完成加载后布局的一些不当的改变。

c. image使用height和width。

c1. 指定宽度和高度可以消除不必要的reflows和重新绘制页面【repaints】，使页面渲染速度更快。

c2. 不要使用非图片原始尺寸来缩放图片。如果一个图片文件实际上的大小是60×60像素，不要在HTML或CSS里设置尺寸为30×30像素。如果图片需要较小的尺寸，在图像编辑软件中，设置成相一致的尺寸。

c3. 一定要指定图片或它的块级父元素的尺寸一定要设置<img>元素本身，或它的块级父元素的尺寸。如果父元素不是块级元素，尺寸将被忽略。不要在一个非最近父元素的祖先元素上设置尺寸。

c4. 多图像的网站加载时间比较久。其中一个解决方法就是把多个图像整合到少数几个输出文件中。你可以使用 CSS Sprites 来整合图像文件。这样就减少了在下载其他资源时的往返次数和延迟，从而提高了站点的速度。

10.利用浏览器缓存

　　浏览器缓存是允许访客的浏览器缓存你网站页面副本的一个功能。这有助于访客再次访问时，直接从缓存中读取内容而不必重新加载。这节省了向服务器发送HTTP请求的时间。此外，通过优化您的网站的缓存系统往往也会降低您的网站的带宽和托管费用。

11.使用内容分发网络（Content Delivery Network CDN）

　　服务器处理大流量是很困难的，这最终会导致页面加载速度变慢。而使用CDN就可以解决这一问题，提升页面加载速度。
(CDN是位于全球不同地方的高性能网络服务，复制你网站的静态资源，并以最有效的方式来为访客服务。)

12.启用GZIP压缩

　　a. 在服务器上压缩网站的页面是提升网站访问速度非常有效的一种方法。你可以用gzip压缩做到这一点。Gzip是一个减小发送给访客的HTML文件、JS和CSS体积的工具。压缩的文件减少了HTTP响应时间。据Yahoo报道，这大概可以减少70%的下载时间。而目前90%的通过浏览器的流量都支持Gzip压缩，因此，这是一个提示网站性能有效的选项。

13.使用预先获取

预先获取可以在真正需要之前通过取得必需的资源和相关数据来改善访问用户的浏览体验，主要有3类预先获取:

a. 链接预先获取

b. DNS 预先获取

c. 预先渲染

在你离开当前 web 页面之前，使用预先获取方式，对应每个链接的 URL 地址，CSS，图片和脚本都会被预先获取。这保证了访问者能在最短时间内使用链接在画面间切换。

链接属性上增加 rel=”prefetch”,rel=”dns-prefetch”，或者 rel=”prerender” 标记。

14.使用轻量级框架

是几项可以加快读取的轻量级框架：

Pure

Skeleton

Milligram

15.用CSS开启硬件加速来提高网站性能

CSS animations, transforms 以及 transitions 不会自动开启GPU加速，而是由浏览器的缓慢的软件渲染引擎来执行.

现在，像Chrome, FireFox, Safari, IE9+和最新版本的Opera都支持硬件加速，当它们检测到页面中某个DOM元素应用了某些CSS规则时就会开启，最显著的特征的元素的3D变换,还有

transform: translateZ(0)

backface-visibility: hidden;