【大发5分快3计划】网页性能之html css javascript

  • 时间:
  • 浏览:1
  • 来源:UU直播平台-UU快3直播APP

前言

html c大发5分快3计划ss javascr大发5分快3计划ipt都需要算是前端需要掌握的东西了,日后大伙儿儿儿的浏览器是要怎样解析什么东西的呢 大伙儿儿儿要怎样处理html css javascript什么东西来让大伙儿儿儿的网页更加合理,在我这里做了其他实验,总结起来给大伙儿儿儿看看。

最简单的页面

  • <!DOCTYP大发5分快3计划e html>

    <html>

      <head>

        <title>test</title>

      </head>

      <body>

        <img src="download-button.png" alt="HTML代码优化 网页性能 JavaScript技巧 Javascript">

      </body>

    </html>

大伙儿儿儿打开chrome的控制台查看timeline

由上图 可得结论

1 图中淡蓝色透明条标识浏览器从发起请求到接收到服务器返回第另4个字节的时间,时间还是挺长的,而淡蓝色实体条则为真大发5分快3计划正的html页面下载的时间 还是很短的。

2 图中红框内的这要素时间则表示浏览器从下载完成html日后结速构建dom,当发现另4个image标签时所花费的时间,由此可见dom是顺序执行的,当发现image时便立即发起请求,而紫色透明条则是image发起请求时在网络传输时所消耗的时间。

3 图中timeline淡蓝色竖线趋于稳定的时间为domComplete时间,红色竖线为dom的onload时间,由此可见两种生活事件的差异。而浏览器构建dom树所花费的时间都需要算出即domComplete时间 减去 html下载完成后的时间离米 60 ms。

涵盖css的页面

  • <!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" alt="HTML代码优化 网页性能 JavaScript技巧 Javascript">

      </body>

    </html>

大伙儿儿儿打开chrome的控制台查看timeline

1 在加带了外部引入css日后,并那么发现什么异常,日后有其他指的注意,也而是红色竖线和淡蓝色竖线挨得更进了,这表明domComplete时间需要在等待css解析完成,也而是构建dom树需要在等待css解析完成,这也就解释了下图

涵盖javascript和css的页面

  • <!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" alt="HTML代码优化 网页性能 JavaScript技巧 Javascript">

      <script type="text/javascript" src="H5FullscreenPage.js"></script>

      </body>

    </html>

大伙儿儿儿打开chrome的控制台查看timeline

1 图上显示在引入外部的js文件日后domComplete时间又被延后了,结合上端的renderTree,日后javascript代码然不会更改css属性日后是dom价值形式,而是在形成renderTree日后需要在等待javascript解析完成都都可不可否接着构建renderTree。

2 将javascript放进head内和body底部的区别也在于此,放进head上端,日后浏览器发现head上端有javascript标签就会暂时停止其他大发5分快3计划渲染行为,在等待javascript下载并执行完成都都可不可否接着往下渲染,而你这些日后日后在head上端你这些日后页面是白的,日后将javascript放进页面底部,renderTree日后完成大要素,而是此时页面有内容呈现,即使遇到javascript阻塞渲染,而是会有白屏再次老是出现。

内嵌javascript的页面

1 图上都需要想看 ,日后内嵌了javascript,页面上减少了另4个请求,因为着html文档变大,消耗时间增多,日后domComplete时间提升的未必多。

使用async的javascript

  • <!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" alt="HTML代码优化 网页性能 JavaScript技巧 Javascript">

          <script async src="H5FullscreenPage.js" type ="text/javascript" ></script >

      </body>

    </html>

1 都需要想看 domComplete时间被大大提前 javascript也那么阻塞css和body上端img元素的并行下载。

2 使用async标识的script,浏览器将异步执行这中script不让阻塞正常的dom渲染,这时html5所支持的属性,另外defer也都需要达到你这些效果。

head上端js和css加载的关系

外联js在css前面

  • <!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" alt="HTML代码优化 网页性能 JavaScript技巧 Javascript">

      </body>

    </html>

1 那么阻止css的并行加载日后影响了body上端img的并行加载

外联js在css上端

  • <!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" alt="HTML代码优化 网页性能 JavaScript技巧 Javascript">

      </body>

    </html>

1 影响了css的并行加载和body上端img的并行加载

外联js在css最后

  • <!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" alt="HTML代码优化 网页性能 JavaScript技巧 Javascript">

      </body>

    </html>

1 影响了css的并行加载和body上端img的并行加载

内嵌js在css前面

  • <!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" alt="HTML代码优化 网页性能 JavaScript技巧 Javascript">

      </body>

    </html>

1 那么影响css的并行加载也那么影响body上端img的并行加载

内嵌js在css上端

  • <!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" alt="HTML代码优化 网页性能 JavaScript技巧 Javascript">

      </body>

    </html>

1 影响了css的并行加载那么英雄body上端img的并行加载

内嵌js在css最后

  • <!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" alt="HTML代码优化 网页性能 JavaScript技巧 Javascript">

      </body>

    </html>

1 影响了css和body上端img的并行加载。

综上所述:

当浏览器从服务器接收到了HTML文档,并把HTML在内存中转加带DOM树,在转换的过程中日后发现某个节点(node)上引用了CSS日后 IMAGE,就会再发另4个request去请求CSS或image,日后继续执行下面的转换,而需要在等待request的返回,当request返回 后,只需要把返回的内容放进到DOM树中对应的位置就OK。但当引用了JS的日后,浏览器发送另4个js request就会老是在等待该request的返回。日后浏览器需要另4个稳定的DOM树价值形式,而JS中很有日后有代码直接改变了DOM树价值形式,浏览器为了处理再次老是出现JS修改DOM树,需要重新构建DOM树的情况表,而是 就会阻塞其他的下载和呈现.

这里的结论:

1 在head上端尽量未必引入javascript.

2 然不会引入js 尽量将js内嵌.

3 把内嵌js放进所有css的前面.

后记

1 本次的测试页面 http://1.lvming68160 77.sinaapp.com/testaa/demo.html

2 测试所用浏览器 chrome

3 参考资料:http://www.zhihu.com/question/20357435/answer/14878543

http://www.haorooms.com/post/web_xnyh_jscss

4 日后有哪里说的不清楚日后错误的地方,欢迎留言反馈。

有好的文章希望站长之家帮助分享推广,猛戳这里我就 投稿