`
brucewei777
  • 浏览: 84930 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

浏览器解析脚本和样式表的顺序

 
阅读更多
脚本和样式表的处理顺序

    脚本:当解析器遇到<script>标签时,解析器就挂起,直到脚本执行完成才继续解析,当脚本是外部的,就是引用的那种时,必须首先从网络中获得该脚本文件,这也是以同步的方式完成的,就是说,解析器也会挂起,直到文件获取完毕,这样的模型已经使用了很多年,在html4和html5中都是这样规定的。开发者可以将脚本标记成“defer”,这样,解析器就不会在遇到脚本时挂起等待,html5则更进一步,通过新增了一个选项,使脚本标记为异步的,这样,解析和执行就放在不同的线程里了。

    智能解析:Webkit和firefox都有这样的优化,那就是在执行脚本的时候,另一个线程解析余下的文档,并找出其他需要从网络中加在的资源文档,然后加载它们。在这种方式下,资源文件会通过并行的连接加载,因而整体速度要好的多。当然,智能解析并不会改变DOM树,那是主解析器做的事情,它只会解析外部引用的资源,例如脚本,样式表和图片。

    样式表:样式表的解析则采用了另一种模型。原理上讲,样式表并不会改变DOM树,因此没有理由停下文档解析来等它。但是有个问题,如果脚本中有用到样式信息,而样式又没有加载并解析,这就会产生很多问题。Firefox的做法是,当一个样式表还在加载和解析过程中时,挂起所有脚本的执行。Webkit则稍微柔和些,只有在脚本需要访问那些没被加载的样式时才挂起等待。(所以,脚本里面尽量不要用到样式哦!)
0
0
分享到:
评论

相关推荐

    浏览器的工作原理-现代网络浏览器幕后揭秘

    解析结束后,浏览器还需要进行一些操作,比如处理脚本和样式表、应用样式计算等。 4. CSS解析 浏览器通过CSS解析器来解析CSS样式表。WebkitCSS解析器是一个典型的例子,它会解析CSS规则,并将它们应用到构建好的DOM...

    浏览器的工作原理

    处理脚本和样式表的顺序 浏览器在解析HTML文档时,遇到脚本或样式表标签时会暂停HTML解析,转而处理这些脚本或样式表。处理顺序对于页面的加载速度和用户体验至关重要。 #### 6. 渲染树构建 - **关系**:渲染树...

    浏览器的工作原理:现代网络浏览器幕后揭秘 - HTML5 Rocks1

    3. **脚本和样式表的处理**:浏览器按顺序执行JavaScript脚本,预解析CSS以加快页面加载速度。同时,样式表被用来构建呈现树,这是一个包含所有可视元素及其样式的树状结构。 4. **呈现树构建**:呈现树是从DOM树和...

    解析web(asp)网页的执行顺序.pdf

    首先,一个ASP网页通常由三大部分组成:脚本、HTML标记语言和CSS样式表。脚本分为服务器端脚本和客户端脚本。服务器端脚本,如`&lt;%...%&gt;`、`&lt;script runat="server"&gt;...&lt;/script&gt;`以及`&lt;!--#include--&gt;`引用的外部...

    2010html执行顺序.pdf

    例如,如果JavaScript改变了CSS样式表,浏览器会重新计算所有元素的样式,并更新页面显示。 对于CSS,当浏览器遇到`&lt;link&gt;`或`&lt;style&gt;`标签时,也会暂停HTML的下载去获取样式表。CSS文件下载完成后,浏览器会解析...

    网页按顺序加载 最后加载js广告

    4. **解析HTML**:在解析过程中,浏览器遇到外部资源链接(如样式表、脚本等),会并行发起请求,但不会阻塞HTML解析。 5. **CSS加载**:当浏览器遇到`&lt;link&gt;`标签引用的CSS文件时,会下载这些样式表。由于CSS用于...

    兼顾多个浏览器的网页模块

    这样的模块设计需要充分考虑CSS(层叠样式表)的跨浏览器兼容性,以及HTML和JavaScript的适配策略。 首先,我们需要理解IE6和IE7这两款老版本的Internet Explorer浏览器对现代Web标准的支持极其有限,它们尤其在CSS...

    2010html执行顺序.docx

    当CSS下载完成后,浏览器会解析样式表,并对已加载的页面元素重新渲染,包括之前已经显示的部分。如果存在样式重定义,后面的定义会覆盖前面的定义。 在HTML中嵌入JavaScript有多种方式: 1. 直接在`&lt;script&gt;`标签...

    HTML页面加载和解析流程详细介绍

    4. 样式表在下载完成后,将和以前下载的所有样式表一起进行解析,解析完成后,将对此前所有元素(含以前已经渲染的)重新进行渲染。 5. JS、CSS中如有重定义,后定义函数将覆盖前定义函数。 JS的加载 1. 不能并行...

    js优化1

    HTML4规范允许在和中任意位置放置,但传统做法是将样式表和脚本放在中,以便尽早定义页面外观和行为。然而,这样做会导致页面加载延迟,因为所有都会阻塞页面渲染,直到所有脚本执行完毕。 为了解决这个问题,一些...

    online-comics-reader:脚本允许从浏览器查看漫画。 运行这个脚本只需要php,因为脚本扫描comics文件夹

    "online-comics-reader-master"这个文件可能是项目的主分支或源代码库,包含所有必要的文件和资源,如PHP脚本、样式表、JavaScript文件以及可能的配置文件等。如果你打算使用或修改此项目,你需要将这个压缩包解压,...

    JavaScript 的性能优化:加载和执行.docx

    在清单2的例子中,由于JavaScript文件的顺序下载和执行,页面的其余部分,包括样式表,将被阻塞,直到所有脚本执行完毕。 为了改善性能,应考虑以下策略: 1. **延迟加载**:使用`defer`属性(仅适用于非异步脚本...

    浏览器兼容性问题

    - **解决方法**:使用CSS重置样式表来统一列表的样式。 ##### 8. 元素水平居中问题 - **问题描述**:在不同浏览器中,实现元素水平居中的方法可能存在差异。 - **解决方法**:使用`margin:auto`或者Flexbox布局来...

    html延迟加载JS和CSS

    这种技术允许网页在不阻塞页面渲染的情况下,延迟加载非关键性的脚本和样式表,从而提高页面的初始加载速度,提升用户体验。尤其在支持像IE6这样的较旧浏览器时,这种策略显得尤为重要,因为这些浏览器可能对大量...

    浅谈原生JS中的延迟脚本和异步脚本

    简单来说,DOMContentLoaded事件触发表示DOM树构建完毕,此时可以进行DOM操作,但并不代表所有资源如图片、样式表等都已经加载完成。 异步脚本(async)是HTML5新增的特性,它允许脚本文件的加载和执行不阻塞后续的...

    从基础开始:CSS实用教程

    CSS(层叠样式表)是一种强大的网页设计工具,它能够让你精确地控制网页元素的布局和样式,从而提升网页的视觉效果和用户体验。随着网络技术的发展,CSS已经成为现代网页设计不可或缺的一部分,被广泛应用于各种...

    登录页面HTML CSS JS代码.doc

    4. 样式表链接:`&lt;link&gt;`标签用于链接外部样式表文件login.css和bootstrap.min.css。 5. 脚本链接:`&lt;script&gt;`标签用于链接外部脚本文件jquery.min.js、bootstrap.min.js和login.js。 6. 表单元素:`&lt;form&gt;`标签用于...

    2022年web前端最全面试题及答案【含vue-react】.docx

    link是用于引入外部样式表的标签,@import是用于引入外部样式表的CSS规则。 3. em、px、rem有什么区别? em、px和rem都是CSS单位,用于指定字体大小和元素尺寸。em是相对单位,px是绝对单位,rem是根元素的相对...

Global site tag (gtag.js) - Google Analytics