从JavaScript思考网页运行原理

本文深入探讨了浏览器如何创建窗口及文档对象模型(DOM),解释了浏览器如何通过主线程和其他线程加载内容,并讨论了JavaScript的执行机制及其对用户体验的影响。

     每天我们轻松的点击一个蓝字有下划线的文字就可以打开一个新的网页,或者在地址栏输入一个网址就可以打开一个窗口。这些都要依赖一个载体——浏览器。我最近听到部门前辈说,工具是人类进入文明社会的标志,工具越先进就证明人类进步越大。但是,我却深刻的认识到太依赖工具,就会让人变得愚钝,甚至止步不前。

      我的电脑上装了六个浏览器,干前端这行的,浏览器就是测试仪,我觉得不仅要会用,还要理解它的工作原理。下面是我看书后的一些思考:

     打开网页,浏览器就会创建一个窗口,窗口就是一个window对象,这个window对象是最顶层的一个全局对象。为了加载网页文档,窗口必须为这个网页创建一个 文档对象,将加载的内容放入这个对象当中。这些的主要目的是建立文档对象模型(DOM)的主框架。而这个主框架是有窗口的主线程来处理,对于图片、声音和视频等多媒体数据,由其他线程来处理。

     在同一个域名的情况下,只有两个线程可以同时加载内容,其他的会处于等待状态。如果一个域名两个连接,线程多了也会被阻塞。所以网站可以将附属资源分配到多个子资源去加载,这样可以加速页面的加载和呈现。

     当主框架加载和执行完毕,浏览器这才开始触发window对象或者body对象的onload事件。如果后续由加载引发的事件也处理完毕,JavaScript就暂停执行而转为等待被触发的状态。我们可以这样说JavaScript总是被动执行的。最顶层的JavaScript代码被执行,定时器触发的行数被执行,事件发生的时候函数被执行,而这一切都是被动的。大部分事件JavaScript都处于等待状态。

    JavaScript代码的执行时严格的单线程,同一个浏览器进程中,不同窗口中对象的相对独立的JavaScript代码也都是在同一个线程里执行的。如果在打开一个浏览器,创建出另一个浏览器进程,两个独立进程里的JavaScript代码就可以并行执行的。

    有时候可以利用setTimeout和setInterval函数来模拟多线程的技巧和模型,但这个严格上讲也是单线程,但是相信有一天JavaScript也会支持多线程的。

    为了不让用户过多的等待,应该尽量减少编写耗时的脚本。前端开发工程师就必须坚持面向用户编程。

 

本博文是读完《悟透JavaScript》的读书笔记,希望有心者可以去看看原书,原书写得很精彩。

  

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值