網頁性能之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教程