html解析和渲染过程 与 Script标签和脚本执行顺序

几个首要特性:

  • script标签(不带deferasync属性)的会阻止文档渲染。相关脚本会立即下载并执行。
  • document.currentScript可以获得当前正在运行的脚本(Chrome 29+, FF4+)
  • 脚本顺序再默认情况下和script标签出现的顺序一致

deferasync属性(defer和async没有完全兼容所有浏览器

  • 仅有async属性,脚本会异步执行
  • 仅有defer属性,脚本会在文档解析完毕后执行
  • 两个属性都没有,脚本会被同步下载并执行(顺序下载,顺序执行),期间会柱塞文档解析

如下示例A1,A2,A3

<!-- HTML code -->
<script  src="https://snipt.net/raw/A1_7b08744009c450e07c0bfc1d606fc72e/"></script>
<script  src="https://snipt.net/raw/A2_a2e8c05c1f6fc0e47d259aa899304e89/"></script>
<script  src="https://snipt.net/raw/A3_4fab3017d3d46cbfc4bbd88aab006650/"></script>

当第二个文件A2的尺寸远大于另外两个文件,A1下载执行不受影响,A3在A2下载执行完成之后下载

当<script>标签下载执行过程中,HTML停止解析(也停止渲染)

  

时间: 2024-10-17 01:33:57

html解析和渲染过程 与 Script标签和脚本执行顺序的相关文章

unity 脚本执行顺序设置 Script Execution Order Settings

通过Edit->Project Settings->Script Execution Order打开MonoManager面板 或者选择任意脚本在Inspector视图中点击Execution Order..按钮 Default Time下方数值越小的排在越前面脚本将率先执行.

页面动态加入&lt;script&gt;标签并执行代码

在页面中动态追加html片段的时候,有时候动态添加的代码会含有<script>标签,比如用了一些模板引擎,或者你的代码有些复杂的时候.然而我们用DOM提供的innerHTML方式来添加代码的时候,<script>标签中的代码并不能执行,如果有src属性,指向的外联文件也不会被加载,这并不是浏览器的bug,因为w3c文档就是这么规定的. 那我们有什么办法可以恢复追加的<script>标签的代码执行能力呢? 重新构造<script>标签      这个思路其实非

移除script标签引起的兼容性问题

一.应用场景: 有时候我们需要动态创建script标签实现脚本的按需加载,我们会为script标签绑定onload或者onreadystatechange事件,用于检测动态脚本是否加载并执行完毕,在事件处理程序中引用动态脚本创建的变量. 二.问题描述: 如果我们动态创建script标签并绑定事件处理程序后,立即移除script标签,那么事件处理程序是否会执行?如果能执行,那么能否正常引用动态脚本创建的变量? 三.看如下程序: function inviteFriends() { var self

浏览器加载、解析、渲染的过程

最近在学习性能优化,学习了雅虎军规 ,可是觉着有点云里雾里的,因为里面有些东西虽然自己也一直在使用,但是感觉不太明白所以然,比如减少DNS查询,css和js文件的顺序.所以就花了时间去了解浏览器的工作,有一篇经典的文章<how browsers work> ,讲的很详细,也有中文译本 .不过就是文章有点太长,也讲了一堆东西,还是自己总结一下. 为什么要了解浏览器加载.解析.渲染这个过程? 好,我们先说一下,为什么要了解这些呢?如果想写出一个最佳实践的页面,就要好好了解. 了解浏览器如何进行加载

&lt;script&gt;标签的加载解析执行

转自原文 <script>标签的加载解析执行 看了很多网上的文章,都是大同小异.总结一下.内部原理还没有搞清楚,有机会再学习. 一.<script>标签的加载解析执行顺序 html页面中的<script>标签中的内容(直接写入或者引用外部文件都一样)是以顺序加载执行的,每个<script>标记内容可以当成一个独立的块,同步的情况下一个块加载解析然后执行完后才加载下一块.当然这时也会阻塞其他页面元素的加载.所以网上说的变量调用: <script type

DOM的解析渲染过程

获取到html文件 第一步当用户在url中输入网址时 1. 浏览器会检查缓存中有没有这个域名对应的解析过的IP地址,如果缓存中有,这个解析过程就结束. 2. 如果在本地没有找到对应的ip地址,就到本地域名服务器中去找. 3. 如果本地域名服务器没找到就向根域名服务器发起请求去找. 第二步:找到IP地址后浏览器和服务器建立连接(属于传输层,涉及TCP,UDP协议,TCP的三次握手和松手过程,TCP支持的应用协议主要有:Telnet.FTP.SMTP等:UDP支持的应用层协议主要有:NFS(网络文件

浏览器渲染过程

有时候想要进行性能优化时了解浏览器的渲染过程无疑是十分重要的.下面来看 首先介绍一下主流浏览器的渲染引擎: IE:Trident chrome:Blink Safire:webkit Firefox:Gecko Opera:Blink QQ浏览器/微信webview:X5/Blink 可能有很多会感到疑惑:chrome不是webkit么?其实Blink也算是webkit的一种升级吧,前缀还是不变的. 然后介绍一下渲染过程 1.DOM解析(与CSS解析同时进行): 把HTML文档解析成DOM树的过

浏览器~加载,解析,渲染

昨天为了 了解浏览器是怎么处理(.html..css..js)这些文件,我看了网上的好多资料,这好多资料中,有很多是通过转载.或是转载后加之自己的理解,但是因为自己对专业的词汇理解不好,还有一些作者将不同浏览器的处理过程混着说,总之,看完了,还是有很多疑虑的地方.我先根据昨天了解到的内容总结一下,日后随着学的深了,再回过来补充.2014.11.6 why 为什么要了解浏览器加载.解析.渲染这个过程? 了解浏览器如何进行加载,我们可以在引用外部样式文件,外部js时,将他们放到合适的位置,使浏览器以

script标签中的async和defer

在程序中代码是一行一行执行的,html标签都是由渲染引擎来执行,代码执行时从上往下一行一行执行,当执行到alert(如下图),alert会阻塞后面代码的执行,当点击完确定之后,代码继续往下执行. javascript的内容同样可在外部进行引用,如下图所示,正常情况下执行结果和上面的内容相同,但当我们给html的script标签中加入async或者defer属性时,代码的执行过程也将会随之改变. async 为异步,顾名思义就是多个人同时做多件事,这里区分sync,sync为同步,就是一个人有序的