JS运行原理与机制（乾坤未定，你我皆是黑马4-5）

上一篇讲的是js小游戏
实践了面向对象编程----------易于理解
我们记得小鸟、天空、管子就能记得这个游戏是怎么写出来的

js原理与运行机制

浏览器的渲染进程

进程与线程
进程是cpu资源分配的最小单位
线程是cpu调度的最小的单位

线程是进程的一个小老弟，大哥有一片天下，一群小弟都可以通过大哥呼风唤雨。单线程就是只有一个小弟，太不装逼了。

浏览器有好几个进程，有好几片天下需要打理，我们做前端的生活在这个渲染进程
渲染进程咱们起个名字叫山大王，说山大王有一堆小弟，其中喊得上名字的有这几位：GUI渲染线程、Js引擎线程、事件循环线程、http异步线程、定时器线程，他们并称峡谷5瓜。
先来说上单GUI,这个b会画画，你写的页面不好看那都不能赖代码，都是这个b绘制页面的时候接电话去了。

首先浏览器会解析html代码（实际上html代码本质是字符串）转化为浏览器认识的节点，
生成DOM树，也就是DOM Tree
然后解析css，生成CSSOM（CSS规则树）
把DOM Tree 和CSSOM结合，生成Rendering Tree(渲染树)

啥意思呐？就是说，把html、css的代码拿过来，全是字符串啊，这玩意直接扔到页面上估计身为教练的你当场引咎辞职。
这个时候上单站了出来，他说，我认识字，而且会画画，它把html先变成dom树，把css变成规则树，然后放到一起练成渲染树。最后调用paint方法，开始画画…
如果我们使用js修改样式或者dom就会…重绘、重排，上单就得重新工作一遍。

上单不爱看小地图，所以不知道打野都在干嘛，所以打野gunk之前会发个信号，让上单别着急上，等自己大招先手。毕竟这个队伍是野核，所以都是在给打野打工。

中单-----事件循环线程

事件循环线程用来管理控制事件循环，并且管理着一个事件队列（task queue），
当js执行碰到事件绑定和一些异步操作时，会把对应的事件添加到对应的线程中
（比如定时器操作，便把定时器事件添加到定时器线程），等异步事件有了结果，
便把他们的回调操作添加到事件队列，等待js引擎线程空闲时来处理。

中单这家伙是个绝世美女。
打野说让adc先打着红buff一会儿自己过去收，
于是中单通知adc，滚去打红buff，留一丝血，一会打野爸爸来收。
如果打野直接跟adc说，那么adc当成甩脸子，打野立刻尬住。
但是中单不一样，肌白肤美大长腿。

辅助-----定时器线程

由于js是单线程运行，所以不能抽出时间来计时，
只能另开辟一个线程来处理定时器任务，等计时完成，
把定时器要执行的操作添加到事件任务队列尾，
等待js引擎线程来处理。这个线程就是定时器线程。

打野买不起手表，
于是让辅助天天数手指头，
时间一到，辅助就给大野写个任务条，
打野每次忙完手头的事，就会按顺序看这些任务条，

adc------异步请求线程

当执行到一个http异步请求时，便把异步请求事件添加到异步请求线程，
等收到响应（准确来说应该是http状态变化），
把回调函数添加到事件队列，等待js引擎线程来执行。

打野不一定每次都打红buff，有时候也打远古生物！
其实打野不一定打不过…
没事，交给adc，性感打野泉水指挥！
让adc去开脚本（跟后端交互），使用全图视野，
拿到信息之后，写个条上报给打野，
打野路过收走adc费时费力的工作成果

左边就是队霸，打野同学，他说adc，你去打红，所以中单大美女就去找adc，
adc打完之后，给打野也个条，“红buff还有一丝血，快来”，
于是打野忙完手头的事，就来“拿”红了

定时器

当下的辅助有两类：硬辅setTimeout()和软辅setInterval() 软辅恶心，来来回回的，但是人们不喜欢软辅是有原因的！

软辅会天天会粘着打野，搞得打野很烦，当打野忙不过来的时候，就会不屌他！

JS运行原理与机制（乾坤未定，你我皆是黑马4-5）相关推荐

乾坤未定你我皆是黑马 | 猿代码
曾经年少立志三千如今踌躇百步无寸功懵懂半生庸碌成尘转眼高堂皆白发儿女蹒跚学堂中碎银几两催人老心乃少,皱纹却上眉中浮生醉酒回梦里青春人依旧只叹时光太匆匆子成人父,方解油盐非易事 ...
激励自己的短句文案乾坤未定你我皆是黑马
1.不要因为没有掌声就放弃梦想. 2.别人都在前进,我为什么要停下. 3.要么出众,要么出局. 4.没有合格的黑夜,也就无所谓真正的黎明. 5.你会有不期而遇的温暖和永生不息的希望. 6.星星发亮是为 ...
软件测试工程师应该怎样规划自己?成为年薪30W+测试工程师（乾坤未定，皆是黑马）
今天在知乎上被邀了一个问题,软件测试工程师应该怎样规划自己?16年毕业,技术方面已经渣到不行,因为之前的公司没有Python自动化测试这个要求,有些迷茫.我把我的问题回答贴出来希望可以帮助到更多有类型 ...
【知乎高赞】软件测试工程师应该怎样规划自己?成为年薪30W+测试工程师（乾坤未定，皆是黑马）
今天在知乎上被邀了一个问题,软件测试工程师应该怎样规划自己?16年毕业,技术方面已经渣到不行,因为之前的公司没有Python自动化测试这个要求,有些迷茫.我把我的问题回答贴出来希望可以帮助到更多有类型 ...
乾坤未定，你我皆是黑马！
朋友是一位五年的资深Java开发工程师,先前我是迷茫的,他告诉我:乾坤未定,你我皆是黑马!特别建议我年轻的时候去技术性公司闯一闯,他说,才毕业出来,如果真的还没有想好往某一方面发展,那更建议往技术方面 ...
Vue.js 运行原理解析、vue源码剖析
Vue.js 运行机制全局概览全局概览这一节笔者将为大家介绍一下 Vue.js 内部的整个流程,希望能让大家对全局有一个整体的印象,然后我们再来逐个模块进行讲解.从来没有了解过 Vue.js 实现 ...
JS基础（乾坤未定，你我皆是黑马4-2）
上一篇呐就是纯粹为了跟js见个面不知道上手是不是搞得有点上头这篇来讲JS基础语法,小白(不会闭包的)可以认真看一下这篇介绍了JS语法.打印99乘法表.数组去重.数组排序****js知识点罗列学 ...
JS实践（乾坤未定，你我皆是黑马4-3）
上一篇后半部分写的不好,就是浅显的罗列语法.排序,下周补充其余6种- 这篇讲了几个js案例:开关灯,汉字自动播放,轮播图看完之后你能学会dom操作以及成就感. javascript 原生方法对dom ...
js高级---js运行原理
概述浏览器组成可分两部分:Shell+内核.浏览器内核又可以分成两部分:渲染引擎(layout engineer或者Rendering Engine)和JS引擎. 渲染引擎功能作用渲染引擎,负责对 ...

JS运行原理与机制（乾坤未定，你我皆是黑马4-5）

JS运行原理与机制（乾坤未定，你我皆是黑马4-5）相关推荐

最新文章

热门文章