前端阶段性总结之「深入javascript」
更新日期:
该篇主要整理javascript的部分深入理解，以及一些分享。
深入理解javascript
单线程与Event Loop
单线程这样的概念，其实本骚年在被问到之前一直是模糊的。
当然这也是因为非科班，对线程、进程这些都不曾真正去了解和学习过，至于单线程，最大的感受就是异步事件、回调等等。
你有想过为什么javascript是单线程的吗？其实更多是因为对页面交互的同步处理吧，具体大家可以参考一下《JavaScript 运行机制详解：再谈Event Loop》。
这里我们需要知道事件循环event loop、栈与队列、主线程等等，当我们继续查阅文章的时候，会涉及到其他的概念如宏任务和微任务。
- microtask与macrotask
关于宏任务和微任务，其实大致有个了解就差不多了，在我们编码过程遇到相关的问题时，再针对性地去研究吧。或者大家也可以看看一些文章：
《理解 js 事件循环二 (macrotask 和 microtask)》
《HTML系列：macrotask和microtask》
思考问题：
- 简单描述Event Loop过程。
- 为什么javascript是单线程的？单线程与多线程的区别？
浏览器机制
身为前端，对浏览器的机制和深入理解，能成为性能优化的一大利器呢。
- 浏览器渲染机制
对于想做简单认识的，可以参考《浏览器的渲染原理简介》。想要深入理解的，可以看《How browsers work》以及译文系列《浏览器是怎样工作的（一）：基础知识》。
这里面有几个概念需要理解，包括：Rendering tree渲染树、CSS规则树、Repaint和Reflow等等。
思考问题：
- 浏览器解析哪些文件，分别会生成什么？
- 渲染树的生成过程。
- 哪些行为会导致Reflow和Repaint？怎么规避/优化？
- javascript在浏览器中的加载
浏览的渲染线程和JS执行线程是互斥的，并且JavaScript默认是阻塞加载的。对于这个过程，相关文章阅读《JAVASCRIPT 装载和执行》、《S一定要放在Body的最底部么？聊聊浏览器的渲染机制》，或者谷歌查询。
对于这个我们会经常遇到一些问题，如：
- 为什么js要放在最后面加载？为什么css放前面？
- js的加载顺序，相关事件（如onload）的理解。
- 优化首屏加载时间？
- 页面的加载过程（从输入Url到页面加载完成）
- 浏览器的缓存机制
- 浏览器的同源政策与跨域
其实上面这些内容更加涉及http相关多一些，但是其实http也是前端的一部分啦。这些统一放到后面http部分一起进行整理吧。
javascript设计模式
关于javascript的设计，其实跟大多数的编程语言都是相通的。很多时候我们都会使用，但是或许我们并没有什么感觉。
只是当项目越来越大，重复的代码或是杂乱的代码总会让我们开始对其进行整理、抽象、封装等等工作，便于拓展也提升了开发效率，同时对项目整体的理解也更加深入了。
这里面本骚年也不想细说，感兴趣的大家可以参考《【Javascript设计模式1】-单例模式》系列文章，当然还有其他文章，找谷歌或者度娘去吧。
其实很多时候我们使用的一些插件、框架和库，里面就使用了很多的设计模式，大家不妨也可以多去了解一下。
结束语
其实仔细研究javascript，总会发现你所不了解的角落。即使是本骚年所认为的深入理解，到头来也只是某个浅尝的部分，越是相处时间长了，越能发现其中的美妙和乐趣吧。
码生艰难，写文不易，给我家猪囤点猫粮了喵~
查看Github有更多内容噢：https://github.com/godbasin
更欢迎来被删的前端游乐场边撸猫边学前端噢
如果你想要关注日常生活中的我，欢迎关注“牧羊的猪”公众号噢