前端基础Javascript（JS概述+JS执行机制+浏览器内核）

前端开发基础（js篇）

欢迎来到我的第一篇前端笔记

你好！ 这是我第一次决定好好整理一套完整的前端学习笔记，在前端学习的过程中我发现，单独拆开每一个知识点都没有那么难，但是如果不对学习的知识加以总结复习，很可能会出现多个知识点遗忘，搞混之类的问题，所以一定学习新东西的同时对旧的知识点加以温习，我也将在csdn上把这段时间的学习内容以及后续的学习内容持续记载在这里

前端学习路线

我是大学的时候接触了前端，大概掌握了（html+css+js），但是学的也很混，毕业设计是抄的一套小程序的代码敷衍了事，到现在刚好毕业一年，工作以后开始接触Python和文档类的工作，但是我觉得目前工作岗位受众面太小，技术壁垒低，在我离开这家公司后，并不能让我找到一个理想的岗位，又加上我确实喜欢前端这种反馈性强，可以随时看到自己编写的图像的语言，所以我决定再捡起这门技能，说是捡起来，其实之前学的基础也很一般，所以这次也就是从零开始，慢慢从小白成长。

我这边给自己制定的学习路线是html，css，js（ecmascript，dom，bom），前端网络，css3，html5，es6，vue的学习路线，从左到右依次学习，截止到这篇文章，我也是刚刚完成了js的学习，所以决定将js部分从头再捋一遍，记录笔记。

我是看网课学的，然后都是一边看一边用sublime记录笔记，部分代码跟着实现去体验效果这部分，整理笔记也是以我之前的记录为主

正文开始

JavaScript概述

前端，一个网页的实现需要多个语言的相互配合，html搭建出结构，css在html搭建的结构基础上，进行美化，设置样式，而JavaScript则是实现了网页的各项功能，如最简单的鼠标点击等用户交互功能，是最重要最基础的一部分。

首先要知道，js是解释性语言，计算机智能理解机器语言。采用高级语言写的程序代码若是想要呗计算机执行，必须将高级语言先翻译成机器语言，这个翻译过程存在两种方式，一种是编译，一种是解释。

JavaScript就是解释性语言，其特点是运行一句代码就翻译一句，不生成额外文件，效率偏低，可以跨平台。同样为解释性语言的还有php，python等，编译性语言则是一次性将代码整个翻译成机器语言，形成执行文件，运行时候调用执行文件，因此效率会更高，缺点则是生成的执行文件不能跨平台使用，比如在windows写好的代码，在linux就用不了，常见的编译性语言c，c++，java等。

JavaScript是三个东西的总称，是ES+DOM+BOM：
ES就是ECMAScript，ECMA是一个标准，为了统一规格。

DOM是操作文档的，也就是Document的缩写，通过操作DOM我们可以直接去修改html，css的内容，DOM能直接去修改html，间接的修改css。

BOM则是操作浏览器的。

JavaScript执行机制

js是单线程的，同一时间只做一件事情，js作为浏览器的脚本语言，主要是用来和用户进行互动，以及操作dom（文档），因为这种特性，导致js必须是单线程的，如果js同时拥有多个线程，那么同时添加和删除dom，js将无法界定执行哪个操作。

单线程就意味着，所有任务需要排队，执行完一个任务后才会执行另一个，如果前一个任务耗时
很长，后一个任务就需要一直等待下去。当遇到某种情况，尽管cpu处于空闲状态，但是还是需要等待上一个任务执行完毕（如等待网络请求等情况）时，对效率是很大的损耗。为了解决这种问题，js让这种情况下的主线程先挂起等待中的任务，执行排在后面的任务，等待之前的任务返回结果后，再回过头去执行刚因某种原因挂起的任务。

于是，所有任务可以分为两种，同步任务和异步任务，同步任务是指主线程上排队执行的任务，只有前一任务执行完毕，才执行后一个任务，异步任务是指不进入主线程，而进入一个特殊的‘任务队列’的任务，只有‘任务队列’通知主线程，某个异步任务可以执行，该任务才会进入主线程执行。顺便一提，计算机里的异步是指同时执行，同步是指同一时间智能做一件事情，和生活中的认知存在一定差异。

异步执行机制如下：
1 所有同步任务都在主线程上执行，形成一个执行栈
2 主线程之外，存在一个任务队列，只要异步任务有了运行结果，就在任务队列中放置一个事件
3 一旦执行栈中的所有同步任务执行完毕，系统就会读取任务队列，看里面有哪些事件，对应的异步任务需要执行，如果有的话，就结束那些任务的等待状态，放入执行栈，开始执行
4 不断执行以上三个步骤

示意图：

总的来说，就是只要主线程空闲了，就回去读取那个独立出来的，存放异步任务的‘任务队列’，这就是js的运行机制，该过程会不断重复

举例子：

console.log("1");
setTimeout(function () {
	console.log("2");
}, 500);
console.log("3");

该段代码打印出来的结果，为 1 3 2，因为定时器是异步任务，输出3的时候没有等待定时器执行完毕就输出了，等定时器完毕后再回头打印2。

常见的异步任务：ajax（写到这里的时候我还不知道ajax是什么东西），dom事件操作，setTimeOut，promise的then方法，Node读取文件

浏览器内核

关于js的基本概述就是上面这些了，如果有遗漏我后面会补上，最后写一下浏览器内核，现在常见的浏览器内核：
1 IE浏览器内核：trident内核，也就是ie内核
2 Chrome内核，以前是webkit内核，现在更换为了其分支Blink内核
3 FireFox内核，Gecko内核
4 Opera内核，最早是Presto内核，改为webkit，现在是Blink

如今四大主流内核分别为，Trident，webkit，Blink,Gecko。五大浏览器（IE，Chrome，Firefox，Safari，Opera）所采用的都是单内核，但是随着发展现在也出现了双内核，如qq，360浏览器。

熟悉四大内核是非常有必要的，四大内核的解析不同是的网页渲染效果根据多样化。

引用：
浏览器内核部分原文链接：https://blog.csdn.net/yuyanjing123456789/article/details/78689595
执行机制部分原文链接：https://blog.csdn.net/weixin_34790159/article/details/112630119
执行机制部分原文链接：https://blog.csdn.net/qq_36995542/article/details/80007381