前端做了哪些事

前言

本人刚刚毕业没多久，目前做的工作涉及到一些前端的代码，在此过程中遇到了一些令我十分困惑的问题。通过查找资料，加上自己的理解，我想谈谈我对前端的认识。

1 为什么需要前端？

我觉得广义上与用户交互的界面都可以称之为前端，比如操作系统命令行界面、软件的图形用户界面、手机界面等等。狭义的前端指浏览器界面，用户通过浏览器可以访问远程服务器上的程序，浏览器在这里其实充当了传统软件所需的界面。传统软件的界面是针对软件本身设计的，但是浏览器可以充当各种软件的界面。我们下面谈的是基于浏览器的前端。

        前端为用户提供了与程序交互的通道，好的前端可以提升用户的体验性。

2 前端三件套分别有什么用？

前端开发中基础的技术有三种，分别是html、css、javascript。

1991年Berners Lee发明了Html（超文本标记语言）。html对文本内容进行标记，浏览器可以对此标记进行解析，通过调用操作系统提供的GUI函数，绘制出界面效果。

css可以定义html元素显示的格式。

js提供动态操作html dom的功能，大大提高了交互性。

3 浏览器渲染是什么？

1）前端标记包括HTML/SVG/XHTML，事实上，Webkit有三个C++的类对应这三类文档。解析这三种文件会产生一个DOM Tree。
CSS，解析CSS会产生CSS规则树。
Javascript，脚本，主要是通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree.

2）解析完成后，浏览器引擎会通过DOM Tree 和 CSS Rule Tree 来构造 Rendering Tree。注意：
Rendering Tree 渲染树并不等同于DOM树，因为一些像Header或display:none的东西就没必要放在渲染树中了。
CSS 的 Rule Tree主要是为了完成匹配并把CSS Rule附加上Rendering Tree上的每个Element。也就是DOM结点。也就是所谓的Frame。
然后，计算每个Frame（也就是每个Element）的位置，这又叫layout和reflow过程。

3）最后通过调用操作系统Native GUI的API绘制。

浏览器这边做的工作大致分为以下几步：

加载：根据请求的URL进行域名解析，向服务器发起请求，接收文件（HTML、JS、CSS、图象等）。

解析：对加载到的资源（HTML、JS、CSS等）进行语法解析，建议相应的内部数据结构（比如HTML的DOM树，JS的（对象）属性表，CSS的样式规则等等）

渲染：构建渲染树，对各个元素进行位置计算、样式计算等等，然后根据渲染树对页面进行渲染（可以理解为“画”元素）

这几个过程不是完全孤立的，会有交叉，比如HTML加载后就会进行解析，然后拉取HTML中指定的CSS、JS等。

参考：在前端开发中，页面渲染指什么 - gaoerd - 博客园 (cnblogs.com)

4 浏览器引擎是什么？

浏览器最重要或者说核心的部分是“Rendering Engine”，可大概译为“渲染引擎”，不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释（如标准通用标记语言下的一个应用HTML、JavaScript）并渲染（显示）网页。 所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同，这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。

目前世界上仅有几种浏览器内核，比如webkit，它是chrome和safari所使用的。微软IE因为更新落后，已经被淘汰了，微软公司也将于2022年彻底停止对IE的维护。像国内的360、UC等浏览器，只不过是在国外这些浏览器上套壳的。

5 为什么前后端分离项目通常需要安装node.js?

我接触过两个前后端分离项目，一个前端是vue开发的，一个是angular4开发的，两个项目都需要先安装node.js，配置环境。但是我并没有看到一行Node.js的代码，既然不写node的代码，我就很纳闷为何需要node这个东西？

其实没有node.js的时代，前端开发工作也很流行。后来，有些大牛提出了前端工程化，类似后端那样，前端也需要集成、打包、编译。于是就需要node这个东西了。node自带的npm提供了包管理功能，类似java中的maven，python的Pip。同时，vue或者angular的打包编译也依赖于npm这个工具。当然不使用node，肯定也能构建vue程序，只不过使用它确实方便很多。

还有一个说法，vue或angular需要一个运行的平台，node就提供了一个这样的平台，前端项目可以运行在其上。这点我目前还在怀疑怀疑。

6 前后端分离与传统的jsp有什么区别？

在web发展的早期阶段，网页还是静态的，每个人看到的是相同的内容，也没有交互方式。后来网景公司发明了javaScript来操纵网页。再之后，sun公司引入了jsp作为前端界面的模板引擎。封装js来操作页面的jquery也流行起来。这个时候，还没有出现独立的前端开发这一职业，前端代码一般由java程序员兼写，实际上这就是以前的前后端不分离项目。

我是这样理解前后端不分离项目的，浏览器请求服务器之后，服务器会返回一个数据已经渲染好的页面（后台已经把数据放到html的内容中）。并且前端实现路由跳转。

而前后端分离项目，服务器只返回请求的业务数据，通常是Json格式。前端服务返回静态资源，比如html/css/js/jpg。浏览器解析html，绑定后端返回的数据，之后就是渲染过程。并且后端实现页面跳转，如果熟悉springMVC，会知道controller中可以直接返回到html页面。

7 BootStrap这种框架和Vue这种什么区别？

vue/react/angular三大框架是前端工程化的产物，从此，前端代码也可以独立部署，前后端分离开始成为主流。

1 独立部署。

2 组件化。以angular举例，它把页面上的拆分成一个个独立的组件，组件有独立的html、css、js文件，组件可以复用，提高了代码的复用功能。例如一个页面中，侧边栏是一个组件，菜单是一个组件，内容区也是组件，这些组件还可以继续拆分。

3 实现http协议。这些框架提供了向后台发送请求的方法，类似于ajax。

4 路由机制。提供了页面之间的跳转功能。

而bootstrap这种框架提供了一些UI组件，加快了开发，例如bootstrap的下拉框、导航栏、搜索框、按钮等都可以直接拿来用，程序员不用重复造轮子了。在前后端不分离项目中，bootstrap、layUI这类组件库用的很多，可以快速开发页面，即使不懂前端的后台程序员也可以很快上手。但是随着前后分离的趋势，它们逐渐没落了，近期layUI作者宣布停止维护了。

8 单页面应用SPA

英文全称single page application，与多页面应用相对应。

单页面应用页面由一个个组件组成，交互过程都是局部刷新。如果你点击页面上的一些按钮请求数据，会发现浏览器的url并没有改变。

优点：

1、用户操作体验好，用户不用刷新页面，整个交互过程都是通过Ajax来操作。

2、适合前后端分离开发，服务端提供http接口，前端请求http接口获取数据，使用JS进行客户端渲染。

多页面应用：每次页面跳转，后台都会返回一个新的HTML文档，浏览器的url也会改变，这就是多页面应用。在以往传统开发的应用（网站）大多都是多页面应用，路由由后端来写。这也是前后端不分离项目的特点。