谈及浏览器,首先我们的第一映像就是页面信息显示或者是从网上百度、谷歌我们所需要的信息。归纳起来大概有两点:1.信息检索;2.信息展示
而回顾浏览器的发展历史,从1991年的世界上第一个有用户注册的浏览器WorldWideWeb开始,当时它还只是可以显示基本的样式表,人们可以通过它看见经过简易排版的页面信息。它的导航也只有“返回”,“上一步”和“下一步”这三个功能。
经过近30年的时代发展和一代又一代工程师们的努力,期间经历Erwise、ViolaWWW、MidasWWW、Lynx、Mpsaic、IBM WebExplorer、Netscape Navigator......等,众多的流浪器,到如今五大主流浏览器:IE、Chrome、Firefox、Safari、Opera。

现在的浏览器虽然百花齐放,但其内核主要还都是Trident、Webkit、Gecko

列举了现如今主要的浏览器内核,接下来继续为这个关键角色找找归宿:
1.Trident内核,俗称是IE内核,它是由微软在Spyglass Mosaic的基础上主导开发的,并一直沿用至IE11,从2016年1月开始微软已停止了对IE的更新,并开始在Windows 10中开始嵌入和推荐
Microsoft Edge浏览器,其新一代内核是EdgeHTML;
2.Webkit内核,其前身是KDE小组的KHTML引擎。开始是苹果的Safari浏览器中使用,而后再谷歌的Chrome浏览器也采用,并使Webkit更加深入人心,以致于很多人把Webkit称为chrome内核,(在此为Safari默哀一小会儿)。然而 2013 年 4 月 3 日,谷歌在 Chromium Blog 上发表 博客,称将与苹果的开源浏览器核心 Webkit 分道扬镳,在 Chromium 项目中研发 Blink 渲染引擎(即浏览器核心),内置于 Chrome 浏览器之中。所以现在的谷歌浏览器内核其实应该叫Blink,当其本质还是Webkit,我们可以如此理解:Blink是Webkit的分支,而Webkit又是KHTML的分支。在此需要补充说明一点Opera浏览器已放弃自己的Presto内核,加入谷歌的阵营,先用Webkit再用Blink。
3.Gecko内核,Gecko的身世就比较传奇了。它是在Mosaic内核的基础上开发的。在第一次浏览器世纪大战中,败下阵来的网景公司并没有彻底的烟消云散,其原有成员一起创办了Mozilla基金会,开发了Firefox(火狐)浏览器,吹响了第二次浏览器大战的号角。并Gecko内核的代码完全开源,邀请全世世界的开发者来助阵。这就是一场传说啊,有木有。

好了,前面背景铺垫了这么一大堆,下面开始来进入正题:
虽然浏览器的种类繁多,内核也多样,但其主要工作原理却是大致一致的,这或许就是所谓的“万法同源”。其工作的简易原理如下图:

1.Browser进程,接收资源,展示画面
2.Render进程绘制画面
3.GPU进程,辅助绘制画面

看完简易版的了,再来看点复杂点的浏览器内核工作原理:

一个浏览器Tab渲染进程中主要有5个线程,其作用功能如下:
A.GUI渲染线程:graphical user interface
1.负责渲染浏览器界面,解析HTML,CSS,构建DOM树和RenderObject树,布局和绘制等。
2.当界面需要重绘(Repaint)或由于某种操作引发回流(reflow)时,该线程就会执行
3.注意,GUI渲染线程与JS引擎线程是互斥的,当JS引擎执行时GUI线程会被挂起(相当于被冻结了),GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行。

B.js引擎线程(javascript是单线程):
1.是负责处理JS脚本的js内核,一个渲染进程有且只有一个js线程,且该线程一直处于等待任务对队列中任务的到来。

C.事件触发线程:
1.事件触发线程是用来存放事件任务的队列,有多个事件任务时触发时,该线程会按照事件触发的先后顺序将待处理的事件添加到队列的尾部,排队等待js引擎线程的处理。

D.定时器触发的线程:
一次性定时器(setTimeout)和间歇性(setInterval)定时器,为避免js单线程阻塞状态,影响计时的准确性,故在设计js程序时单独为计时器开了个线程。计时完成后事件也会被放入事件触发线程的队列中等待JS引擎的触发。
注:setTimeout定时低于4ms的时间会被当做4ms,这是W3C中规定的

E.异步http请求线程:
XMLHttpRequest在连接后是通过浏览器新开一个线程请求,当检测到状态变更时,如果设置有回掉函数,异步线程就产生状态变更事件,将这个回调函数放入事件队列中

转载于:https://www.cnblogs.com/maoBable/p/8863571.html

JS运行机制(浏览器内核)相关推荐

  1. 从浏览器多进程到JS单线程,JS运行机制最全面的一次梳理

    最近发现有不少介绍JS单线程运行机制的文章,但是发现很多都仅仅是介绍某一部分的知识,而且各个地方的说法还不统一,容易造成困惑. 因此准备梳理这块知识点,结合已有的认知,基于网上的大量参考资料,从浏览器 ...

  2. js中当等于最小值是让代码不执行_从浏览器多进程到JS单线程,JS运行机制最全面的一次梳理...

    前言 见解有限,如有描述不当之处,请帮忙及时指出,如有错误,会及时修正. ----------超长文+多图预警,需要花费不少时间.---------- 如果看完本文后,还对进程线程傻傻分不清,不清楚浏 ...

  3. js 多个定时器_从浏览器多进程到JS单线程,JS运行机制最全面的一次梳理(二)

    作者:撒网要见鱼   https://segmentfault.com/a/1190000012925872 本文接上篇 <从浏览器多进程到JS单线程,JS运行机制最全面的一次梳理(一)> ...

  4. web前端培训JS 运行机制的梳理

    展现形式:由于是属于系统梳理型,就没有由浅入深了,而是从头到尾的梳理知识体系, 重点是将关键节点的知识点串联起来,而不是仅仅剖析某一部分知识. 内容是:从浏览器进程,再到浏览器内核运行,再到JS引擎单 ...

  5. JS 运行机制最全面的一次梳理

    前端Q 我是winty,专注分享前端知识和各类前端资源,乐于分享各种有趣的事,关注我,一起做个有趣的人- 公众号 点击上方 前端Q,关注公众号 回复加群,加入前端Q技术交流群 最近发现有不少介绍JS单 ...

  6. Vue.js 运行机制全局概览

    Vue.js 运行机制全局概览 全局概览 Vue.js 运行机制全局概览 这一节笔者将为大家介绍一下 Vue.js 内部的整个流程,希望能让大家对全局有一个整体的印象,然后我们再来逐个模块进行讲解.从 ...

  7. 初识JS_API基础Day4——笔记整理+JS运行机制+1课后作业+蓝瘦香菇...

    一. 常用的键盘事件 1. 键盘事件 2. 键盘事件对象 二. BOM 1 . 什么是BOM 2 . window对象的常见事件 页面(窗口)加载事件(2种) 第1种 window.onload 是窗 ...

  8. 浅谈 js运行机制 、宏观任务、微观任务

    **今天我们谈一下我对js 运行机制 和宏观任务.微观任务的理解** js运行机制有同步运行和异步运行 js是单线程运行模式在进入任务当中如果是同步任务 那么就直接被主线程运行 如果是异步任务 那么就 ...

  9. 操作系统4小时速成:操作系统发展和分类,运行环境:运行机制和内核,用户态非特权,核心态特权,中断技术,访管指令

    操作系统4小时速成:操作系统发展和分类,运行环境:运行机制和内核,用户态非特权,核心态特权,中断技术,访管指令 2022找工作是学历.能力和运气的超强结合体,遇到寒冬,大厂不招人,可能很多算法学生都得 ...

最新文章

  1. VS2010非永久性配置和永久配置Opencv
  2. 来自长辈的5句教导!
  3. [Django]网页中利用ajax实现批量导入数据功能
  4. 指针A - 签到题(顺序三元组)
  5. 联捷俞海乐:从技术leader到CEO视野和责任提升几个维度
  6. 别看程序员只是表面风光
  7. Integer与int的区别
  8. JAVA编程规范-命名规范
  9. winzip15.0注冊码
  10. opencv改变图片大小,cv2.resize方法详解
  11. c语言第七章函数笔记,我的C语学习笔记-C语言教程(七).doc
  12. 32位浮点数转十进制
  13. vba批量写入mysql临时表_提高从VBA字典向Access DB中插入多个数据的速度
  14. 一本通1646GT 考试
  15. requests模块基本使用、代理ip、session访问
  16. Vue插件视频播放插件
  17. laya 和 egret 区别
  18. java学习第188天,javaWeb学习第47天,复习第23天;p257-262(08/21)-4h
  19. java 简单万年历_Java_万年历(简单)
  20. datatable 统计当前页的总数和统计所有页面的总数

热门文章

  1. AS3 RPG游戏引擎开发日志3:地图坐标转换
  2. 像Excel一样使用python进行数据分析(2)
  3. python的一些基本语法
  4. [原创] 指针操作程序答案 — 谭浩强C语言习题答案
  5. mac下用scp命令实现本地文件与服务器Linux文件之间的相互传输
  6. UICollectionView的sectionHeader悬浮效果
  7. iOS 调用h5页面 视频不自动播放的问题
  8. 某大型企业私有云建设思路解析
  9. 安装win7和centos6.7双系统 引导加载安装位置问题
  10. N个富文本编辑器/基于Web的HTML编辑器