网页性能之HTML,CSS,JavaScript

时间  2019-12-02
标签 网页 性能 html css javascript 栏目 HTML 繁體版
原文   原文链接

转载自AlloyTeam：http://www.alloyteam.com/2015/05/wang-ye-xing-neng-zhi-html-css-javascript/javascript

前言css

html css javascript能够算是前端必须掌握的东西了，可是咱们的浏览器是怎样解析这些东西的呢 咱们如何处理html css javascript这些东西来让咱们的网页更加合理，在我这里作了一些实验，总结起来给你们看看。html

 

最简单的页面前端

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
  </head>
  <body>
    <img src="download-button.png">
  </body>
</html>

咱们打开chrome的控制台查看timelinehtml5

1

由上图 可得结论java

1 图中蓝色透明条标识浏览器从发起请求到接收到服务器返回第一个字节的时间，时间仍是挺长的，而蓝色实体条则为真正的html页面下载的时间 仍是很短的。node

 

2 图中红框内的这部分时间则表示浏览器从下载完成html以后开始构建dom，当发现一个image标签时所花费的时间，因而可知dom是顺序执行的，当发现image时便当即发起请求，而紫色透明条则是image发起请求时在网络传输时所消耗的时间。chrome

 

3 图中timeline蓝色竖线所处的时间为domComplete时间，红色竖线为dom的onload时间，因而可知两种事件的差别。而浏览器构建dom树所花费的时间能够算出即domComplete时间 减去 html下载完成后的时间大概80ms。sublime-text

含有css的页面浏览器

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen">
  </head>
  <body>
    <img src="download-button.png">
  </body>
</html>

咱们打开chrome的控制台查看timeline

2

1 在添加了外部引入css以后，并无发现什么异常，可是有一点指的注意，也就是红色竖线和蓝色竖线挨得更进了，这代表domComplete时间必须等待css解析完成，也就是构建dom树必须等待css解析完成，这也就解释了下图

3

含有javascript和css的页面

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
      <link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen">
  </head>
  <body>
    <img src="download-button.png">
  <script type="text/javascript" src="H5FullscreenPage.js"></script>
  </body>
</html>

咱们打开chrome的控制台查看timeline

4

1 图上显示在引入外部的js文件以后domComplete时间又被延后了，结合上面的renderTree，因为javascript代码可能会更改css属性或者是dom结构，因此在造成renderTree以前必须等待javascript解析完成才能接着构建renderTree。

2 将javascript放在head内和body底部的区别也在于此，放在head里面，因为浏览器发现head里面有javascript标签就会暂时中止其余渲染行为，等待javascript下载并执行完成才能接着往下渲染，而这个时候因为在head里面这个时候页面是白的，若是将javascript放在页面底部，renderTree已经完成大部分，因此此时页面有内容呈现，即便遇到javascript阻塞渲染，也不会有白屏出现。

内嵌javascript的页面

5

 

1 图上能够看到，因为内嵌了javascript，页面上减小了一个请求，致使html文档变大，消耗时间增多，可是domComplete时间提高的并很少。

使用async的javascript

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
      <link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen">
  </head>
  <body>
    <img src="download-button.png">
      <script async src="H5FullscreenPage.js" type ="text/javascript" ></script >
  </body>
</html>

 

6

1 能够看到domComplete时间被大大提早 javascript也没有阻塞css和body里面img元素的并行下载。

2 使用async标识的script，浏览器将异步执行这中script不会阻塞正常的dom渲染，这时html5所支持的属性，另外defer也能够达到这种效果。

head里面js和css加载的关系

外联js在css前面

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
      <script src="H5FullscreenPage.js" type ="text/javascript" ></script >
      <link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen">
      <link rel="stylesheet" type="text/css" href="page-animation.css" media="screen">
  </head>
  <body>
    <img src="download-button.png">
  </body>
</html>

1 没有阻止css的并行加载可是影响了body里面img的并行加载

外联js在css中间

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
      <link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen">
      <script src="H5FullscreenPage.js" type ="text/javascript" ></script >
      <link rel="stylesheet" type="text/css" href="page-animation.css" media="screen">
  </head>
  <body>
    <img src="download-button.png">
  </body>
</html>

1 影响了css的并行加载和body里面img的并行加载

外联js在css最后

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
      <link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen">
      <link rel="stylesheet" type="text/css" href="page-animation.css" media="screen">
      <script src="H5FullscreenPage.js" type ="text/javascript" ></script >
  </head>
  <body>
    <img src="download-button.png">
  </body>
</html>

1 影响了css的并行加载和body里面img的并行加载

内嵌js在css前面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
      <script type ="text/javascript" >
       var f = 1;
          f++;
      </script >
      <link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen">
      <link rel="stylesheet" type="text/css" href="page-animation.css" media="screen">
  </head>
  <body>
    <img src="download-button.png">
  </body>
</html>

1 没有影响css的并行加载也没有影响body里面img的并行加载

内嵌js在css中间

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
      <link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen">
      <script type ="text/javascript" >
       var f = 1;
          f++;
      </script >
      <link rel="stylesheet" type="text/css" href="page-animation.css" media="screen">
  </head>
  <body>
    <img src="download-button.png">
  </body>
</html>

1 影响了css的并行加载没有英雄body里面img的并行加载

内嵌js在css最后

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
      <link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen">
      <link rel="stylesheet" type="text/css" href="page-animation.css" media="screen">
      <script type ="text/javascript" >
       var f = 1;
          f++;
      </script >
  </head>
  <body>
    <img src="download-button.png">
  </body>
</html>

1 影响了css和body里面img的并行加载。

综上所述：

当浏览器从服务器接收到了HTML文档，并把HTML在内存中转换成DOM树，在转换的过程当中若是发现某个节点(node)上引用了CSS或者 IMAGE，就会再发1个request去请求CSS或image,而后继续执行下面的转换，而不须要等待request的返回，当request返回 后，只须要把返回的内容放入到DOM树中对应的位置就OK。但当引用了JS的时候，浏览器发送1个js request就会一直等待该request的返回。由于浏览器须要1个稳定的DOM树结构，而JS中颇有可能有代码直接改变了DOM树结构，浏览器为了防止出现JS修改DOM树，须要从新构建DOM树的状况，因此 就会阻塞其余的下载和呈现.

 

这里的结论：

1 在head里面尽可能不要引入javascript.

2 若是要在head引入js 尽可能将js内嵌.

3 把内嵌js放在全部css的前面.

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程