基于vue框架一个web网页的呈现历程

问题简述

使用vue框架进行前端开发将近一年，在这一年的开发里，一直都在思考我小导师问我的一个问题即一个.vue文件从不能被浏览器识别，到最后被浏览器渲染成网页经历了什么？也正是这个问题引发了我无限的思考与学习。

在经过一年的工作学习以及自己的思考和研究，算是初步有了一点小心得，遂进行了一定的整理，写了这样一篇文章和大家分享。

学习点

阅读完本文你将了解一下内容：

1. 什么是.vue文件

2. 为什么会有vue、react、angular这样的前端框架

3. 为什么需要webpack等这样的构建工具

4. 解释性语言、编译性语言、标记语言的定义与区别

5. 浏览器的工作过程

摘要

早期的网页都是由HTML、CSS、JavaScript等原生代码编写，但是随着信息技术的发展和网页功能需求逐渐由简至繁，
传统的开发方式无法满足早期开发者的述求，为了提高开发效率增强网页质量同时提升代码可读性、维护性、重用性，针对web前端开发的技术框架相继出现。

.vue文件就是一个基于Vue框架将HTML、CSS、JavaScript三种元素封装在一起的单文件组件。但是由于浏览器也是根据ECAMScript标准开发的web呈现工具，其只能识别解析ECAMScript标准规定的原生代码，并且现在的web系统体态往往也都比较庞大，其依赖库以及自身的功能程序亦非常的繁杂，因此为兼顾旧版浏览器，减少网络请求，提升网站效率，源代码在部署到服务器之前都会通过webpack等构建工具进行代码转译构建压缩。构建后的一个或多个程序文件会被部署到服务器上并指定相应的域名。浏览器就是根据这样的域名进行解析并请求到相应的程序文件，最后再由浏览器机制解析渲染出来。

引子

web

web即万维网，是一种基于超文本和HTTP的跨平台的分布式图形信息系统，早期目的是方便全球科学家利用Internet交流自己的工作文档。通俗的讲就是提供一个平台可以使我写的文档能够通过互联网与大家共享阅读甚至编辑，类似现在的在线world编辑。

网站

是一种建立在web系统上的沟通工具，拥有域名和地址并提供相应的网络服务，以服务器为载体，能够为网页文件提供存储空间，是网页的集合。

网页

网页就是根据一定规则，通过HTML或XML等标记语言制作用于展示特性内容的画面。

概括下来就是，网页就是一张使用隐形药水画下的一幅画，把很多幅这样的画装订成册起个名字就是网站，承载这些有名字的画册的书架就是web系统，而有能力承载这些系统并能根据相应的信息找到这些画册以及具体的某一页并且能通过一定的手段让这些隐形的画显示出来让我们肉眼看到的图书馆就是浏览器。

其中隐形药水就是HTML等标记语言，CSS可以理解为是药水显示时的颜色，而JavaScript则是可以操作隐形药水做成什么样一幅画的画笔。

前端开发框架产生的原因

早期的网站受限于当时的技术和网络大多都是由原生的HTML、CSS、JavaScript技术开发出来的简单网页，但是随着信息科技的进步，原有的这些简单网页已经不能满足人们的需要，人们日益需要哪些信息量全，内容量大，画面质量较佳的网页，而要开发出来这样的网页再用原生的HTML、CSS、JavaScript技术已显得非常吃力和费时。于是早期的web开发者为了更快更优的开发出网页，相继在HTML、CSS、JavaScript的基础上开发出了bootstrap、jQuery等框架，而web前端的技术更新是非常快的，发展到现在主流的前端框架主要是Vue、React、Angular。

补充解释：

①标记语言： 是一种将文本（Text）以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的电脑文字编码 ，XML、HTML、XHTML等都是标记语言

②前端框架：前端框架有很多种，但其目的都是为了方便在日益复杂的网页需求下，帮助开发者更快更好的开发出可读性更高，质量更优，维护性更强的代码

Vue文件

Vue是一套用于构建用户界面的渐进式JavaScript框架，不同于React、Angular等框架，vue有自己的文件，后缀.vue。

.vue文件是一个单文件组件（single-file component）一个.vue文件一般会包含html、css、js三部分内容

对于浏览器来说，可以认为他也是基于ECMAScript标准开发出的一套针对HTML、CSS、JavaScript源码规则进行解析的工具，因此浏览器并不能直接识别解析.vue文件。另外，对于浏览器来说，既要能够解析后来者的新技术也要能够兼容以前的旧技术往往是不易的，而有时候这样的工作确实也不应该由他来做。如果不由浏览器来做，就意味着要有其他工具替他完成相应的转译，尤其像Vue、React、Angular框架，都已大量使用ES6以后的新标准语法，而对于大多数浏览器来说，现在还并不能直接解析ES6及以后的新语法，这也意味着无论是使用什么样的框架，一旦使用的ES6及以后的新语法都应该被转译成ES5的语法然后再由浏览器进行解析。而这就是像webpack这样的构建工具要干的活。

补充解释：

①高级语言：高级语言是一种独立于机器，面向过程或对象的语言，是参照数学语言近似于日常会话的语言，其目的是为了易读便于编写，但是高级语言程序不能被计算机直接执行。无论是JavaScript、python这样的解释型语言还是java、C++这样的编译型语言都是高级语言。

