00:01
啊先我们还是来简单的把上一次课讲的东西呢给它过一下啊,上一次课讲的东西不多,我们快速的过一下啊。啊,上一课呢,我们主要是去讲了一下线程机制与事件机制,其实说的是差不多一个东西啊,但首先呢,第一个问题,他其实在说的一个两个概念,一个叫线程,一个叫进程。嗯,大家稍微的要了解一下啊,我们真正去使用就编码去写很少。懂吗?譬如说我们编码的方式去创建一个进程,是不是大家也没做过呀,因为在JS里面也不做这种事情啊,OK,但是呢,这些概念大家理解,对大家以后的学习呢,很有帮助啊,这个我就不要一个一个的去给大家去说了啊,下面一个浏览器内核模块组成,这个大家还是要去重点看一看,因为通过这些模块大家应该需要去知道一个什么东西呢?知道一个浏览器如何来去将一个网页文本。
01:12
展示在界面上面。那也就是说我们打开浏览器看到了一个界面,看到一个界面,它实际上是不是有一个过程呢?啊,假设就以这个界面为例,这是一个界面对吧?那这一个界面最先的最先它是一个什么呀?它不就是这样的一个文本吗?对不对,那这些文本怎么才能最终显示成这样一个样子啊,它其实是有一个漫长的过程的。而这个漫长的过程其实就涉及到这些拈。啊OK,这里面有几个,我大家再过一下啊,这些模块呢,有主线程运行的,也有什么分线程运行的,在主线程运行有第一个GS啊引擎,也就是说为什么我们的GS,我们写的JS是在主线程运行的。
02:14
是因为是不是它的引擎来去解析执行我们的代码吗?那如果它的引擎是在主线上运行的,是不是就能说明我们的GS代码是在主线运行的?啊,但前提啊,我们没有用那个webwork对不对。嗯。JSS引擎他负责两个事情啊,负责两个事,一个是首先他第一步先要将我的代码进行什么是编译啊,你说我怎么没看见呢,这个不需要你看见啊,这个变异发生在什么时候?变异发生在什么时候?你你我们有做什么操作去编译了吗?没有,他是在运行之前动态进行编译了,他跟我们有的人可能学过Java,你就知道啊,如果你是Java代码,那就是说会生成一个点Java的文件,这一个文件他不能解析执行,它必须先编译成什么呢?Java c好像是什么class啊。
03:22
编译成class文件啊在才能解释执行,而我们呢,GS代码它不太一样,它是将编译和解析和运行放在什么,是不是一起做的呀,都由谁来做,是不是引擎来帮我们做呀,啊就是这么回事。好,下面涉及到一些模块,HTMCS文档解析模块,也就是说用这些模块来干嘛呢?简单来说就是来去读取并分解我这个页面文件。
04:00
你他要拆解嘛,因为这些文件是不是都有一个特定的格式。你想最终我们这些是不是都会被分解出来啊,因为只有分解以后,我才能进一步的去读取它内部的数据吧。我要分解这个文本,那怎么读你内部的数据呢?啊,这是这一个。下面一个就是这个。也就是他啊DOM和CS模块,他要干嘛呢?他要将我们刚才分解的一个一个的小串啊,把我们整个大的文件,刚才已经被分解成了很多个小的块。那要根据下面要跟这些小块去干嘛,生成对象。也就是说,我们最终假设我们这里要有一个P标签,那是不是要去生成一个P标签的M的对象?也就是元素对象对不对。能不能懂啊,这个一定要能懂啊,就是一个P元素对象,也就是说我们内存里面,我们经翅说多姆,它是一个什么什么对象叫是不是DOM数对象。
05:10
是个动数吧,啊,什么叫数,而且它是个倒立数,什么叫倒立数,它先有一个根对项。我们讲叫做document可以吧,可以,而document下面有什么啊,他的第一个孩子,他的直接孩子是谁?是不是我那个标识我的HTM标签的那个animal的对象啊?是不是这个一定要懂啊,这个结构一定要非常懂,好,接着它的下面有什么,是不是有hand是吧?Hand是不是也会生成一个标签对象,还有什么玻璃,每一个标签都会生成一个对象,而且对象里面是不是有一些特定的数据。啊,OK,而这些数据从哪来?就读它读出来了呗,好,下面那也就是说有了这个模块执行后,我的对我的内存里面是不是生成了N多的光源对象。
06:13
啊,那现在显示出来了吗。有没有显示出来,没有那一个P标签,一个div,怎么样显示出来了。首先得确定它的位置和它的尺寸。能不能懂得确定它显示的位置,以及它的尺寸,我们这个东西叫什么,是不是叫布局啊,能理解吧,还有一个下面有了布局还没有出来,你最终要做一个操作,就什么渲染,有时候也叫什么绘制。这个会议就是譬如说我的这个吊边有没有被颜色呀,是不是有可能有。能理解吧,啊OK。
07:02
这是这两个叫布局渲染拈,他们负责我们页面的布局以及效果的绘制,这个绘制是根据什么来绘制的?就是根据我们内存中各个动物元素对象来一个一个对应绘制的。这是大家懂的,非常关键啊,你想嘛,你就专门研究这个东西的,你连他的一个基本行为,基本流程都搞不清楚的话,其实是很很恐怖的。好,下面有一些啊,这一次我们要研究的一些东西,就是它有一些分线的执行的拈,我们都把它称为什么模,是不是一些管理拈,对吧?啊,我们学了两个,一个叫定时器的管理模块,还有一个是什么,是不是什么世界多姆世界。能不能理解啊,OK,他们也就是说我们真正的定时器要想能够去定时执行,我们的动物世界要想能够触发,没有他们行吗?不行,我们这些事件,我们这些对应的一些东西,是不是都有一个概念叫回调函数啊,回调函数它是不是异步执行了,是的。
08:18
啊,这个地方一定要知道,我们这里说的异步执行是什么概念,其实很简单,它就不是我们的初始化代码,我们说过了,我们执行的顺序是先执行初始化代码,再执行什么回调函数,而且那个债是有可能才有可能,对不对,也就是说要到了一定的时机或者事件触发的时候,是不是才执行呢?啊这种我们称为一个异步的。好,这个先搞清楚了,搞清楚以后呢,下面我们要说GS的线程JS是一个什么单线程执行的,这里面强调的就是回调函数,也是在哪个线程执行主线程。
09:02
这个说的是我们H5出来之前啊,确定之前在H5里面呢,它提供了一个多线程的实现方案啊,名称呢,取了一个统一的概念叫works。啊,这个要知道这个概念,因为别人一说你不知道。那也不行啊,虽然说现在在工作中用的少,但是因为它是个新出来的东西嘛,所以说有时候面试的时候,由于问题。好,这是这一个那里面的,其实具体语法其实并不是说特别特别重要,下面有一个东西。这里面有一个最终的概念,只能是主线程来更新界面,那也就是说,即使有了web bos,有了分线程,分线程能更新界面吗?不能。如果你能知道为什么可能更好一点啊,是你能跟人说清楚,为什么它就设计成只有主线程的更新界面,而不设计成分线程也可以更新界面呢?
10:06
对吧,你就想如果分线程可以更新界面,那是不是说明了可以有多个线程去更新界面。那这个时候就容易出现问题,你把那个例子举出来,我跟大家举个例子嘛,就两个线程去操作那个P标,P标签是不是一个线程去更新,一个线程去删除。那就有可能出现操作错误的情况。啊,这是这一个下面呢,有一个定时器的问题,首先我们知道定时器能真正完全保证定时吗?不能,那什么时候就会被延迟呢。对吧。你现在总结一下啊,什么时候就会延迟啊。对吧,当我的那个当我首先我第一步我假设启动了定时器,我先定下代码,启动了一个定时器可以吧,什么叫启动定时器,写写什么代码启动定时器,你把我这句话转换为代码怎么转。
11:16
是不是set time out呀?如果启动定时器之后,如果后面的程序的主线程上面执行的初始化代码执行的时间超过了。超过了我的定时器指定的延迟时间,譬如说我直接延时时间是100毫秒,但是我后面的程序需要200毫秒。那你说最终我的生日太是多长时间才执行?是300 200 300。我set timeout是100对吧,但是呢,我后面要执行200毫秒,请问最终它执行的时间是100,是200还是300。
12:12
这不白学了吗?到底多少?300来怎么来的,200加100这很正常嘛,是吧,就200加100就300嘛,小学生都算得出来是不是。这是200,本来他应该是在100以后执行的,对不对,由于我执行了100,执行完了吗。果100后面的100毫秒执行完了,是不是就刚好可以,如果我后面要执行的时间是100,有影响吗?我后面的代码要执行100毫秒,有没有印象?没有那不刚好吗?对不对,那就刚好。
13:01
你不要被那个我们我们那时候说过alert alert也不一样啊,我没有去讲那个alert对不对,Alert它因为它如果有lert的话,那就不一样了,对吧,因为热的做了一个什么事啊,暂停计时。我刚刚才没说这个概念吧,没有去说这个概念能不能理解啊,OK,那如果刚好是100,那刚好不止不完,对不对,那如果我这个。我这一个100,我100个不要,我这50,那是不是50秒,50毫秒就执行了是吗?如果我就要,我就只有执执行50就到了,他是不是变成50啊不是至少是100。能不能理解,至少是100,如果你后面的消耗的时间超过了我的100。那就按在你的时间之后了,这很正常嘛。
14:05
这个大家应该要知道啊,好,下面就要去说到我们的事件处理机制,其实就是那个图啊,首先我们得把代码分成两部分对不对?哪两部分?一个叫初始化执行的代码,一个叫什么回调代码,那回调代码是不是就是回调函数中的代码,那回调函数是不是在初始化代码中指定的?能不能懂在初始化代码里面指定代表那个回调函数执行的吗?没有,也就是说我在太码out,我假设延迟的时间是零,是代表我的函数回调函数题立即执行吗?不是必须保证什么初始化代码先执行完,才有可能去执行毁掉代码。这是一个固定的逻辑。
15:02
永远不会变啊。只是说初始化代码里面有一些特别的代码,可以说绑定动时间,监听,设置定时器,包括我们后面要说的一个东西,发送和请求啊,这个里面都会去指定一个概念叫毁掉函数。那这些里面毁掉函数的代码就是毁掉代码啊,他们是亦不执行的。啊,刚才已经说过了,流程下面我在那个模型里面最重要的两个部分,还记了一个图吧,我们再给大家画一遍,整体就是整体结构啊,就是左侧有一个,就下面有一个,你就记住大先把整体结构搞清楚,这个部分实际上指的是我的两个结构,一个堆一个什么在。还记得吧,而这个右边是什么?是不是管理模块,而我们现在是不是学了两个管理模块,一个多姆事件的管理模块,一个什么,是不是定时器的管理模块啊,OK,下面是什么回调队列是不是一个容器啊,它队列有个特点叫什么?
16:19
对应列的特点是什么?先进先出,也就是说我从这边进来,是不是每次都放到后面了,那哪边出去是不是左边出去啊?那不就是先进先出吗?也就是说我事件一发生,定时器到时了,它的管理模块是不是就会将回调函数塞到这个队列里面来塞,是不是有先后顺序的,先塞的应该什么先执行,这很正常的嘛,这就应该嘛,是不是?这个里面所有的回调函数是不是都是待处理的回调函数,你待处理也有个先后优先级嘛,优先顺序嘛,对不对,谁先进来谁优先,就这么个事嘛,对不对,能不能懂好,但是我们说过了,我们首先得要执行什么是初始化代码,执行完了以后才能去循环便利,我们这个回调队列里面所有待处理的回调函数执行吗?而且是一个接一个的执行,对不对,对的吧。
17:34
啊,这个里面啊,这个结构我们是不是以前学过是吧,而新的两个结构,一个是管理模块,个是我们回调队列啊。它的基本流程其实非常简单,执行初第一步执行初始化代码,在这个过程中,有可能需要将事件回调函数交给对应的模块进行什么管理。
18:03
好,下面一个,当事件发生时,我们的模块就会将回调函数以及数据放哪去回到队列里面,当初始化代码执行完后,记住了,只有这一个,执行完后可能是不还需要一定的时间,对吧?财会干嘛去?有个概念叫什么电力,那个英文单词怎么说的还记得不?对,Loop。记单词大家最好能认识。啊,变异读取回调证件中的回调函数去执行,其实想明白了,很简单的,说实话并不难,你说有多复杂也不至于。我还是说这语言,尤其是像这种,嗯,上层的语言啊,封装性比较好的,譬如Java JS啊,甚至是甚至说更更简单,就是XTCSS啊,对吧?啊,这些东西大家都是用点心思肯定都能学会的,再花点时间大家就能成为大神。
19:08
大家不要笑啊,大神你们不远是吧二。好好来,最后有一个就是H5的外呼,这个呢,其实基本上在面试中才有可能被问到啊,工作中用的少,当然扩展一下自己的眼界还是可以的,就知道可以去用它来去实现什么多线程,其实它的API特别简单啊,无比的简单。首先有一个构造函数叫什么worker,它的实例呢,可以调用两个方法,一个叫什么on message,用来接收。数据的毁掉函数是吧?还有一个是什么post message干嘛呢?发送数据,也就是说既然是多线程嘛,那就涉及到一个线程向另外一个线程什么发送数据,发送数据它是不是要记啊,记完了以后,它处理完了是不是要返回,返回你这边是不是要要记啊,那也就说你既要发消息,还有什么接收消息,我要发消息用什么方法post message,我要接收消息了,On message,还有一个我怎么样取到里面的数据呢?Even呢?点什么date,其实说来说去。
20:30
测起来四个API对吧,四个东西构造函数吗。这是一个对不对,一个啊post麦一个,还有一个就是even的点什么,这还是很简单的。至少说我们学到这个程度是比较简单的。好,下面说work类的代码,也就是分线的执行代码,能操得动吗?为什么?为什么?其实非常简单的一句话,他看不到所window,你想想看,连window都看不见,它怎么可能更新界面呢?界面是不是丢在窗口里面,连窗口都看不见,你想看,你还能操作窗口里面东西吗?
21:15
不可能就一句话就能搞定的事。好,下一个呢,就不是所有浏览器都支持这个新特性,对吧,还有这个呢,大家以后可能接触过跨域可能会更清楚了,现在可能还不是特别特别清楚,到时候我们会讲的啊,主要是这两点大家需要知道。行,那这个呢,嗯,我们就先讲到这里啊。
我来说两句