网页性能之html css javascript

  • 时间:
  • 浏览:1
  • 来源:大发快三_快三一分钟计划软件_大发快三一分钟计划软件

前言

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

2 图中红框内的这部分时间则表示浏览器从下载完成html事先 开始英文英语 构建dom,当发现一两个多image标签时所花费的时间,由此可见dom是顺序执行的,当发现image时便立即发起请求,而紫色透明条则是image发起请求时在网络传输时所消耗的时间。

3 图中timeline浅绿色竖线所处的时间为domComplete时间,红色竖线为dom的onload时间,由此可见某种 事件的差异。而浏览器构建dom树所花费的时间不能算出即domComplete时间 减去 html下载完成后的时间大概150ms。

蕴藏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,页面上减少了一两个多请求,愿因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,就会再发一两个多request去请求CSS或image,太满太满太满太满 继续执行下面的转换,而必须听候request的返回,当request返回 后,只不能把返回的内容装下 到DOM树中对应的位置就OK。但当引用了JS的事先 ,浏览器发送一两个多js request就会时不时听候该request的返回。肯能浏览器不能一两个多稳定的DOM树形态学 ,而JS中很有肯能有代码直接改变了DOM树形态学 ,浏览器为了外理出先JS修改DOM树,不能重新构建DOM树的情形,太满太满太满太满 就会阻塞许多的下载和呈现.

这里的结论:

1 在head里面尽量无须引入javascript.

2 肯能要引入js 尽量将js内嵌.

3 把内嵌js装下 所有css的前面.

后记

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

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