当我们打开一个网页的时候,浏览器会首先创建一个窗口,这个窗口就是我所知道的window对象,也就是整个Javascript运行所依附的全局变量。

为了加载网页文档,当前窗口又需要创建一个Document对象,然后把打开的网页加载到Document下。网页就是在这个加载的过程中,一边加载一边呈现,所以我们当网速非常慢的时候可以看到,网页从上到下一点点地打开。

当我们用<script src=’’>引入其他的JS时,浏览器可能会派遣其他线程去下载,但是浏览器也会等待需要的JS文件下载完成,然后再有主线程按顺序加载JS其他的代码。在Web标准下,限制对同一个域名最多只允许使用两个线程可以同时加载内容,当然可以通过修改注册表来强迫Windows模块突破这一限制。

同时,许多网站会把js放到不同的子域名下,这样就可以使浏览器开启更多的线程并行加载这些资源,从而更加充分地利用网络带宽。

当整个页面都加载结束后,浏览器开始触发window对象或者body对象的onload事件,其实window对象和body对象的load事件是相通的,这也就意味着两个事件只能有一个起作用。当然,在常规意义上,也没有同时设置两者的需求。

到此结束,然后JS引擎就暂停工作,等待着下一次的触发。因此我们可以说:“JS总是被动触发的”。

js 网页运行原理的更多相关文章

  1. Sea.Js的运行原理(转)

    1.CMD(Common Module Definition)规范 Sea.js采用了和Node相似的CMD规范,使用require.exports和module来组织模块.但Sea.js比起Node ...

  2. 深入浅出javascript(四)网页运行原理

    这一篇是根据不同的书本知识归纳的内容,解答的问题是浏览器是如何工作的? 另外,还有一些长篇的内容,写的是浏览器内部如何架构的,这些内容非常复杂艰深,比现在所写的内容又低了一个层级,希望有时间能总结贴出 ...

  3. Js基础知识(四) - js运行原理与机制

    js运行机制 本章了解一下js的运行原理,了解了js的运行原理才能写出更优美的代码,提高运行效率,还能解决开发中遇到的不理解的问题. 进程与线程 进程是cpu资源分配的最小单位,进程可以包含多个线程. ...

  4. 网页设计——3.html运行原理,基本标签

    一.运行原理 (1)本地运行 自己写的html网页用电脑上浏览器打开,就是实现了本地运行. 可以把浏览器当成一个软件,可以打开html文件. (2)远程访问 远程访问就是你用自己电脑在网上浏览一些网站 ...

  5. 【原创】分布式之数据库和缓存双写一致性方案解析(三) 前端面试送命题(二)-callback,promise,generator,async-await JS的进阶技巧 前端面试送命题(一)-JS三座大山 Nodejs的运行原理-科普篇 优化设计提高sql类数据库的性能 简单理解token机制

    [原创]分布式之数据库和缓存双写一致性方案解析(三)   正文 博主本来觉得,<分布式之数据库和缓存双写一致性方案解析>,一文已经十分清晰.然而这一两天,有人在微信上私聊我,觉得应该要采用 ...

  6. 前端与编译原理 用js去运行js代码 js2run

    # 前端与编译原理 用js去运行js代码 js2run 前端与编译原理似乎相隔甚远,各种热门的框架都学不过来,那能顾及到这么多底层呢,前端开发者们似乎对编译原理的影响仅仅是"抽象语法树&qu ...

  7. ASP.NET运行原理

    1,ASP.NET运行原理: 客户端向服务器发出请求 → 服务器处理请求→ 处理好的数据以报文发给浏览器 → 浏览器显示请求结果 2,Chrome浏览器,查看请求过程:F12打开浏览器的调试窗口: 3 ...

  8. Web应用运行原理

    web应用启动做了什么? 读取web.xml文件   - web.xml常用配置参数: 1).context-param(上下文参数)2).listener(监听器配置参数)3).filter(过滤器 ...

  9. Web自动化必会知识:「Web基础、元素定位、元素操作、Selenium运行原理、项目实战+框架」

    1.web 基础-html.dom 对象.js 基本语法 Dom 对象里面涉及元素定位以及对元素的修改.因为对元素操作当中涉及的一些 js 操作,js 基本语法要会用.得要掌握前端的基本用法.为什么要 ...

随机推荐

  1. 2.redis-help使用,基本命令

    redis 帮助 > help redis-cli Type: "help @<group>" to get a list of commands in < ...

  2. 使用flask_sqlalchemy操作mysql的一个测试

    示例代码 from flask_sqlalchemy import SQLAlchemy from flask import Flask app=Flask(__name__) app.config[ ...

  3. python3.6内置模块——random详解

    python内置模块random是用来生成随机数的,在许多场合都能应用到,算是比较常见的一种模块吧,下面详细介绍其具体用法. 基本用法 随机生成浮点数:有两种,一种没有参数,默认是0~1,另一种可以指 ...

  4. 刷题34. Find First and Last Position of Element in Sorted Array

    一.题目说明 题目是34. Find First and Last Position of Element in Sorted Array,查找一个给定值的起止位置,时间复杂度要求是Olog(n).题 ...

  5. MFC的cstring判断是否存在中文字符

    bool IsChinese(CString Cstr) { int nLen = Cstr.GetLength(); unsigned char ch1, ch2; for (int i = 0; ...

  6. bzoj2882工艺(最小表示法)

    O(nlogn)的做法十分显然,有三种可以做到O(nlogn)的:1.最容易的想法:把串扩展成两倍,然后跑一遍SA求后缀数组.2.求后缀同样也可以用SAM去求解,用map存一下.3.最暴力的方法:直接 ...

  7. shell_innobackup增量备份步骤

    alias start='service mysql.server start'alias restart='service mysql.server restart'alias stop='serv ...

  8. 单调栈and单调队列(此文太多坑了,以后再填)

    单调栈 单调栈是一种特殊的栈,特殊之处在于栈内的元素都保持一个单调性,可能为单调递增,也可能为单调递减. 性质: 单调栈里的元素具有单调性 元素加入栈前,会在栈顶端把破坏栈单调性的元素都删除 使用单调 ...

  9. 三:mysql条件查询

    1:查询工资等于5000的员工

  10. [LC] 222. Count Complete Tree Nodes

    Given a complete binary tree, count the number of nodes. Note: Definition of a complete binary tree ...