前言
作为一名写JavaScript的前端码农,每天的工作就是写JS代码,然后node server.js,在chrome浏览器上输入恰当的网址,就可以看数据,调样式...日复一日机械式地操作,确实称得上为一名码农。
为什么我写的JS代码,可以在浏览器上呈现出我期望看到的UI呢?我终于开始灵魂拷问我自己。
JavaScript
JavaScript是一门高级编程语言,也是一种解释性语言。
按语言的执行流程,可以把计算机语言划分为编译型语言和解释型语言:
- 编译型语言:在代码运行前编译器直接将对应的代码转换成机器码,运行时不需要再重新翻译,直接可以使用编译后的结果;
- 解释型语言:需要将代码转换成机器码,和编译型语言的区别在于运行时需要转换。解释型语言的执行速度要慢于编译型语言,因为解释型语言每次执行都需要把源码转换一次才能执行。 Java 和 C++ 等语言都是编译型语言,而 JavaScript 是解释性语言,它整体的执行速度会略慢于编译型的语言。
我们编写的JavaScript代码需要由浏览器或Node代理执行,它们的底层都是交给CPU执行,但是CPU只认识自己的指令集(机器语言),为了让CPU能看懂JS代码,因而有了JavaScript引擎。JavaScript引擎的核心就是把JS转换成CPU所认识的机器语言,目前最为强大和流行的JavaScript引擎,是由Google开发的V8引擎。
的执行,需要依赖JavaScript引擎,之所以我们能在chrome中查看我们写的页面,是因为chrome中内置了目前最为强大和流行的
浏览器的原理
1.提问:
在浏览器中输入网址,敲下回车那一下,浏览器做了些什么呢?
执行流程:
- 对输入的地址进行DNS解析,将域名解析成对应的IP地址
- 然后向这个IP地址发送http请求,服务器收到http请求,处理并且响应
- 浏览器解析来自服务器的响应内容并展示
2.提问:
JavaScript代码在浏览器中是如何被执行的?
执行流程:
- 用户在浏览器搜索栏中输入服务器地址,与服务器建立连接
- 服务器返回对应的静态资源,一般为html
- 浏览器对静态资源(html)进行解析
- 当对静态资源进行解析的过程中,遇到css或js文件时,向服务器请求并下载对应的文件
- 最后浏览器对页面进行渲染,执行js代码
JavaScript引擎
1.为什么需要JavaScript引擎?
我们编写的JS代码由浏览器或Node代理执行,其底层都是交给CPU执行,但是CPU只认识自己的指令集(机器语言)。但是JavaScript是一门高级编程语言,为了让CPU能看懂JS代码,因而有了JavaScript引擎。JavaScript引擎的核心就是把JS转换成CPU所认识的机器语言,目前最为强大和流行的JavaScript引擎,是由Google开发的V8引擎。
JavaScript --> 机器语言
V8引擎的架构
V8的底层架构主要有三个核心模块(Parse、Ignition和TurboFan),接下来对上面架构图进行详细说明。
- Parse模块:将JavaScript代码转换成AST(抽象语法树)。
- Ignition模块:一个解释器,可以将AST转换成ByteCode(字节码)。
- TurboFan模块:一个编译器,可以将字节码编译为CPU认识的机器码。
前端自动化构建工具-Webpack
Webpack是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载。
为什么要用webpack?
现在的 web 应用,内容一般都很丰富,站点需要加载的资源也特别多,尤其要加载很多 js 文件。js 文件从服务端获取,体积大小决定了传输的快慢;浏览器端拿到 js 文件之后,还需要经过解压缩、解析、编译、执行操作,所以,控制 js 代码的体积以及按需加载对前端性能以及用户体验是十分的重要。
Loader
Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换。Loader可以理解为是模块和资源的转换器,它本身是一个函数,接受源文件作为参数,返回转换的结果。这样,我们就可以通过 require 来加载任何类型的模块或文件,比如 CoffeeScript、 JSX、 SASS 或图片。
总结
越学习越觉得自己目前掌握的知识太浅薄,活到老学到老,在今后的工作生活中要,要深入学习。