②解释型语言：解释型语言编写的程序不进行预编译，以文本方式存储程序代码。在运行程序的时候，解释性语言必须先解释再运行。JavaScript语言就是解释性语言，浏览器在解析JavaScript程序时都是遇到一段解释一段执行一段，所谓的解释就是将JavaScript程序转成能够被计算机运行的机器程序（二进制编码）。

③编译型语言：在程序执行前会进行预编译，将高级语言统一编译成能被计算机直接执行的机器语言程序文件。

构建工具：转译-构建-压缩

构建工具有很多种最常用的有webpack，gulp等，现在比较活的是vite，本文以webpack为例阐述。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cRdV5TN0-1653740944227)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d7d46ccb3ef441c29b6007be306a422c~tplv-k3u1fbpfcp-watermark.image?)]
从前文我们已经知道构建工具webpack的一个功能，就是将ES6等新语法转译成ES5旧语法。但是webpack的功能绝不仅仅如此，我们来看一下他的名词解释，本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。由此可知webpack的主要工作是为了模块打包，那么什么又是模块，为什么要进行模块打包呢？

现在网站一般都是大而杂的，这也就意味着现在一个完整的网站会有很多个网页组成，那么在开发的过程中毋庸置疑会遇到大量代码和广泛使用第三方库，而这些第三方库就是根据模块化思想开发出来具有特定功能和API接口的功能模块，而模块化的思想和前文说的框架也有类似的目的，就是为了使代码易读可维护能够重复利用，减少不必要的重复劳动。而JavaScript的模块是在ES6才定义下来的。

对于浏览器来说，要想解析一个引入第三方库方法的语句就必须等待这个第三方库初始化完成，而每一个被引入的第三方库在没被初始化之前都需要一个个http请求获取其脚本文件，而每一个第三方库很有可能也依赖了别的第三方库。因此对于一个稍微大一点的系统，都有可能出现一个地狱模块依赖，如果这些依赖不提前处理，都由浏览器一个个的去请求，其体验不言而喻将会是非常的糟糕。

所以这些都要求需要webpack这样的构建工具，将这些应用程序提前转译成低级的ES5语法同时将相应的依赖库按照依赖图构建成一个或多个能够被浏览器执行的应用程序文件。（能被浏览器执行不意味着能被计算机执行，浏览器直接执行的是JavaScript源码，至于浏览器如何将JavaScript源码编译为能被计算机执行的机器语言，那是浏览器的工作）

一般来说webpack除了转译和构建还会有压缩的功能，即在构建的时候会删除空格，注释以及一些未被使用的程序，这样做的目的可以防止代码功能外泄（浏览器开发工具是可以看到源码的，别人很容易根据你的注释上了解到你在做什么）；减少文件大小提升网络请求速度。

补充解释：

①转译(transpilation)和编译(compilation)：编译是将源码从一种语言转换成另一种语言，转译在本质上是跟编译一样的，不同的是目标语言是不是同一种语言的不同级别抽象。将ES6转成ES5但本质上上还是JavaScript语言，所以用转译比较合适。Java等编译型语言直接将其代码程序转换成机器语言是两种不同语言的区别所以用编译比较合适。

浏览器渲染呈现

浏览器的呈现概括下来就一下几个步骤：

1. DNS解析

用户在浏览器地址栏输入链接并回车，浏览器会对输入的内容通过DNS进行解析，识别出是本地的项目还是远程的项目，如果是远程的项目则可以根据域名找到相应的远程服务器，如果是本地的项目（loclhost或本地ip地址）则会根据url地址找到相应的待执行程序文件

2. TCP连接

浏览器和远程服务器建立联系进行通信

3. 发送HTTP

浏览器在和远程服务器建立联系后，会根据url发送http请求

4. 服务器处理请求并返回HTTP报文

5. 浏览器对返回回来的可执行程序文件进行解析并渲染页面

6. 结束连接

关于浏览器渲染页面的文档有很多篇，这里不一一介绍，有兴趣的推荐阅读以下两篇文章

从Chrome源码看浏览器如何构建DOM树

浏览器工作原理：从 URL 输入到页面展现到底发生了什么？

总结

本篇文章的目的是为了使大家能够对JavaScript网页开发，从开发到呈现有一个完整的认识，由于在浏览器解析方面网上有很多资料和分享，因此本文重点补充解释网页程序在到达浏览器前的历程，期间自己思考了很多也查看了很多资料才形成这个初版的认识，由于个人的精力问题，中间有很多涉及到原理性以及更深奥的东西都省略了，有兴趣的同学可以自行查阅。

当然本文另一个用意，就是监督自己成长，别人的东西再好也是别人的，只有自己理解思考的东西才会真正成为自己的，所以写下本文也是为了加深自己的理解和记忆，当然对于本文来说，肯定还有很多解释错误或者理解不到位的地方，在此也恳请诸位不吝赐教，多多指点。

参考资料

标记语言

web、网站、网页

webpack

高级语言

解释型语言

编译型语言

从Chrome源码看浏览器如何构建DOM树

浏览器工作原理：从 URL 输入到页面展现到底发生了什么？

《JavaScript高级程序设计》（第四版）