宝哥软件园

浏览器中javascript的执行过程(图形)

编辑:宝哥软件园 来源:互联网 时间:2021-10-09

1.大多数旅游景点的组成如图所示。

在底层,三个组件是网络、UI后端和js解释器。功能如下:(1)Network-用于完成网络调用,如http请求,具有独立于平台的接口,可以在不同平台上工作;(2)UI后端——用于绘制组合选择框、对话框等基本组件,有通用接口,不特定于某个平台,底层使用操作系统的用户界面;(3)JS解释器——用于解释和执行JS代码ps:上图和知识点主要来自《HOW BROWSERS WORK: BEHIND THE SCENES OF MODERN WEB BROWSERS》。2.大多数浏览器(如chrome)使用一个线程来执行javascrip和更新用户界面。这个线程通常叫做“Browser UI Thread”,一次只能执行其中一个操作,这意味着在执行Javascript代码时,用户界面无法响应输入,反之亦然。这是因为javascript代码是用来操作DOM来更新用户界面的,用同一个线程来做这两件事效率更高。3.浏览器UI线程的工作基于一个简单的队列系统,任务会保存在队列中,直到进程空闲。一旦空闲,队列中的下一个任务将被重新提取并运行。这些任务要么运行javascript代码,要么执行UI更新,包括重绘和重新排列。4.再次强调javascript在单线程上运行,所以不要被setTimeout()和setInterVal()这样的函数所迷惑,误认为是多线程。好了,在解释了基本要点之后,让我们进入正题,在查看器中解释javascript的执行过程。一、原理一般来说,每次脚本标签出现,都会任意让页面等待脚本解析执行。无论当前的Javascript是嵌入的还是包含外部链文件,页面的下载和渲染都必须停止,等待脚本执行。这在页面的生命周期中是必要的,因为页面的内容可能在脚本执行期间被修改。一个典型的例子是在页面中使用document.write()。当javascript代码嵌入到html中时,这很容易理解,但是当javascript是外部链接文件时,会稍微加载,因为有一个加载过程,访问者在加载后经常会缓存这个js文件。首先,我们用下面的例子来说明缓存的问题。复制代码如下: HTML head script Type=' text/JavaScript ' src=' js/F2 . js '/script/head body/body/HTML第一次打开页面时:

第二次打开页面时:

从上面的例子可以清楚地看到,更高版本的浏览器喜欢chrome cache js文件,这是不言而喻的,减少了网络请求。其次,第二个问题是一个javascript文件在加载时是否会阻止其他javascript文件或者其他文件的加载。003010对这个问题给出了一个更好的答案:各种浏览器的低版本的处理方式是,加载一个javascript文件时,会同时阻止页面上其他文件(包括其他javascript文件)的加载,但IE8、Firfox3.5、Safari 4、Chrome 2都允许并行下载javascript文件,但遗憾的是,javascript下载过程仍然会组织其他资源的下载,比如图片。虽然javascript脚本的下载过程不会互相影响,但是页面还是要等所有的javascript代码下载执行完毕后才能继续。这里题外话:同一个域名下并发链接的数量也是受游客限制的。其他参数如下:

2.小贴士1。脚本位置由于脚本会阻止页面上其他资源的下载,建议将所有脚本标签放在body标签的底部,这样就最大限度地减少了对整个页面下载的影响。2.合并可以合并的js文件。3.非阻塞脚本现在常用的方法是动态加载和执行脚本。您的原则是,通过DOM,您可以使用Javascript动态创建HTML中的几乎所有内容。它的基本点是脚本标签与页面中的其他元素没有什么不同:它们可以通过DOM引用,并且可以在文档中移动、删除和创建。当脚本元素被添加到页面时,文件开始。现在不会阻止其他文件下载,只是在执行阶段进行块渲染。特别强调:文章《高性能Javascript》陈述“该技术的关键点在于,每当开始下载时,文件的下载和执行不会阻塞页面上的其他进程”,并不是说执行时不会阻塞其他javascript代码,而是强调不会阻塞下载其他资源等其他任务。具体代码如下:复制代码如下:函数load script(URL){ varga=document . create element(' script ');ga . type=' text/JavaScript ';ga.async=真;ga.src=url(document . getelementsbytagname(' head ')[0]| | document . getelementsbytagname(' body ')[0])。append child(ga);} 4.奇妙的setTimeout()这里我就不多解释setTimeout()的原理了。感兴趣的读者可以具体阅读《高性能javascript》第六章。我强调setTimeout的第二个参数不是确切的时间,必须在javascript线程空闲时运行。有了这个特性,下面的代码可以简单地等待其他js代码执行,然后再执行函数中的代码。复制代码如下: settimeout(function(){//在其他JavaScript代码处理完之前执行一些操作},25),但不要在函数中使用document.write()方法。由于setTimeout中的函数通常在页面加载后执行,此时执行document.write将导致当前页面的内容被清空,因为它会自动触发document.open方法。003010浏览器如何工作:现代网页浏览器的幕后Google Chrome源代码分析[I]:多线程模型javascript异步加载详解。

更多资讯
游戏推荐
更多+