游览器中javascript的执行过程(图文)_javascript技巧-js教程-PHP中文网

首页

web前端

js教程

游览器中javascript的执行过程(图文)_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 05:53 PM

javascript执行过程

1. 大多数游览器的组件构成如图

在最底层的三个组件分别是网络，UI后端和js解释器。作用如下：
（1）网络－用来完成网络调用，例如http请求，它具有平台无关的接口，可以在不同平台上工作
（2）UI 后端－用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口
（3）JS解释器－用来解释执行JS代码

ps：上图和知识点主要来自《HOW BROWSERS WORK: BEHIND THE SCENES OF MODERN WEB BROWSERS》想深入了解的同学可以重点看下。
2. 大多数游览器（比如chrome）让一个单线程共用于执行javascrip和更新用户界面。这个线程通常被称为“游览器UI线程”，每个时刻只能执行其中一种操作，这意味着当Javascript代码正在执行时用户界面无法响应输入，反之亦然。这样做是因为javascript代码的作用就是操作DOM更新用户界面，用同一个线程来做负责这两件事情可以更高效
3. 游览器UI线程的工作基于一个简单的队列系统，任务会被保存到队列中直到进程空闲。一旦空闲，队列中的下一个任务就被重新提取出来并运行。这些任务要么是运行javascript代码，要么执行UI更新，包括重绘和重排。
4. 重点再强调下，javascript是单线程运行，千万别被setTimeout()和setInterVal()这种函数迷惑而误以为它是多线程。
ok，基础点讲解完毕，让我们进入正题，来讲解在游览器中javascript的执行过程。
一、原理
一般而言，<script>标签每次出现都会霸道地让页面等待脚本的解析和执行，无论当前的Javascript是内嵌的还是包含了外链文件，页面的下载和渲染都必须停下来等待脚本执行完成。这在页面的生存周期中是必要的，因为脚本执行过程中可能修改页面内容，一个典型的例子就是在页面中使用document.write()。 <BR>当javascript代码是内嵌在html里面时，这点还是比较容易理解，但当javascript是外链文件时稍微有点负载，因为存在一个加载过程，而且游览器加载好这个js文件之后往往还对其缓存。 <BR>首先，我们用以下这个例子来说明下缓存问题 <BR><div class="codetitle"><span><a style="CURSOR: pointer" data="13076" class="copybut" id="copybut13076" onclick="doCopy('code13076')"><U>复制代码代码如下:<div class="codebody" id="code13076"> <BR><html> <BR><head> <BR><script type='text/javascript' src='js/f2.js'></script>

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

C和JavaScript：连接解释Apr 23, 2025 am 12:07 AM

C 和JavaScript通过WebAssembly实现互操作性。1）C 代码编译成WebAssembly模块，引入到JavaScript环境中，增强计算能力。2）在游戏开发中，C 处理物理引擎和图形渲染，JavaScript负责游戏逻辑和用户界面。

从网站到应用程序：JavaScript的不同应用Apr 22, 2025 am 12:02 AM

JavaScript在网站、移动应用、桌面应用和服务器端编程中均有广泛应用。1)在网站开发中，JavaScript与HTML、CSS一起操作DOM，实现动态效果，并支持如jQuery、React等框架。2)通过ReactNative和Ionic，JavaScript用于开发跨平台移动应用。3)Electron框架使JavaScript能构建桌面应用。4)Node.js让JavaScript在服务器端运行，支持高并发请求。

Python vs. JavaScript：比较用例和应用程序Apr 21, 2025 am 12:01 AM

Python更适合数据科学和自动化，JavaScript更适合前端和全栈开发。1.Python在数据科学和机器学习中表现出色，使用NumPy、Pandas等库进行数据处理和建模。2.Python在自动化和脚本编写方面简洁高效。3.JavaScript在前端开发中不可或缺，用于构建动态网页和单页面应用。4.JavaScript通过Node.js在后端开发中发挥作用，支持全栈开发。