首页 > 语言 > 关键词 > HTML代码优化最新资讯 > 正文

网页性能之html css javascript

2015-05-05 17:19 · 稿源:alloyteam.com

前言

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

最简单的页面

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

由上图 可得结论

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

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

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

含有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,就会再发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 本次的测试页面 https://1.lvming6816077.sinaapp.com/testaa/demo.html

2 测试所用浏览器 chrome

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

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

4 如果有哪里说的不清楚或者错误的地方,欢迎留言反馈。

  • 相关推荐
  • 大家在看
  • Linux Kernel 5.10本周合并引入了对 AMD/Intel新硬件的性能代码支持

    本周一的 Linux 5.10 窗口合并,为“Perf”子系统添加了对 AMD 和 Intel 新硬件的支持。除了大量的 Intel / AMD x86 更改,还有 Ingo Molnar 发出的性能事件查询请求。以 AMD Zen / Zen 2 处理器的运行时平均功率限制(RAPL)为例,其代码现已扩展适用于 Family 19h(即 Zen 3),辅以专为 AMD 制定的诸多性能修复。

  • Windows 10新任务管理器上线:专为玩家优化、释放设备性能

    微软为Windows 10游戏玩家准备的全新任务管理器已经悄然上线,其可以更好的释放设备性能,让系统更加优化。事实上,微软一直在开发现代化的任务管理器,未来能够在不离开游戏或者导致游戏崩溃

  • 深入解析Lua脚本加密技术,给游戏代码加上“紧箍咒”

    不少安全专家表示,在互联网上失去对代码的控制,就像把银行的设计图交给抢劫犯一样。Lua是一种被广泛用于游戏开发中的计算机语言,方便开发者定制自己所需的功能。其中,红遍全球的《愤怒的小鸟》就是由Lua语言用Wax开发的。此外,梦幻西游、奇迹暖暖、开心消消乐、放置奇兵、最强蜗牛等手游也采用了Lua语言进行编写。近年来,Lua脚本在游戏行业长期流行,但Lua脚本泄露事件屡见不鲜,其安全性也引起关注。不法分子通过开私服、开

  • 搜狗发布组件化代码解耦框架 极大降低组件化重构成本

    9 月 28 日,搜狗正式发布SogouModuleBus组件化解耦框架,为业界贡献新的组件化解决方案。同时,这款基于搜狗立体化架构思维诞生的组件化框架,将会进一步降低开发者的组件化重构成本。代码耦合,是指软件工程中不同模块和类之间的依赖关系。耦合度高,则代码之间的依赖度高,往往容易出现牵一发而动全身的被动局面。因此开发者们需要对高耦合度代码进行解耦,让业务模块之间的关联依赖降到最低。此次搜狗SogouModuleBus组件化框架

  • 微软已移除Windows 10中用于通话的相关代码:全面转战安卓

    对于微软来说,他们已经彻底放弃Windows Phone了。根据一些网友发现的情况看,通话相关的GUID随着2020年3月发布的预览版就已经删除了。对于那些不熟悉的人来说,全球唯一标识符(GUID)通常被

  • 黑客声称获取育碧尚未发布游戏《看门狗:军团》源代码

    育碧和Crytek(欧洲的电子游戏开发商)这两家当今最大的游戏公司数据遭泄露,原因是一个名为Egregor的勒索软件团伙在窃取了这家两家公司内部网络窃取的数据,并在暗网上公布。

  • 微软已移除Windows10中用于通话的相关代码,全面转战安卓

    对于微软来说,他们已经彻底放弃Windows Phone了。根据一些网友发现的情况看,通话相关的GUID随着 2020 年 3 月发布的预览版就已经删除了。对于那些不熟悉的人来说,全球唯一标识符(GUID)通常被开发人员和微软用于运行脚本或进程。

  • 搜狗开源srpc:自研高性能通用RPC框架

    今年 7 月底,搜狗公司开源了内部的工业级C++服务器引擎Workflow,一路收获业内许多认可和关注。 9 月 15 日,作为Workflow最重要的生态项目——srpc,一个基于其打造的轻量级RPC框架,也在GitHub上开源了。 GitHub搜索“sogou srpc”即可找到该项目。 一个性能更好的thrift/brpc srpc与thrift/brpc是协议与IDL均互通的。srpc除了自带的sogou-std协议以外,还实现了baidu-std协议和thrift framed协议,因此srpc可以与thrift或brpc

  • 优化Banner广告收入的7种策略

    要使发布商获得最大利润,就需要优化Banner广告。广告的错误放置会降低点击率(CTR),导致收入暴跌,最糟糕的是:并非每个受众都会以同样的方式做出反应。

  • [图]微软发布两个紧急安全更新:修复远程代码执行漏洞

    今天微软发布了两个不定期的例外(Out-of-Band)安全更新,重点修复了WindowsCodecs库和VisualStudioCode应用中的安全问题。这两个例外安全更新是本月补丁星期二活动日之后再发布的,主要修复了两款产品中的“远程代码执行”漏洞,能够让攻击者在受影响的设备上远程执行代码。

  • 苹果笑而不语:源代码泄露显示 微软秘密打造酷似Mac的WinXP主题

    泄露的源代码展示了微软当初打造Windows XP更多趣事,比如他们曾秘密准备了一个版本,让该操作系统看起来更接近于 Mac。最近泄漏的Windows XP源代码泄漏了微软在操作系统上的早期工作,其中一

  • 开发人员现可在Windows上构建和运行Swift代码项目

    苹果的Swift编程语言本周正式登陆Windows,现在可以从开源项目下载Swift工具链图片。

  • AMD锐龙5000系列CPU性能怎样 锐龙5000CPU参数性能汇总

    美国当地时间10月8日,AMD公司正式发布了锐龙5000处理器,该系列处理器是基于ZEN 3架构研发,7nm 制作工艺打造,使用了全新的核心布局,运行占用缓存较大的软件或游戏时表现更好,以下我们来看下锐龙5000处理器的参数性能。

  • RTX3090性能怎么样比RTX3080快多少?RTX3090性能参数介绍

    RTX3090 性能怎么样比RTX3080 快多少?英伟达 RTX 3090 将于今天开卖,RTX3090 的评测与国内首销均定于今晚 21 点解禁。现在英伟达网站上就发布了一篇博客文章,称 RTX 3090 是为要求最高的用户设计的。并且英伟达官方还放出了RTX3090 的性能成绩。以下是RTX3090 性能参数介绍。

  • iOS 14.2测试版亮相 代码显示买iPhone你要小心没配件

    ​9 月 30 日凌晨,苹果公司向用户和开发者们推送了iOS 14.2测试版系统,该版本除了改进一些Bug之外,似乎没有增加什么功能和新的特性。但是,iOS 14. 2 测试版中出现的一小段代码引起了大家的注意,这段代码或暗示了苹果以后不会在iPhoen包装中赠送EarPods耳机。

  • 执掌百度20年 李彦宏没为产品写过一行代码

    百度迎来创业二十年,官方纪录片《二十度》(点击观看)也正式上线。影像资料中介绍了一些不为人知的百度幕后故事,比如百度集团资深副总裁崔珊珊爆料,李彦宏是百度第一版的产品经理,但没有

  • 杜绝“幽灵刹车”!特斯拉发布更新 限速识别性能提升

    特斯拉的自动辅助驾驶,相较于市面上其它车型的辅助驾驶,着实有着更好的体验。但是,即便如此,让机器和AI来操控车辆,当前仍然有不少无法解决的问题。例如,不少特斯拉车主反映称,自己的车

  • Pixel用户吐槽Android 11:升级后性能被劣化

    前不久,Android 11正式版发布,除了谷歌Pixel系列亲儿子手机,OPPO、小米、一加等也纷纷跟进升级。要说谷歌对Android底层的理解最为深刻,操刀优化的功底理应最强,然而,一些Pixel用户吐槽反

  • XISEM西圣ASN蓝牙耳机:强悍性能,平民价格

    如今,真无线蓝牙耳机几乎人手一个,而如今想买一个比较不错的蓝牙耳机,价格也都在二三百元的价位。那么,究竟有没有一款平民价格的蓝牙耳机呢?有,而且不少。不过,相比较而言,我会不自觉地想到XISEM西圣系列的蓝牙耳机,因为西圣系列的蓝牙耳机不仅有平民价格,同时拥有强劲的性能。今天给大家带来的就是西圣ASN-刺客真无线蓝牙耳机。西圣 XISEM真无线蓝牙耳机ASN 半入耳跑步运动防水防汗商务通话适用苹果安卓耳塞式 耀目白京

  • ThinkBook怎么样?锐智系创造本强劲性能超凡体验

    通天大道宽又阔,创业青年坚且毅,对于初入职场或自主创业的青年人来说,一台能够满足商务办公需求,性能强大,操作流畅的办公电脑必不可少。锐智系创造本ThinkBook 15,超强性能,灵巧便捷,轻松应对各种办公需求,为青年人商务办公、创新创业带来超凡体验。创造本ThinkBook怎么样?联想为青年创新创业护航联想集团成立于1984年,致力于从事开发、制造及销售最可靠的、安全易用的技术产品。锐智系创造本ThinkBook 15专为青年创业?

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议
  • 热门标签