网页性能之html css javascript

  • 时间:
  • 浏览:0
  • 来源:大发pk10_pk10在线注册平台_大发pk10在线注册平台

前言

html css javascript还时可否有前端时要掌握的东西了,若果 朋友的浏览器是何如解析那先 东西的呢 朋友何如解决html css javascript那先 东西来我你要 们的网页更加合理,在我这里做了一点实验,总结起来给朋友看看。

最简单的页面

  • <!DOCTYPE html>

    <html>

      <head>

        <title>test</title>

      </head>

      <body>

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

      </body>

    </html>

朋友打开chrome的控制台查看timeline

由上图 可得结论

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

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

3 图中timeline浅绿色竖线居于的时间为domComplete时间,红色竖线为dom的onload时间,由此可见这种 事件的差异。而浏览器构建dom树所花费的时间还时要算出即domComplete时间 减去 html下载完成后的时间合适200ms。

中有 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标签就会暂时停止一点渲染行为,等待歌曲javascript下载并执行完成都能能接着往下渲染,而这种 不会因为在head底下这种 不会页面是白的,因为将javascript倒入页面底部,renderTree因为完成大次要,什么都有此时页面有内容呈现,即使遇到javascript阻塞渲染,什么都 会有白屏老出。

内嵌javascript的页面

1 图上还时要看得人,因为内嵌了javascript,页面上减少了有1个 请求,因为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,就会再发有1个 request去请求CSS或image,若果 继续执行下面的转换,而不时要等待歌曲request的返回,当request返回 后,只时要把返回的内容倒入到DOM树中对应的位置就OK。但当引用了JS的不会,浏览器发送有1个 js request就会老是 等待歌曲该request的返回。因为浏览器时要有1个 稳定的DOM树价值形式,而JS中很有因为有代码直接改变了DOM树价值形式,浏览器为了解决老出JS修改DOM树,时要重新构建DOM树的情况报告,什么都有 就会阻塞一点的下载和呈现.

这里的结论:

1 在head底下尽量不须引入javascript.

2 因为要引入js 尽量将js内嵌.

3 把内嵌js倒入所有css的前面.

后记

1 本次的测试页面 http://1.lvming68120077.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 因为有哪里说的不清楚因为错误的地方,欢迎留言反馈。

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