00:00
啊,下面还有一个纯理论的知识,叫浏览器内核。嗯,OK。什么叫内核呢,对吧,浏览器内核。其实非常简单,就是支撑浏览器运行的最核心的程序。大家知道浏览器。浏览器它也是个软件,也是个应用,是不是也是有很多代码组成的,懂不懂,在这个代码里面就有最最核心支撑他们运整个整体运行的一些代码,呃,内单代那些代码,我们把它称为什么内核,那不同浏览器那个它的内核呢,可能是什么不太一样的。他都有一些名字啊。像Chrome啊,他们都用的什么呢?有个概念叫onepa的,就是是一其中的一种内核啊,一个代号一个名称,好那个fire first呢。
01:03
嗯,那你们好像改口还是改口改口是吧,IE是什么tryent。这不用背,这都是了解性的,这个东西你背的也没什么意思,这里要说一个是像国内的一些浏览器啊,号称是什么双核双驱动,很牛逼的啊,牛逼在哪啊,他们一般就是将啊那个pro的内核,IE的内核塞到他们浏览器里面,再改一些皮肤来做一些操作,有的很多很多同学喜欢用360的浏览器,觉得这个浏览器功能特别牛逼啊,这功能也有,那功能也有,那用不了多少。类似菜鸟才是这么,你们是专业人员,你不要去了公司测试,就把360浏览器打开,只有一种可能性,你要打开三六浏览器去360。
02:03
记住了啊,你不愿意上去就打开那个国内的什么搜狗浏览器,什么360浏览器,什么百度浏览器,太low了,你不要跟我说支持国产。当然其实最好的方式还是去用Chrome浏览器,再有个IE浏览器,因为主要是有的项目,有的软件,它是在I浏览器特别要求啊,其实现在市场占有率最高的是。谁浏览器,你IE浏览器早时代早过去了啊,IE的时代早过去了,我基本上都不用IE。Firefox的我用起来感觉就是慢,就启动了一下,启动了一下特别慢,但是pro最快的就是么说,其实最新版本的IE已经很快了,但是怎么说习惯别人的习惯已经养成了啊,你再想也就是说你市场已经丢掉了,你现在牛逼起来了,没用了。
03:12
现在其实微软其实挺尴尬的,他们确实是巨头,他干啥啥不行,你看他们花那么多钱找卧底,最后把诺基亚收购了干啥了?花了几十个亿,最后啥也没得到啊。感觉他们真是现在就是吃老板干啥啥行。OK,好,这是这个大家注意啊,就是尽量就用,基本上这火狐当时这三个浏量器都得装上是吧,这三个浏器都装上啊,还有一个大家看到现在我的这个浏览器是我每次打开不都这样的吗。这些上面都是我们要学的技术,然后一些比较重要的网站啊,譬如说Google,比如说Google能访问吗?想办法就可以啊,Get,他是大家必须要用的一个网站啊,后面会跟大家去说,这这个是号称全球最大的基友网站啊,因为程序员都在上面过是吧。
04:27
嗯,这是一个前端的一个收藏夹啊,这个嗯,包括什么一些,这前面都是一些比较常用的一些网站,后面的都是一些我们的一些库,以后要学的一些库,Quiry啊,View RA hung node require GS cgs,这是一些工具啊,Ground gapa gro,这是我们后面要学的一个新的版本,ES6,这也是个工具,Bible啊,后面还有一些啊,NPM啊,C PM Bo ES Li的什么ES啊,挺多的啊啊,这是一个,这是一个插件,这一个是一个proome浏览器,这个这个插件挺好用啊,挺有用的,而且这种逼格也比较高,就是给人一看,人看到一打开,哎,不说全部会。
05:28
这我至少是大部分都会的吧,我建议大家都都把它装上啊,我等会发给大家,大家都可以装上,装上以后呢,需要把我的这是后来添加上去的,可以添加的啊,你可以添加这是我这是我添加的,都不可以自定义输入一个网址啊,它的名称自动,譬如说啊,譬如说举个例子啊。啊,3W点百度点com,我讲再举个例子啊,如果有网的话,它会自动的去去去请求以后得到它的名称,得到它的一个默认的一个图片,你也可以自己去什么是不是指定图片,这些图片都是我自己指定的。
06:12
你说这个图片从哪来,你去访问这一个这一个库所对应的网址,对应的主页,是不是就可以找到他主页上面的那个图片,当然可以想办法都可以啊,接着点击添加就会进入这个里面啊,我这个里面呢,有一个设置,设置以后有一个这有一个生成,有一个恢复什么呢?生成呢,就是把我的配置,把我添加的这些网址啊,点一下以后,它会保存起来一个文件嘛。那我把这个文件发给大家,你们要做什么?你们这点恢复能理解,不恢复就加载这个文件。你点就都有了,就大家都一样啊,但首先你得装这个插件,这是一个插件啊,这个插件挺好用的,还有这里面有背景,你可以换,点这个大风车这个背景就可以换啊,就挺好用的。
07:12
啊,等会儿后面我发给大家,大家不用着急。啊,这个呢,大家大概有一个了解就行啊,诶还是说一个事情啊,就是就是国内的那些不是双核的吗?他怎么选择呢。就是嗯,什么时候用用webpa,什么时候用China了,大家知道IE它的它那个有一个就是针对那种跟钱有关的银行啊,你想想很多银行都支持IE,你要别人浏览器访问,它都不支持。有的有的那个银行就在了。啊,它的安全性相对好一些,那平常的时候如果你不涉交钱。那就是运行的是什么呢?它就自能选择会运会找这个webpa的运行,那如果一旦涉及到钱了,它就会切换了什么。
08:09
能懂吧,啊这是智能内核嘛,双核双驱动。好,下面这个是关键,前面都不太重要啊,这个说的是内核是一个比较大的程序啊,一个内核是一个比大的程序,非常复杂的一个程序啊,它里面。那一个大程序是了很多代码,它又会分为不同的什么呢?模块分成很多不同拈做不同的事情。那这里面我们就把一些重要的模块跟大家说一说,大概说一说,这个大家能懂啊,譬如说有一个模块叫GS引擎,诶这里面说一个什么是JS引擎呢。谁引擎就是引擎。市场风险。程序也是代码,它也是代码,能不懂,说白了它也是程序,只是这个程序它是用来解释我们写的代表的程序。
09:13
我们就把它称为隐形。有不懂。也就是说,我们写的代码是不是依赖它来执行,我们就把它称为什么JS引擎。那也就是说GS引擎是不是在浏览器内部就有的?浏览器里面有没有JS音,有它的内核里面吗?内核是不是JS那个我们浏览器的功能整个一个部分呢。首先是有浏览器,浏览器是一个很大很大的程序,它里面是不是有内核,就相当于是内核是吧,它内核里面是不是有很多模块,而这个里面我们就说的是有一个什么JS引擎,它负责什么呢?CS程序的什么边域以什么运行?
10:05
还有什么模块呢?看到HTMCSS文档解析模块。是干嘛的了?首先我要问大家,现在我去访问百度。我用浏览器输入百度的地址。是不是展现了一个网页,那我问大家最先浏览器得到的是一个什么东西,到底啊,浏览器得到的是个什么?是不是一个HTM格式的一个文本?是不是,甚至还有CSS的文本,对不对,能不能懂。能懂吧,首先得到说白了就字串是不是你打开你右键那个页面,是不是看到之后就是一个大的一个文本啊,这个大的文本可以是X也可以是不是CSS啊有那你在想。
11:04
首先我最终展现的是不是非常好看的一个界面。是吧,那这个就得有个过程啊,有个过程。什么过程呢?首先我得是不是读取这些文件,要不要读要读这些文本。还要拆解,要不要拆解?知道什么叫拆解吗?你想文本它是不是,它是不是有格式啊,是有特定格式,什么玻璃,什么什么day,什么hand是有没有有的吧,你是不是解析,他们要不要解析,解析实际上就是根据一定的规则对他们进行什么拆解。啊,这个时候就要用到一个模块叫什么呢?HTMCSS的解析模块。负责页面文本的什么呢?解析好,下面还有一个叫DOM与CSS的模块,也就是说大家想想,最终你我问大家一下。
12:09
你说页面的绘制,页面的显示是根据什么显示的?因为怎么显示啊,你怎么知道要显示个按钮,怎么样显,怎么知道要显示一个输入框啊,看什么来显示啊。嗯,知道吗?就页面里面。这个都得知道啊,我有一个,我显示了一个输入框,右边是一个按钮,那我咋知道要显示一个输入框,我咋知道要显示一个按钮呢。那解析完了就写字啦,不是。大家知道我们再去访问浏览器,你看这里天天说啊,举个例子啊,这里面都没有,我就用它吧,F3。不用管它,就这个大家看着这个里面是不是显示的是当前大家看着啊。
13:06
当前实际上是我的整个页面,整个页面的结构,是不是我们打开它,我们去输出多门啊,就直接写多回面了吧,也不用写,大家看这是不是显示了一个对象,而这个对象多亏包含了什么东西。它其实内部结构是这个结构吧,是这样的东西吗?其实不是,其实不是,这不是这个里面其实它一种一种友好的方式展现给你看的,大家知道我们内部是不是有个document对象。是吧,而do对象里面有是不是有我的element的对象有没有,而element实际上是不是HTM那个标签的element是不是啊,而我这个animal里面是不是有汉爱的。有没有有接着还有什么是不是玻璃对应的M的,说白了我们说内存里面是不是一个光对象数啊。
14:10
忘了吗?就整个结构,整个我们页面在内存的结构是个多对象数。是还是不是是。啊,是一个多么要数肯就是很多个对象对吧,好,那我就问大家这个地方。啊,我们最终是不是开始开始得到的是一些文本吧,是一个非常大的一个文本,S开文本,那最终我们的页面显示可不是直接根据这个文本显示的,那你想嘛,我根据文本怎么显示画了个页面呢?我要根据什么来显示,根据内存的对象结构,对象是不是存了很多数据,也就是说我一个element里面。我一个安对象,一个标签对象里面是有很多数据,大家觉得会有一些什么数据?
15:03
会有一些什么数据?你说会不会有我的包度,有我的要显示的宽度有没有有有没有我我的那个位我的我的。有没有有我的那个对象里面是包含了我需要显示的一些信息啊。能不懂就说白了,我们的页面怎么显示的,是不是根据这个对象内部的数据来显示啊,那现在我们要把文本解析后,最终要生成一个什么?生成一个一个的对象,说白了我看到一个P标签,那我是不是生成一个P标签所对应的对象,我看到一个div标签,最终我是不是要把它转换成一个什么?Div的对象。能不能理啊,OK,那这个时候我们就需要这些东西,DOM和CSS的模块,他们负责dorm和CS在内存中相关的一些处理,最终要把它转换对象。
16:13
好,有了对象以后,我们刚刚说了,最终页面是不是要显示一个效果呀,到了这里效果显示出来了吗。有没有,还没有,就光生成的对象还没有显示,还需要有特定的拈,这个地方叫布局与渲染拈。你说这布局是用来干嘛的?布局模块是不是来确定我这个元素,这些标签对应要写在哪个位置?说白了,有一个这是我的页面,这是我的界面,我有一个input可能要显示这里,是不是也可能要显示在这里,是不?我要确定它的一些坐标要不要啊,要我要不要确定它要显示的宽和高要不要啊,要那你说有了有了坐标,有了宽和高,最终我们要做一件最终最终要做的事情,渲染,我说老师,什么叫渲染,渲染到底是啥呀?
17:17
简单来说就是要画到你的上面去,怎么画到你啥了,你说我你你们看到的这个界面是是什么东西啊。他说你屏幕上看的这个东西是什么?是不是一些像素点呢?能懂不?是不是啊,是,那也就是说大家看到这里举个例子,譬如看到这个,这是个什么,这是不是一个小图标按钮啊。是吧,是不是是的,那这个地方我要把它将它绘制出来啊,这个就叫绘制渲染啊,OK,那我平我怎么知道要混成什么样子呢。
18:01
对不对,我怎么知道要显示什么东西呢?得看它所对应的那个元素对象啊,元素对象内部保存的是一些什么数据。譬如说我要是个image。那你说他读什么数据去啊,他那是不是得读他的src啊,找到他的图片吗?找到图片够了吗。不够,可能还要去看它歪的。是不是可能还要去看它什么hit来决定我这个图片到底显示多宽,到底显示多高。是吧,那下一步我就根据这些数据是不是喷了一下去点了。往你的屏幕上面再喷那些像素点懂不懂原是老师,那他能喷那么准确吗?这就不是你要关心的事。
19:00
你都关心到这上面去了,那那也太细了啊,你不用担心,他到时候投射那个像素点投射的不准确,这个不是你要关心的了。看,你只要知道它是依赖于依靠什么东西来做的,对不对,也就是说我要将这个元素显示出来,它看什么东西,就看我内存里面的那些对象,它内部的数据。信息。看最终我们的布局渲染模块负责页面的布局以及效果的什么呢?有一个概念叫绘制,它的参照的就是我内存中的什么,那些多元素,他们的对象。这个大家需要慢慢的去理解他们啊,其实这些东西能帮助大家去知道一个页面它是怎么出来的。啊,而这些这些模块都运在哪个线程呢?主线程啊,都运行在主线程,那是不是所有模块都运行在主线程的不是。
20:10
那还有一些非线程运行的模块,譬如说诶,这里面有个概念叫定时器模块。啊,定时器呢,负责什么呢?定时器的管理,也就是说我们还记不记得,我们可以比如假设setout是不是指定了一个回调函数。是吧,啊,直接回答数,其实后面我们还是不是指定一个时间,假设1000毫秒。那为什么1000毫秒他就能执行呢?是不是这个东西其实后台是有管理程序的。而这个管理程序,我们把它称为什么呢?定时器模块,它们本质上是运行在分线程的。有人可能就说,老师,你这个定时性管理模块运行在分线程,是不是代表我的这个函数,这个回调函数是运行在分线程呢?
21:04
是吗?啊,不是的,我们前面说过,刚才说过一句话,我们的GS代码是运行在什么线程啊,就以单线程代码,那现在单线程嘛,运行在哪个线程主线程。这体怎么弄呢,后面再去说啊,还一个事件响应模块,它也是需要,也就是说我们给一个按钮加了一个监听,我们一点那个监听毁掉是不是就执行。是吧,你觉得理所当然,哎,就这么回事,就应该执行。但是这个理所当然的背后,它也是需要有管理模块。啊,而这个管理模块本身,它也是在非线程执行。好,下面一个这个呢,大家可能以前没学过啊,网络请求模块负责请求,这个请求是什么请求,大家也不太懂啊,现大概知道一下啊,现在大家先不用管这个啊,这两个大家应该是知道的,就是定时器模块和事件响应模,这个是多姆事件响应模块,多姆事件。
22:16
这个指的事件是动物世界啊。这两个大家应该是有点感觉的,因为针对的是我们学过的知识。而这些呢,它是运行在分界层的。这都是一些理论的概念,这些理论概念大家先回缩离听啊,后面讲了以后呢,大家再回过来看一看。这个重要性比前面的要大一些。
我来说两句