WolfDu后山 | wolfdu.fun

[wolfdu]

https://wolfdu.fun/post?postId=5a712cb4b890b156d0fae64d

在学习过程中总是会遇到一些好文，本着奇文共赏的原则分享于此。同时我也会记录相关的笔记，以免如此好文如同快餐，便于日后翻阅思考。

原文文章请猛戳对应标题！！！

各主流浏览器内核介绍

简述了各个主流浏览器内核的演变以及一些冷知识。
什么是浏览器内核？
浏览器内核一般分为两部分，渲染引擎和js引擎。

• 渲染引擎(WebCore)：负责渲染页面结构样式，不同的渲染引擎渲染的效果也会有不相同。
• JS引擎(JSCore)：解析JavaScript语言，执行实现网页动态效果

最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。

常见的浏览器内核有哪些？
常见的浏览器内核可以分这四种：Trident、Gecko、Webkit、Blink。

Trident：IE内核，呵呵呵~
Gecko： Mozilla FireFox(火狐浏览器)使用该内核，开源内核
Webkit：Safari 使用该内核，拥有清晰的源码结构和极快的渲染速度。
Blink：使用的内核被命名为 chromium，chromium fork 自开源引擎 webkit，却把 WebKit 的代码优化了很多。谷歌公司还研发了自己的 Javascript 引擎，V8，极大地提高了 Javascript 的运算速度。而Blink 其实是 WebKit 的分支，并且在不断的优化。

波神的事件循环机制

帮助理解JavaScript中setTimeout，promise等函数执行顺序，前端很有必要一看！！！

• 我们知道JavaScript的一大特点就是单线程，而这个线程中拥有唯一的一个事件循环。
• JavaScript代码的执行过程中，除了依靠函数调用栈来搞定函数的执行顺序外，还依靠任务队列(task queue)来搞定另外一些代码的执行。
• 一个线程中，事件循环是唯一的，但是任务队列可以拥有多个。
• 任务队列又分为macro-task（宏任务）与micro-task（微任务），在最新标准中，它们被分别称为task与jobs。
• macro-task大概包括：script(整体代码), setTimeout, setInterval, setImmediate, I/O, UI rendering。
• micro-task大概包括: process.nextTick, Promise, Object.observe(已废弃), MutationObserver(html5新特性)
• setTimeout/Promise等我们称之为任务源。而进入任务队列的是他们指定的具体执行任务。
• 来自不同任务源的任务会进入到不同的任务队列。其中setTimeout与setInterval是同源的。
• 事件循环的顺序，决定了JavaScript代码的执行顺序。它从script(整体代码)开始第一次循环。之后全局上下文进入函数调用栈。直到调用栈清空(只剩全局)，然后执行所有的micro-task。当所有可执行的micro-task执行完毕之后。循环再次从macro-task开始，找到其中一个任务队列执行完毕，然后再执行所有的micro-task，这样一直循环下去。
• 其中每一个任务的执行，无论是macro-task还是micro-task，都是借助函数调用栈来完成。

看完这个总结一脸懵逼吗？那你有必要看看上面的文章了(•‾̑⌣‾̑•)✧˖°

JavaScript Promise迷你书（中文版）

一本值得反复翻看的Promise小书。
该书会告诉你如下内容：

• 学习Promise相关内容，能熟练使用Promise模式并进行测试
• 学习Promise适合什么、不适合什么，知道Promise不是万能的，不能什么都想用Promise来解决
• 以ES6 Promises为基础进行学习，逐渐发展形成自己的风格

Promises作为nodejs核心基础知识能不好好学习学习吗？

「每日一题」MVC 是什么？（续1）

瞧一瞧前端MVC是怎么一回事吧（如果你只知道Spring MVC有必要一看，别问我为什么这么说 (;´༎ຶД༎ຶ`)）。

• M：用于存储页面数据，并包含数据相关的操作
• V：负责M数据的渲染
• C：负责管理V和M，浏览器事件监听：更新M，数据监听：数据变化更新V

浅谈 MVC、MVP 和 MVVM 架构模式

虽说浅谈实则不浅。我们对MVC架构的理解都是一样的吗？

设计 MVC 的重要目的就是在人的心智模型与计算机的模型之间建立一个桥梁，而 MVC 能够解决这一问题并为用户提供直接看到信息和操作信息的功能。

不论你理解的MVC是什么样子的这三点应该是一样的：

• 视图：管理作为位图展示到屏幕上的图形和文字输出；
• 控制器：翻译用户的输入并依照用户的输入操作模型和视图；
• 模型：管理应用的行为和数据，响应数据请求（经常来自视图）和更新状态的指令（经常来自控制器）；

MVC 最重要的概念就是分离展示层

那么前端和后端的MVC到底有什么区别呢？这个问题值得我们思考。

MVVM演变过程：

PM 模式：将视图中的全部状态和行为放到一个单独的展示模型中，协调领域对象（模型）并且为视图层提供一个接口。
PM 通过引入展示模型将模型层中的数据与复杂的业务逻辑封装成属性与简单的数据同时暴露给视图，让视图和展示模型中的属性进行同步。

Model-View-ViewModel 这个名字来看，它由三个部分组成，也就是 Model、View 和 ViewModel；其中视图模型（ViewModel）其实就是 PM 模式中的展示模型，在 MVVM 中叫做视图模型。

在 MVVM 的实现中，还引入了隐式的一个 Binder 层，而声明式的数据和命令的绑定在 MVVM 模式中就是通过它完成的。

在实现 PM 模式时，我们需要处理视图和展示模型之间状态的同步，也就是 MVVM 中的视图和视图模型，我们使用隐式的 Binder 和 XAML 文件来完成视图和视图模型两者之间的双向绑定。

其中最为关键的是展示模型/视图模型创建了一个视图的抽象，将视图中的状态和行为抽离出一个新的抽象，这才是 MVVM 和 PM 中需要注意的。

以上都是文中的一些点，如果引起了你的思考不妨细读原文。

通俗大白话来理解TCP协议的三次握手和四次分手

跟着作者一起学习，同时自己也多翻阅查看文档，必有收货。
笔记太长我放这里了，请猛戳！！！

TCP 的那些事儿（上）

耗子叔功力之深厚，不仅告诉你是什么而且告诉你为什么。听你的话，静下心来看一本书。
笔记太长我放这里了，请猛戳！！！

前端工程——基础篇

三年前的文章，看了之后才发现自己离前端工程师有多远。
笔记太长我放这里了，请猛戳！！！

你好，工程师。

What happens when...（ 中文版）

看完后你清楚其中那些过程呢？又对那些过程感兴趣？
从解析URL到页面渲染这一系列过程都值得我深入了解：

• 浏览器对URL的解析，HSTS列表检查，DNS查询
• 计算机网路中：ARP过程，TCP三次握手四次分手，TLS握手，HTTP请求报文发送，HTTP服务器报文处理
• 浏览器对HTML的解析，css的解析，页面的渲染、布局、绘制

(;´༎ຶД༎ຶ`)来，我来立下flag看我能理清其中那些过程。

---

若文中有知识整理错误或遗漏的地方请务必指出，非常感谢。如果对你有一丢丢帮助或引起你的思考，可以点赞鼓励一下作者=^_^=

[xzhuz]

赞赞赞！lz厉害

[wolfdu]

@mrmeisen假装不认识我哈哈～～

[moonNights]

我擦，只认识 MVP

[wolfdu]

@moonNights 大佬有失远迎。