Web前端技术基础
前端技术自诞生以来，就一直保持着较快的发展速度。与此同时，前端技术的快速发展，对前端工程师的要求也越来越高。除了浏览器的应用复杂度在上升，前端的开发模式也在不断前进。
先后经历了
- 静态黄页时期
- 服务器组装动态网页时期
- 后端为主的MVC（Model-View-Controller，模型、视图、逻辑分离器的开发模式）模式时期
- 前后端分离方案开发时期、纯前端MV*（Model-View-，数据模型、视图、控制方式分离的开发设计方式，这里控制方式有多种实现方法）为主的中间层开发时期
- 前端为主的VirtualDOM（虚拟DOM，用来描述页面DOM树节点之间关系的一种特殊JavaScript对象）
- MNV*（Model-NavtiveView-，数据模型、原生视图、控制方式分离的设计模式）。
这几个时期，这便是前端的经历的几个阶段。由此可以看出，前端是一个越来越系统，越来越庞大的技术，对前端工程师的要求，也是越来越高，因此，身为前端工程师的我们，应该庆幸，前端语言具有很强大的广泛性和成长性，同时，也给我们带来了巨大的挑战，只有不断学习，不断地巩固基础，才不会被淘汰。废话不多说，工欲善其事，必先利其器。我们现在就来了解一下Web前端技术基础。
1、现代Web前端技术发展概述
1.1.1 现代Web前端技术应用
互联网信息呈现的方式越来越偏向于终端设备屏幕，而且终端设备屏幕上的交互也越来越多，越来越复杂。因为我们获取网络信息的设备种类越来越多，个人计算机、智能手机、平板电脑、可穿戴设备、电视机、投影仪等。虽然终端设备不同，但是获取互联网信息的主要途径仍然是Web浏览器(内置浏览器WebViwew)。如今，互联网Web浏览器上的应用已经变得十分庞杂。
1.1.2 现代Web前端技术概述
伴随着用户需求和视觉效果的增加，前端需要思考很多问题来优化用户访问页面时的体验。与此同时，也涉及了前端开发框架、木块户啊和组件化开发、资源异步加载、响应式站点开发、缓存和前端优化德国多个方面的知识，比如：
-
页面内容多而杂，怎么样保证开发效率？
通常，在前端项目实践中，我们需要借助符合特定场景的前端框架来提高开发效率，例如使用jQuery、MVVM等开发框架，对常用的HTML DOM （Document Object Model，文档对象模型，是指HTML内容通过浏览器解析后建立的具有父子关系的树形对象）进行封装操作，大大简化开发工作量。
-
页面内容多且复杂，项目的管理和维护应该如何去做？
前端代码越来越多，结构越来越复杂，如何实现项目的管理将直接决定后期的维护成本。所以我们必须考虑用模块化和组件化的思路来管理，所谓的模块化和组件化是指采用代码管理中分治的思想，将复杂的代码结构拆分成多个独立、简单、解耦合的结构或文件分开管理，是项目结构更清晰。
-
页面加载内容很多，怎样保证尽快将网页内容显示给用户？
在内容较多、较复杂的情况下，为了让用户尽可能快速看到内容，我们可以通过异步的方式来实现，即将一部分内容先展示给用户，然后根据用户的操作，异步加载用户需要的其他内容，避免用户长时间等待。
-
怎样限制页面内图片大大小以保证页面快速展示？
使用更高压缩比的webp格式的图片，在图片质量不降低的情况下，可以大幅度减小图片的网络流量消耗，提高图片加载速度。
-
对于重复打开的页面，能否让浏览器不再向服务器请求重复内容？
这个浏览器自带了缓存机制，对于同一段时间内浏览器的重复请求，服务器可能返回HTTP的304状态码或者不发送请求，让浏览器直接从本地获取内容。
1.1.3 Web前端技术发展
HTML5中组件化Web Component的一种实现方式，它通过自定义标签的方式来封装一部分独立的结构功能代码块。另外在Angular2框架中，前端页面组件也可以定义如下
@ Componet ({selector:'my-app',
template:'<hello-form></hello-form>',
directives:[helloFormComponent]
});
不仅如此，除了浏览器上的开发，JavaScript前端脚本语言在Node.js（Node.js是一个基于Chrome V8引擎的JavaScript运行环境，使用了事件驱动、非阻塞式I/O的模型，使其轻量又高效，它使用的包管理器为npm，是目前全球最大的开源库生态系统）服务器端也可以进行自由高效的开发，Koa是一个简洁高效的Node.js端Web框架。它是由express原版人马打造，致力于成为一个更小、更富有表现力、更健壮的Web框架。
我们必须承认，前端工程师需要做的事情远不只是将一个设计稿图片在页面上实现这么简单，仅从Web前端结构的开发实现模式上来看，就已经发生了翻天覆地的变化。
静态黄页——》服务器组装的动态网页数据——》后端为主的MVC渲染生成——》前后端分离——》纯前端MV*为主，中间层直出——》前端Virtual DOM、MNV-前后端同构
由此说明，Web前端技术的发展非常迅速且已经发生了巨大的变化，但通过这一系列的变化我们可以看出，前端从无到有且发展到现在的不变宗旨是，一直持续在以效率和质量为最终导向的道路上探索，并且未来关于Web技术效率和质量这两个方面的探索仍会有增无减。
效率方面，从前后端分离到出现各种封装的前端框架，都在解决一个前端编程开发效率的问题。前端性能作为前端质量的一个重要部分一直备受关注，而现在前端Virtual DOM和MNV*交互模式等的实现思路，就是为解决前端交互性能问题而出现的。
前端开发框架的完善和改进，也为现代前端开发关于前端工程、自动化构建、组件化、前端优化等技术解决方案做出重要的贡献。
1.2 浏览器应用基础
在介绍浏览器组成结构之前，我们先来了解一个经常被问到的问题：从我们打开浏览器输入一个网址到页面展示网页内容的这段时间里，浏览器和服务端都发生了什么事情？我们直接来看一个相对简洁但比较清晰的过程描述。
- 在接受到用户输入的网址后，浏览器会开启一个线程来处理这个请求，对用户输入的URL地址进行分析判断，如果是HTTP协议就按照HTTP方式来处理
- 调用浏览器引擎中的对应方法，比如WebView中的loadUrl方法，分析并加载这个URL地址
- 通过DNS解析获取该网站地址对应的IP地址，查询完成后连同浏览器的Cookie、userAgent等信息向网站目的IP发出GET请求。
- 进行HTTP协议会话，浏览器客户端向Web服务器发送报文
- 进入网站后台上的Web服务器处理请求，如Apache、Tomcat、Node.js等服务器
- 进入部署好的后端应用，如PHP、Java、Javascript、Python等后端程序，找到对应的请求处理逻辑，这期间可能会读取服务器缓存或查询数据库等
- 服务器处理请求并返回响应报文，此时如果浏览器访问过改页面，缓存上有对应的资源，会与服务器最后修改记录比对，一致则返回304，否则返回200个对应的内容。
- 浏览器开始下载HTML文档(响应报头状态码为200时)或者从本地缓存中读取文件内容(浏览器缓存有效或响应报头状态码为304时)
- 浏览器根据下载接收到的HTML文件解析结构建立DOM（Document Object Model，文档对象模型）文档树，并根据HTML中的标记请求下载指定的MIME类型文件（如CSS、JavaScript脚本等），同时设置缓存等内容。
- 页面开始解析渲染DOM，CSS根据规则解析并结合DOM文档树进行网页内容布局和绘制选人，JavaScript根据DOM API操作DOM，并读取浏览器缓存、执行事件绑定等，页面展示过程完成。
整个过程用到了浏览器较多的功能，如用户地址栏输入框、网络请求、浏览器文档解析、渲染引擎、JavaScript执行引擎、客户端存储。
目前，用户使用的主流浏览器内核有4类：
- Trident 内核，例如Internet Explorer 、360浏览器、搜狗浏览器等
- Gecko内核，Netscape6及以上版本、Firefox、SeaMonkey等
- Presto内核，Opera 7及以上版本（Opera内核原来是Presto，现在使用的Blink内核）
- Webkit内核，主要是Safari、Chrome浏览器在使用的内核，也是特性上表现较好的浏览器内核
1.2.2 浏览器渲染引擎简介
- 渲染引擎主要工作流程
渲染引擎主要用于解析HTML文档和CSS文档，然后将CSS规则应用到HTML标签元素上，并将HTML渲染到浏览器窗口中以显示具体的DOM内容。
解析HTML构建DOM树-> 构建渲染树 -> 渲染树布局阶段 -> 根据CSS规则绘制渲染树
- HTML文档解析
HTML文档解析过程是将HTML文本字符串逐行解析生成具有父子关系的DOM节点树对象的过程，渲染引擎在HTML解析阶段会对HTML文本的标签进行分析，同时创建DOM对象，最终生成DOM树，需要注意的是< header >、< nav >、< section >、< footer >这些布局类标签的DOM类型均为HTMLElement，此外HTML中不同标签的每个元素对应的原始类型也可以不一样。
根元素
<html> (HTMLHtmlElement)
文件数据元素
<head>(HTMLHeadElement)
<title>(HTMLTitleElement)
<base>(HTMLBaseElement)
<link>(HTMLLinkElement)
<meta>(HTMLMetaElement)
<style>(HTMLStyleElement)
<script>(HTMLScriptElement)
<noscript>(HTMLElement)
文件区域元素
...
群组元素
...
文字层级元素
...
编修记录元素
...
内嵌媒体元素
...
表格元素
...
窗体元素
...
交互式元素
...
DOM元素标签和DOM元素对象虽然都是用来描述DOM结构的，但DOM元素标签是指文本化的HTML标识，而DOM元素对象则是指经过渲染引擎DOM解析之后生成的具有节点父子关系的树形对象。
- CSS解析
解析CSS和HTML解析类似，首先也要通过词法解析生成CSS分析树，而且也使用特定的CSS文本语法来实现，不同的是HTML是使用类XML结构的语法解析方式来完成分析的。
一个节点上多条不同的样式规则是通过权重的方式来计算的。关于CSS规则的权重计算，一般认为是
!important > 内嵌样式规则（权重1000） > id选择器(权重100) > 类选择器(权重10) > 元素选择器(权重1) 。一般只有权重最高的样式规则才能生效。
1.2.3 浏览器数据持久化缓存技术
浏览器缓存是浏览器端用于在本地保存数据并进行快速读取以避免重复资源请求的传输机制的统称，有效的缓存可以避免重复的网络资源请求并让浏览器快速响应用户操作，提高页面内容的加载速度。
一般分为九种：
- HTTP文件缓存
- LocalStorage
- SessionStorage
- indexDB
- Web SQL
- Cookie
- CacheStorage
- Application Cache
- Flash
