客户端脚本语言：JS的运行机制
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
代码块： JS中的代码块是指由<script>标签分割的代码段。JS是按照代码块来进行编译和执行的，代码块间相互独立(即就算代码块1出错，但不影响代码块2的加载和执行)，但变量和方法共享。
案例：2个代码块
<script type=\”text/javascript\”>
console.log(\”这是代码块一\”);
</script>
<script type=\”text/javascript\”>
console.log (\”这是代码块二\”);
</script>
HTML页面中JS的加载原理： 在加载HTML页面的时候，当浏览器遇到内嵌的JS代码时会停止处理页面，先执行JS代码，然后再继续解析和渲染页面。同样的情况也发生在外链的JS文件中，浏览器必须先花时间下载外链文件中的代码，然后解析并执行它，在这个过程中，页面的渲染和用户互交完全被阻塞。由于现代浏览器都允许并行下载JS文件，因此<script>标签在下载外部资源时不会阻塞其他的<script>标签。遗憾的是JS下载过程仍然会阻塞其他资源的下载。
JavaScript的单线程：
JS语言的一大特点就是单线程，也就是说，同一个时间只能做一件事情。之所以是单线程，是因为与它的用途有关，作为浏览器脚本语言，JS的主要用途是与用户互动以及操作DOM。这决定了它只能是单线程，否则会带来复杂的同步问题。为了利用多核CPU的计算功能，HTML5提出了web worker标准，允许JS脚本创建多个线程，但是子线程完全受主线程控制，且不能操作DOM，所以这个新标准并没有改变JS单线程的本质。
JavaScript的任务列队：
JS任务可以分为两种：一种是同步任务，另一种是异步任务。注意，只有主线程空了，才会去读取\”任务队列\”，这就是JS的运行机制，这个过程会不断重复。
同步任务：在主线程上排队执行的任务，只有前一个任务执行完毕了，才会执行后一个任务。
异步任务：在主线程之外，还存在一个“任务列队”，异步任务就是不进入主线程，而是进入“任务列队”的任务，只有“任务列队”通知主线程，某个异步任务可以执行了并且同步任务执行完毕，该任务才会进入主线程执行。
Javascript的事件和回调函数：
\”任务列队\”是一个事件的列队，IO设备完成一项任务，就在\”任务队列\”中添加一个事件，表示相关的异步任务可以进入\”执行栈\”了。主线程读取\”任务队列\”，就是读取里面有哪些事件。\”任务队列\”中的事件，除了IO设备的事件以外，还包括一些用户产生的事件(如鼠标点击、页面滚动等等)。只要指定过回调函数，这些事件发生时就会进入\”任务队列\”，等待主线程读取。
所谓\”回调函数\”，就是那些会被主线程挂起的代码。异步任务必须指定回调函数，当主线程开始执行异步任务，就是执行对应的回调函数。\”任务队列\”是个先进先出的数据结构，排在前面的事件，优先被主线程读取。
主线程的读取过程基本上是自动的，只要执行栈一清空，\”任务队列\”上第一位的事件就自动进入主线程。但是，由于存在后文提到的\”定时器\”功能，主线程首先检查一下执行时间，某些事件只有到了规定的时间，才能返回主线程。
定时器：
除了放置异步任务的事件，\”任务队列\”还可以放置定时事件，即指定某些代码在多少时间之后执行。定时器功能主要由setTimeout和setInterval这两个函数来完成，它们的内部运行机制完全一样，区别在于前者指定的代码是一次性执行，后者则为反复执行。以下主要讨论setTimeou方法：
setTimeout接受两个参数，第一个是回调函数，第二个是推迟执行的毫秒数
console.log(1)
setTimeout(function {
console.log(2)
}, 1000);
console.log(3)
上面代码的执行结果是1=>3=>2，因为setTimeout将第二行推迟到1000毫秒之后执行
如果将setTimeout的第二个参数设为0，就表示当前代码执行完(执行栈清空)以后立即执行
setTimeout(function {
console.log(2)
}, 0);
console.log(3)
上面代码的执行结果是3=>2，因为只有在执行完第二行以后，系统才会去执行\”任务队列\”中的回调函数。总之，setTimeout(fn, 0)的含义是，指定某个任务在主线程最早的空闲时间执行，也就是说尽可能早的执行。它在\”任务队列\”的尾部添加一个事件，因此要等到同步任务和\”任务队列\”现有的事情都处理完，才会得到执行。
需要注意的是，setTimeout知识将事件插入了\”任务队列\”，必须等到当前代码(执行栈)执行完，主线程才会去执行它指定的回调函数，要是当前代码耗时很长，有可能要等很久，所以并没有办法保证回调函数一定会在setTimeout指定的时间执行。
内容来源：博客园
JavaScript中必须掌握的基本知识
一.简介
JavaScript（JS）是一门高级的、解释型的动态编程语言。用于 HTML或web应用，可被浏览器直接执行。
完整的JavaScript包括以下几个部分：
- ECMAScript，描述了该语言的语法和基本对象
- 文档对象模型（DOM），描述处理网页内容的方法和接口
- 浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口
JavaScript的基本特点：
- 是一种解释性脚本语言（代码不进行预编译）。
- 主要用来向HTML页面添加交互行为。
- 可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。
JavaScript常用来完成以下任务：
- 嵌入动态文本于HTML页面
- 对浏览器事件作出响应
- 读写HTML元素
- 在数据被提交到服务器之前验证数据
- 检测访客的浏览器信息
- 控制cookies，包括创建和修改等
二.用法
1.嵌入HTML
HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
如果 <script> 放在 body 中，建议放在底部。因为浏览器会按照代码在文件中的顺序解析 HTML。如果先加载的 JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效。所以，要将 JavaScript 代码放在 body 中，应置于 HTML 页面底部。
2.外部js脚本
也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
外部 JavaScript 文件的文件扩展名是 .js。外部文件不使用 <script> 标签，直接写 javascript 代码。
如需使用外部文件，请在 <script> 标签的 \”src\” 属性中设置该 .js 文件：
3.在console调试
可以进入浏览器中console，如chrome F12 进入console，以命令行的形式输入js命令
4.事件触发
把 JavaScript 代码放入函数中，在事件发生时调用该函数。
三.变量
JavaScript 使用关键字 var 来定义变量， 使用等号来为变量赋值
也可以使用let,const来定义，这三者的区别是：var与let涉及块级作用域，let 命令只在所在的代码块 {} 内有效，具体参考；const定义一个只读常量
一般用var即可，let更推荐
注意: 在JavaScript中，所有代码指令都会以分号结尾 (;)
JavaScript中数据类型主要有:
算数运算符主要有:
比较运算符主要有:
在常规的比较中，数据类型是被忽略的
四.基本语法
1.条件语句
if 语句只有当指定条件为 true 时，该语句才会执行代码。
使用 if….else 语句在条件为 true 时执行代码，在条件为 false 时执行其他代码。
使用 if….else if…else 语句来选择多个代码块之一来执行。
三目运算
2.循环语句
JavaScript 支持不同类型的循环：
- for – 循环代码块一定的次数
- for/in – 循环遍历对象的属性
- while – 当指定的条件为 true 时循环指定的代码块
- do/while – 同样当指定的条件为 true 时循环指定的代码块
for 循环
for/in遍历
while 循环会在指定条件为真时循环执行代码块。
do/while 循环是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话，就会重复这个循环。
3.函数语法
函数就是包裹在花括号中的代码块，前面使用了关键词 function：
加上形参
匿名函数，函数存储在变量中，不需要函数名称，通常通过变量名来调用。
4.异常判断
try 语句允许我们定义在执行时进行错误测试的代码块。
catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。
JavaScript 语句 try 和 catch 是成对出现的。
finally 语句不论之前的 try 和 catch 中是否产生异常都会执行该代码块。
在浏览器中，页面被加载的时候，会自动生成这个页面的DOM对象（document）
DOM对象是一个树模型
可以通过这个对象：
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
1.查找HTML元素
通过id查找
通过标签查找
通过类名查找
因为查找返回的元素也是对象，所以可以对它再进行查找
2.修改HTML元素
改变HTML输出流
修改 HTML 内容
改变 HTML 元素的属性
3.DOM事件
事件可以是浏览器行为，也可以是用户行为，当事件触发时，可以执行对应的js代码
常见事件
HTML 元素中可以添加事件属性，并添加 JavaScript 代码，当此元素的事件被触发时，就会触发执行js代码
<button onclick=\”getElementById(\’demo\’).innerHTML=Date()\”>现在的时间是?</button><p id=\”demo\”></p>
也可以由DOM对象分配事件，因为事件也是html的一个属性
addEventListener() 方法
语法为
第一个参数是事件的类型 (如 \”click\” 或 \”mousedown\”).
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
详细的事件类型参考https://developer.mozilla.org/zh-CN/docs/Web/Events,注意与在元素属性中的事件是不同的
前端必读书籍推荐
大家好，我是 Echa。
今天来推荐一些值得阅读的前端书籍！想要电子书的老铁们，加关注私信我，回复“前端书”即可。
CSS世界三部曲中的其中两部，都是关于 CSS 的进阶读物，作者结合自己多年的从业经验，讲解CSS基础知识，并充分考虑前端开发者的需求，以CSS新特性的历史背景为线索，去粗取精，注重细节，深入浅出地介绍了上百个CSS新特性。主要目标是帮助前端开发者突破CSS技能提升的瓶颈，非常适合具有一定CSS基础的前端开发者阅读。
本书展示了如何通过布局、过渡和动画、边框、背景、文本属性，以及许多其他工具和技术来改善用户体验、加快开发速度、避免潜在的错误。对 CSS 进行了系统的讲解，适合当工具书来阅读。
本书是一本注重实践的教程，作者为我们揭示了47个鲜为人知的CSS技巧，主要内容包括背景与边框、形状、视觉效果、字体排印、用户体验、结构与布局、过渡与动画等。适合有一定CSS基础的开发者阅读。
本书旨在帮你深度掌握CSS语言，并快速了解CSS的新进展和新特性。书中不仅有讲解透彻的概念介绍，而且还有详细的分步示例，能够帮助你提升CSS开发技能。
前端开发最值得阅读的书籍之一，也就是传说中的红宝书。书中详尽讨论了JavaScript的各个方面，从JavaScript的起源开始，逐步讲解到新出现的技术，其中重点介绍ECMAScript和DOM标准。适合所有阶段的前端开发者阅读。
前端开发最值得阅读的书籍之一，也就是传说中的犀牛书。本书介绍JavaScript语言和由浏览器与Node实现的JavaScript API。本书的目标是全面地讲解JavaScript语言，对JavaScript程序中可能用到的重要的客户端API和服务器端API提供深入的介绍。本书适合有一定编程经验、想学习JavaScript读者，也适合已经在使用JavaScript但希望更深入地理解进而真正掌握这门语言的程序员。
“你不知道的JavaScript”系列就是要让不求甚解的JavaScript开发人迎难而上，深入语言内部，弄清楚JavaScript每一个零部件的用途，轻松理解前端圈里出现的各种技术、框架和流行术语。本书既适合JavaScript语言初学者阅读，又适合经验丰富的前端开发人员深入学习。
本书根据ES2017标准，详尽介绍了所有新增的语法，对基本概念、设计目的和用法进行了清晰的讲解，给出了大量简单易懂的示例。其难度适中，适合那些已经对 JavaScript 有一定了解的读者。
本书对 ES6 的各种新特性进行了系统性的讲解，可以帮助我们加深对ES6的理解，并深入学期其原理。适合对 JavaScript 有一定了解的读者阅读。
本书介绍了如何掌握 JavaScript 核心的概念，诸如函数、闭包、对象、原型和 promise，同时还介绍了 JavaScript API， 包括 DOM、事件和计时器。对 JavaScript 底层进行深入讲解，适合初学者和进阶JavaScript 的开发者阅读。
本书揭示的技术和策略能帮助你在开发过程中消除性能瓶颈。你将会了解如何提升各方面的性能，包括代码的加载、运行、DOM 交互、页面生存周期等。本书介绍了页面代码加载的最佳方法和编程技巧，来帮助你编写更为高效和快速的代码。
本书由 Vue.js 官方团队成员霍春阳倾力打造，基于 Vue 3 深入解析 Vue.js 设计细节，从规范出发，以源码为基础，并结合大量直观的配图，循序渐进地讲解Vue.js中各个功能模块的实现，细致剖析框架设计原理。适合有一定 Vue 开发经验的的开发者阅读。
本书从几个维度去介绍 React。一是作为 View 库，它怎么实现组件化，以及它背后的实现原理。二是扩展到 Flux 应用架构及重要的衍生品 Redux，它们怎么与 React 结合做应用开发。三是对 React 与 server 的碰撞产生的一些思考。四是讲述它在可视化方面的优势与劣势。适合有一定经验的前端开发人员阅读。
从不同的视角介绍了 Node 内在的特点和结构。主要内容包含模块机制的揭示、异步I/O 实现原理的展现、异步编程的探讨、内存控制的介绍、二进制数据Buffer 的细节、Node 中的网络编程基础、Node 中的 Web 开发、进程间的消息传递、Node 测试以及通过Node 构建产品需要的注意事项。
本书系统讲解了使用Express开发动态Web应用的流程和步骤。不仅讲授了开发公共站点及REST API的基础知识，同时还讲解了构建单页、多页及混合Web应用的规划方式及实践。适合所有前端开发人员阅读。
本书讲解了Node.js的基础知识、开发调试方法、源码原理和应用场景，旨在向读者展示如何通过新的Node.js和npm编写出更具前端特色、更具工程化优势的代码。本书还讲解了Node.js中相当核心且复杂的异步流程控制，展望了未来异步流程的发展方向。对于了解 Node.js 在企业中如何应用很有帮助。
本书涵盖了TypeScript的大部分知识点，并对其进行了细致的讲解。本书还对TypeScript编译原理进行了深入的剖析，对高级编程技巧、编译原理进行了深入浅出的解读，适合入门TypeScript的开发者阅读。
本书针对JavaScript语言特性全面介绍了更适合前端程序员的了 16 个常用的设计模式，讲解了JavaScript面向对象和函数式编程方面的基础知识，介绍了面向对象的设计原则及其在设计模式中的体现，还分享了面向对象编程技巧和日常开发中的代码重构。本书将教会你如何把经典的设计模式应用到 JavaScript 中，编写出优美高效、结构化和可维护的代码。
书中清晰揭示了重构的过程，解释了重构的原理和佳实践方式，并给出了何时以及何地应该开始挖掘代码以求改善。书中给出了60多个可行的重构，每个重构都介绍了一种经过验证的代码变换手法的动机和技术。本书提出的重构准则将帮助开发人员一次一小步地修改代码，从而减少了开发过程中的风险。适合有一定前端开发经验的开发者阅读。
本书对 HTTP 协议进行了全面系统的介绍。作者由HTTP协议的发展历史娓娓道来，严谨细致地剖析了HTTP协议的结构，列举诸多常见通信场景及实战案例，最后延伸到Web安全、全新技术动向等方面。在讲解的同时，辅以大量生动形象的通信图例，更好地帮助读者深刻理解HTTP通信过程中客户端与服务器之间的交互情况。
本书讲解了网络基础知识、TCP/IP基础知识、数据链路、IP协议、IP协议相关技术、TCP与UDP、路由协议、应用协议、网络安全等内容，适合初学者阅读。
本书详细解释了HTTP协议，探讨了HTTP有效工作所依赖的所有其他核心因特网技术。本书的本质是理解Web的工作原理，以及如何将这些知识应用到Web编程和管理之中去，主要涵盖HTTP的技术运作方式、产生动机、性能和目标，以及一些相关技术问题。
本书是用JavaScript描述数据结构与算法的开山之作，通过丰富的示例，向读者透彻讲解了在JavaScript环境下，如何通过一系列存储机制（包括链表、栈、队列和图）高效地达到编程目的。学习数据结构与算法可以提高逻辑思维能力和解决问题的能力。
本书采用大量图片，通过详细的分步讲解，以直观、易懂的方式展现了7个数据结构和26个基础算法的基本原理。本书通过大量的步骤图帮助读者加深对数据结构原理和算法执行过程的理解，便于学习和记忆。将本书作为算法入门的第一步，是非常不错的选择。
本书以图配文，以计算机的三大原则为开端、相继介绍了计算机的结构、手工汇编、程序流程、算法、数据结构、面向对象编程、数据库、TCP/IP 网络、数据加密、XML、计算机系统开发以及SE 的相关知识。适合想要扩展计算机基础知识的开发者阅读。
本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com
文章为作者独立观点不代本网立场，未经允许不得转载。
投诉举报&联系我们：
