首页 > 语言 > 关键词  > 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 如果有哪里说的不清楚或者错误的地方,欢迎留言反馈。

举报

  • 相关推荐
  • 大家在看
  • StrategyAnalytics:半数英国消费者认为小米和OPPO为一线品牌或正在攀升

    根据 Strategy Analytics 近期发布的关于小米、OPPO、 vivo、 荣耀、一加等中国品牌在英国的消费者调研报告显示,半数英国手机买家认为小米和 OPPO 为一线品牌或正在攀升...报告显示,80% 的英国受访者认为三星和苹果在英国智能手机市场仍处于领先地位或正在崛起;有一半人认为小米在品牌发展方向上处于领先或正在上升......

  • Strategy Analytics:无线通信半导体短缺将有所缓解

    Strategy Analytics的RF&无线元器件服务最新发布的研究报告《半导体短缺对无线通信的影响》认为,无线通信已经摆脱了半导体短缺的最消极的影响,蜂窝基础设施设备半导体今后将继续避免严重短缺...例如,中国的半导体产量在2021年增加超过17%,今年中国的生产扩张速度将加快,这将有助于缓解全球半导体短缺...

  • CrossFit大神都在推荐的好物——AdvoCare Spark运动饮料

    虽然不需要精确到克,但应有个大致的范围,如每日热量摄入在1500卡,其中碳水化合物160g 左右,蛋白质125g 左右,脂肪40g 左右...可光靠食补,是无法补充健身所需摄入的营养素,在此我为小伙伴安利几款健身人士必备的运动补剂...回到能量补剂这个话题上,AdvoCare推出的Spark冲剂,就能帮助你在运动前增加肌肉力量和爆发力,内含丰富的矿物元素能够补充运动流失的电解质,有效恢复身体机能,加快新陈代谢...在符合运动前能量需要的还能补充每天所需的营养物质,激发更好的运动表现......

  • Check Point Quantum保护用户物联免遭攻击

    正因如此,预计2022年物联网收入将增长至5490亿美元;到2030年,物联网互联设备的数量预计将达到159亿...Check Point通过Quantum 物联网防护解决方案帮助其用户及时发现、并处理了一起物联网攻击事件,确保了这家企业免遭进一步严重攻击的后果...Quantum 物联网防护方案支持客户查看其网络中的所有物联网互联设备,并跟踪网络内部和互联网外部的物联网设备通信,这些均可通过一系列配置文件来实现......

  • 锐成SSL证书周年庆特惠来袭 72元起实现HTTPS安全防护!

    随着网民及网站所有者对网络安全意识的增强,很多企业网站部署了SSL证书,尤其是银行、金融、电商等中大型网站开启了HTTPS加密传输数据的模式。但是,对一些中小型企业、个人站长来说,申请SSL证书可能会增加一笔不菲的采购成本。实际上,随着域名安全证书的普及,其价格也没有想象中的那么贵了,而且很多数字证书服务商还经常有优惠活动。近日,国内领先的HTTPS解决方案服务商锐成SSL证书在 11 周年之际,为感恩回馈新老客户,特此在 2022 年 5 月 1 日- 6 月 15 日开设了SSL证书特惠专场,超 10 家国际国内CA品牌,比如Digicert, Geotr

  • 性能猛增35% Intel公开”4nm“ EUV工艺性能CPU频率冲击6GHz?

    根据Intel的芯片工艺路线图,到2025年之前他们要在短短4年内掌握5代CPU工艺,其中有2代还是首次进入埃米级工艺,今年下半年将要量产Intel 4工艺,也就是对标友商的”4nm工艺,也是Intel首款使用EUV光刻机的工艺。目前台积电、三星已经量产了4nm工艺,不过Intel自家的”4nm工艺还是有不少特色的,特别是在性能方面,其他两家主要生产低功耗芯片,Intel则是要生产高性能处理器,包括桌面及服务器级别的。Intel的这个”4nm工艺比目前的Intel (也就是没改名前的第二代10nm工艺)工艺每瓦性能提升20%,如果是对比之前的初代10nm工艺,那么性能

  • Galaxy Watch 5或将放弃Classic设计,并采用新Wear OS皮肤

    今年晚些时候,三星将推出其新的智能手表系列并将带来一个有趣的变化...目前还不清楚这些变体是否会采用三星粉丝喜欢的可旋转表圈...根据过去的模式,三星每隔几年才会对其智能手表的软件进行重大更新,并且通常是在对其Android皮肤进行改造之后...

  • Adobe推出Creative Cloud Express新功能 用于规划和发布社交媒体帖子

    Adobe今天宣布,它将推出一套新的Creative Cloud Express功能,使用户更容易计划、安排、预览和发布跨平台的社交媒体内容。该公司在Creative Cloud Express内推出了 "内容调度器",它建立在12月收购ContentCal的基础上,因为Adobe已经将ContentCal整合到Creative Cloud Express当中。用户现在可以通过有助于最终确定其内容的工具来制作和计划其社交媒体主题和活动。然后,他们可以通过一个单一的拖放日历查看和管理他们的社交节奏。从那里,用户可以安排他们的内容,以确保在最佳时间到达他们的受众。在内容上线之前,用户可以使用预览模?

  • AV-C最新测试发现Microsoft Defender对系统性能影响较大

    也许我们可以说,Microsoft Defender最近的日子并不好过。几天前,有报道称Defender for Endpoint在客户的Windows 10系统上造成各种问题。而现在,又有一条坏消息传出,测试结果显示,微软的内置反恶意软件产品会对配置不佳的计算机上的Windows系统造成严重性能影响。在AV-C的评级中,Defender勉强能够获得"标准"评级,因为它在评估中与Total Defense Anti-Virus一起排在倒数第二。本次测试主要面向以下反恶意软件产品进行:Avast Free Antivirus 22.3 AVG Free Antivirus 22.3 Avira Prime 1.1 Bitdefender Internet Security 26.0 ESET

  • Strategy Analytics:iPad出货量同比下降6%至1580万台

    据 Strategy Analytics 近期发布的研究报告,2022年 Q1,苹果 iPadOS 出货量(批发)同比下降6%,至1580万,全球市场份额上升1.7个百分点,至39%;与苹果严重供应紧张的假日季相比,其出货量实际上比上季度增长了1%...三星引领的安卓市场在2022年Q1仅同比下滑1.2%,至820万台;同期的市场份额增长了1.8个百分点,达到20%;亚马逊的增长紧随三星之后,出货量为370万台,同比下降1.3%;市场份额增长0.8个百分点,至9%...

今日大家都在搜的词: