43.尚硅谷_JS高级_浏览器内核.avi原创

啊，下面还有一个纯理论的知识，叫浏览器内核。嗯，OK。什么叫内核呢，对吧，浏览器内核。其实非常简单，就是支撑浏览器运行的最核心的程序。大家知道浏览器。浏览器它也是个软件，也是个应用，是不是也是有很多代码组成的，懂不懂，在这个代码里面就有最最核心支撑他们运整个整体运行的一些代码，呃，内单代那些代码，我们把它称为什么内核，那不同浏览器那个它的内核呢，可能是什么不太一样的。他都有一些名字啊。像Chrome啊，他们都用的什么呢？有个概念叫onepa的，就是是一其中的一种内核啊，一个代号一个名称，好那个fire first呢。

嗯，那你们好像改口还是改口改口是吧，IE是什么tryent。这不用背，这都是了解性的，这个东西你背的也没什么意思，这里要说一个是像国内的一些浏览器啊，号称是什么双核双驱动，很牛逼的啊，牛逼在哪啊，他们一般就是将啊那个pro的内核，IE的内核塞到他们浏览器里面，再改一些皮肤来做一些操作，有的很多很多同学喜欢用360的浏览器，觉得这个浏览器功能特别牛逼啊，这功能也有，那功能也有，那用不了多少。类似菜鸟才是这么，你们是专业人员，你不要去了公司测试，就把360浏览器打开，只有一种可能性，你要打开三六浏览器去360。

记住了啊，你不愿意上去就打开那个国内的什么搜狗浏览器，什么360浏览器，什么百度浏览器，太low了，你不要跟我说支持国产。当然其实最好的方式还是去用Chrome浏览器，再有个IE浏览器，因为主要是有的项目，有的软件，它是在I浏览器特别要求啊，其实现在市场占有率最高的是。谁浏览器，你IE浏览器早时代早过去了啊，IE的时代早过去了，我基本上都不用IE。Firefox的我用起来感觉就是慢，就启动了一下，启动了一下特别慢，但是pro最快的就是么说，其实最新版本的IE已经很快了，但是怎么说习惯别人的习惯已经养成了啊，你再想也就是说你市场已经丢掉了，你现在牛逼起来了，没用了。

现在其实微软其实挺尴尬的，他们确实是巨头，他干啥啥不行，你看他们花那么多钱找卧底，最后把诺基亚收购了干啥了？花了几十个亿，最后啥也没得到啊。感觉他们真是现在就是吃老板干啥啥行。OK，好，这是这个大家注意啊，就是尽量就用，基本上这火狐当时这三个浏量器都得装上是吧，这三个浏器都装上啊，还有一个大家看到现在我的这个浏览器是我每次打开不都这样的吗。这些上面都是我们要学的技术，然后一些比较重要的网站啊，譬如说Google，比如说Google能访问吗？想办法就可以啊，Get，他是大家必须要用的一个网站啊，后面会跟大家去说，这这个是号称全球最大的基友网站啊，因为程序员都在上面过是吧。

嗯，这是一个前端的一个收藏夹啊，这个嗯，包括什么一些，这前面都是一些比较常用的一些网站，后面的都是一些我们的一些库，以后要学的一些库，Quiry啊，View RA hung node require GS cgs，这是一些工具啊，Ground gapa gro，这是我们后面要学的一个新的版本，ES6，这也是个工具，Bible啊，后面还有一些啊，NPM啊，C PM Bo ES Li的什么ES啊，挺多的啊啊，这是一个，这是一个插件，这一个是一个proome浏览器，这个这个插件挺好用啊，挺有用的，而且这种逼格也比较高，就是给人一看，人看到一打开，哎，不说全部会。

这我至少是大部分都会的吧，我建议大家都都把它装上啊，我等会发给大家，大家都可以装上，装上以后呢，需要把我的这是后来添加上去的，可以添加的啊，你可以添加这是我这是我添加的，都不可以自定义输入一个网址啊，它的名称自动，譬如说啊，譬如说举个例子啊。啊，3W点百度点com，我讲再举个例子啊，如果有网的话，它会自动的去去去请求以后得到它的名称，得到它的一个默认的一个图片，你也可以自己去什么是不是指定图片，这些图片都是我自己指定的。

你说这个图片从哪来，你去访问这一个这一个库所对应的网址，对应的主页，是不是就可以找到他主页上面的那个图片，当然可以想办法都可以啊，接着点击添加就会进入这个里面啊，我这个里面呢，有一个设置，设置以后有一个这有一个生成，有一个恢复什么呢？生成呢，就是把我的配置，把我添加的这些网址啊，点一下以后，它会保存起来一个文件嘛。那我把这个文件发给大家，你们要做什么？你们这点恢复能理解，不恢复就加载这个文件。你点就都有了，就大家都一样啊，但首先你得装这个插件，这是一个插件啊，这个插件挺好用的，还有这里面有背景，你可以换，点这个大风车这个背景就可以换啊，就挺好用的。

啊，等会儿后面我发给大家，大家不用着急。啊，这个呢，大家大概有一个了解就行啊，诶还是说一个事情啊，就是就是国内的那些不是双核的吗？他怎么选择呢。就是嗯，什么时候用用webpa，什么时候用China了，大家知道IE它的它那个有一个就是针对那种跟钱有关的银行啊，你想想很多银行都支持IE，你要别人浏览器访问，它都不支持。有的有的那个银行就在了。啊，它的安全性相对好一些，那平常的时候如果你不涉交钱。那就是运行的是什么呢？它就自能选择会运会找这个webpa的运行，那如果一旦涉及到钱了，它就会切换了什么。

能懂吧，啊这是智能内核嘛，双核双驱动。好，下面这个是关键，前面都不太重要啊，这个说的是内核是一个比较大的程序啊，一个内核是一个比大的程序，非常复杂的一个程序啊，它里面。那一个大程序是了很多代码，它又会分为不同的什么呢？模块分成很多不同拈做不同的事情。那这里面我们就把一些重要的模块跟大家说一说，大概说一说，这个大家能懂啊，譬如说有一个模块叫GS引擎，诶这里面说一个什么是JS引擎呢。谁引擎就是引擎。市场风险。程序也是代码，它也是代码，能不懂，说白了它也是程序，只是这个程序它是用来解释我们写的代表的程序。

我们就把它称为隐形。有不懂。也就是说，我们写的代码是不是依赖它来执行，我们就把它称为什么JS引擎。那也就是说GS引擎是不是在浏览器内部就有的？浏览器里面有没有JS音，有它的内核里面吗？内核是不是JS那个我们浏览器的功能整个一个部分呢。首先是有浏览器，浏览器是一个很大很大的程序，它里面是不是有内核，就相当于是内核是吧，它内核里面是不是有很多模块，而这个里面我们就说的是有一个什么JS引擎，它负责什么呢？CS程序的什么边域以什么运行？

还有什么模块呢？看到HTMCSS文档解析模块。是干嘛的了？首先我要问大家，现在我去访问百度。我用浏览器输入百度的地址。是不是展现了一个网页，那我问大家最先浏览器得到的是一个什么东西，到底啊，浏览器得到的是个什么？是不是一个HTM格式的一个文本？是不是，甚至还有CSS的文本，对不对，能不能懂。能懂吧，首先得到说白了就字串是不是你打开你右键那个页面，是不是看到之后就是一个大的一个文本啊，这个大的文本可以是X也可以是不是CSS啊有那你在想。

首先我最终展现的是不是非常好看的一个界面。是吧，那这个就得有个过程啊，有个过程。什么过程呢？首先我得是不是读取这些文件，要不要读要读这些文本。还要拆解，要不要拆解？知道什么叫拆解吗？你想文本它是不是，它是不是有格式啊，是有特定格式，什么玻璃，什么什么day，什么hand是有没有有的吧，你是不是解析，他们要不要解析，解析实际上就是根据一定的规则对他们进行什么拆解。啊，这个时候就要用到一个模块叫什么呢？HTMCSS的解析模块。负责页面文本的什么呢？解析好，下面还有一个叫DOM与CSS的模块，也就是说大家想想，最终你我问大家一下。

你说页面的绘制，页面的显示是根据什么显示的？因为怎么显示啊，你怎么知道要显示个按钮，怎么样显，怎么知道要显示一个输入框啊，看什么来显示啊。嗯，知道吗？就页面里面。这个都得知道啊，我有一个，我显示了一个输入框，右边是一个按钮，那我咋知道要显示一个输入框，我咋知道要显示一个按钮呢。那解析完了就写字啦，不是。大家知道我们再去访问浏览器，你看这里天天说啊，举个例子啊，这里面都没有，我就用它吧，F3。不用管它，就这个大家看着这个里面是不是显示的是当前大家看着啊。

当前实际上是我的整个页面，整个页面的结构，是不是我们打开它，我们去输出多门啊，就直接写多回面了吧，也不用写，大家看这是不是显示了一个对象，而这个对象多亏包含了什么东西。它其实内部结构是这个结构吧，是这样的东西吗？其实不是，其实不是，这不是这个里面其实它一种一种友好的方式展现给你看的，大家知道我们内部是不是有个document对象。是吧，而do对象里面有是不是有我的element的对象有没有，而element实际上是不是HTM那个标签的element是不是啊，而我这个animal里面是不是有汉爱的。有没有有接着还有什么是不是玻璃对应的M的，说白了我们说内存里面是不是一个光对象数啊。

忘了吗？就整个结构，整个我们页面在内存的结构是个多对象数。是还是不是是。啊，是一个多么要数肯就是很多个对象对吧，好，那我就问大家这个地方。啊，我们最终是不是开始开始得到的是一些文本吧，是一个非常大的一个文本，S开文本，那最终我们的页面显示可不是直接根据这个文本显示的，那你想嘛，我根据文本怎么显示画了个页面呢？我要根据什么来显示，根据内存的对象结构，对象是不是存了很多数据，也就是说我一个element里面。我一个安对象，一个标签对象里面是有很多数据，大家觉得会有一些什么数据？

会有一些什么数据？你说会不会有我的包度，有我的要显示的宽度有没有有有没有我我的那个位我的我的。有没有有我的那个对象里面是包含了我需要显示的一些信息啊。能不懂就说白了，我们的页面怎么显示的，是不是根据这个对象内部的数据来显示啊，那现在我们要把文本解析后，最终要生成一个什么？生成一个一个的对象，说白了我看到一个P标签，那我是不是生成一个P标签所对应的对象，我看到一个div标签，最终我是不是要把它转换成一个什么？Div的对象。能不能理啊，OK，那这个时候我们就需要这些东西，DOM和CSS的模块，他们负责dorm和CS在内存中相关的一些处理，最终要把它转换对象。

好，有了对象以后，我们刚刚说了，最终页面是不是要显示一个效果呀，到了这里效果显示出来了吗。有没有，还没有，就光生成的对象还没有显示，还需要有特定的拈，这个地方叫布局与渲染拈。你说这布局是用来干嘛的？布局模块是不是来确定我这个元素，这些标签对应要写在哪个位置？说白了，有一个这是我的页面，这是我的界面，我有一个input可能要显示这里，是不是也可能要显示在这里，是不？我要确定它的一些坐标要不要啊，要我要不要确定它要显示的宽和高要不要啊，要那你说有了有了坐标，有了宽和高，最终我们要做一件最终最终要做的事情，渲染，我说老师，什么叫渲染，渲染到底是啥呀？

简单来说就是要画到你的上面去，怎么画到你啥了，你说我你你们看到的这个界面是是什么东西啊。他说你屏幕上看的这个东西是什么？是不是一些像素点呢？能懂不？是不是啊，是，那也就是说大家看到这里举个例子，譬如看到这个，这是个什么，这是不是一个小图标按钮啊。是吧，是不是是的，那这个地方我要把它将它绘制出来啊，这个就叫绘制渲染啊，OK，那我平我怎么知道要混成什么样子呢。

对不对，我怎么知道要显示什么东西呢？得看它所对应的那个元素对象啊，元素对象内部保存的是一些什么数据。譬如说我要是个image。那你说他读什么数据去啊，他那是不是得读他的src啊，找到他的图片吗？找到图片够了吗。不够，可能还要去看它歪的。是不是可能还要去看它什么hit来决定我这个图片到底显示多宽，到底显示多高。是吧，那下一步我就根据这些数据是不是喷了一下去点了。往你的屏幕上面再喷那些像素点懂不懂原是老师，那他能喷那么准确吗？这就不是你要关心的事。

你都关心到这上面去了，那那也太细了啊，你不用担心，他到时候投射那个像素点投射的不准确，这个不是你要关心的了。看，你只要知道它是依赖于依靠什么东西来做的，对不对，也就是说我要将这个元素显示出来，它看什么东西，就看我内存里面的那些对象，它内部的数据。信息。看最终我们的布局渲染模块负责页面的布局以及效果的什么呢？有一个概念叫绘制，它的参照的就是我内存中的什么，那些多元素，他们的对象。这个大家需要慢慢的去理解他们啊，其实这些东西能帮助大家去知道一个页面它是怎么出来的。啊，而这些这些模块都运在哪个线程呢？主线程啊，都运行在主线程，那是不是所有模块都运行在主线程的不是。

那还有一些非线程运行的模块，譬如说诶，这里面有个概念叫定时器模块。啊，定时器呢，负责什么呢？定时器的管理，也就是说我们还记不记得，我们可以比如假设setout是不是指定了一个回调函数。是吧，啊，直接回答数，其实后面我们还是不是指定一个时间，假设1000毫秒。那为什么1000毫秒他就能执行呢？是不是这个东西其实后台是有管理程序的。而这个管理程序，我们把它称为什么呢？定时器模块，它们本质上是运行在分线程的。有人可能就说，老师，你这个定时性管理模块运行在分线程，是不是代表我的这个函数，这个回调函数是运行在分线程呢？

是吗？啊，不是的，我们前面说过，刚才说过一句话，我们的GS代码是运行在什么线程啊，就以单线程代码，那现在单线程嘛，运行在哪个线程主线程。这体怎么弄呢，后面再去说啊，还一个事件响应模块，它也是需要，也就是说我们给一个按钮加了一个监听，我们一点那个监听毁掉是不是就执行。是吧，你觉得理所当然，哎，就这么回事，就应该执行。但是这个理所当然的背后，它也是需要有管理模块。啊，而这个管理模块本身，它也是在非线程执行。好，下面一个这个呢，大家可能以前没学过啊，网络请求模块负责请求，这个请求是什么请求，大家也不太懂啊，现大概知道一下啊，现在大家先不用管这个啊，这两个大家应该是知道的，就是定时器模块和事件响应模，这个是多姆事件响应模块，多姆事件。

这个指的事件是动物世界啊。这两个大家应该是有点感觉的，因为针对的是我们学过的知识。而这些呢，它是运行在分界层的。这都是一些理论的概念，这些理论概念大家先回缩离听啊，后面讲了以后呢，大家再回过来看一看。这个重要性比前面的要大一些。