现代前端技术解析：Web前端技术基础

奋飛

发布于 2019-08-15 09:40:48

9110

发布于 2019-08-15 09:40:48

最近几年，越来越多的人投入到前端大军中；时至至今，前端工程师的数量仍然不能满足企业的发展需求；与此同时，互联网应用场景的复杂化提高了对前端工程师能力的要求，一部分初期前端工程师并不能胜任企业的工作，优秀的前端工程师一将难求。

真正了解前端技术的工程师都会感觉前端技术发展变化太快。浏览器特性、前端框架、前端工具、多终端浏览器等都在快速迭代中。作为前端工程师不仅要掌握现有的技术去实现业务需求，更要不断的学习新的技术、新的理念，时刻准备着新技术浪潮的来临。

《现代前端技术解析》提及了作为一个前端工程师需要了解的大部分技能。介绍了从直接性DOM交互框架>>MVC>>MVP>>MVVM>>Virtual DOM>>MNV*等框架演变和实现原理；讲解了前端大型项目实现的思路；引出了前后端同构、Hybrid离线包以及增量更新关键技术的设计思路；并对未来前端趋势做了相关分析和展望。

Web前端技术基础

前端开发模式先后经历了静态黄页时期、服务器组装动态网页数据时期、后端为主的MVC（Model-View-Controller）模式时期、前后端分离方案开发时期、纯前端MV*（Model-View-*，数据模型、视图、控制方式分离）时期、最后进入到虚拟DOM时期、MNV*（Model-NativeView-*）时期以及前后端同构的开发时期。

现代Web前端技术发展概述

随着越来越多的业务搬到前端实现、前端的代码量越来越多。应运而生的是采用代码管理中分治思想模块化和组件化的出现，将复杂的代码结构拆分成多个对立、简单、解耦合的结构或文件分开管理，使项目结构更加清晰；同时限制首页资源、利用缓存以及局部请求的方式来使用户更快更流畅的使用。

然而，对于移动端我们往往需要考虑更多的限制因素，移动端的劣势：

移动端设备计算资源和网络资源比较有限；
移动端CPU处理速度较慢且网络速度也相对较慢，解析和加载同样的内容需要更长的时间；
移动端浏览器受屏幕大小限制，一次性展示的内容有限；
移动端设备通常没有键盘和鼠标等外接设备，用户交互难度大；
移动端整体性能比PC端要差。

JavaScript在Node.js（Node.js是一个基于Chrome V8引擎的JavaScript运行环境，使用了事件驱动、非阻塞式I/O的模型，使其轻量又高效，它使用的包管理器为npm，是目前全球最大的开源生态系统）服务端也可进行高效的开发，使前后端同构变得可行。

Web前端技术一直以效率和质量为最终导向的道路上探索前进！

浏览器应用基础

通常认为浏览器主要由：用户界面、网络、JavaScript引擎、渲染引擎、UI后端、JavaScript解释器和持久化数据存储七部分组成。浏览器内核往往指的是渲染引擎。

常见的浏览器内核：

Trident内核：IE、360浏览器、搜狗浏览器等
Gecko内核：Netscape6及以上版本、Firefox、SeaMonkey等；
Webkit内核：Safari、Chrome；
Blink内核：Webkit一个分支，优化了一些新特性，移动端较多浏览器采用该内核。

浏览器渲染引擎工作流程：

渲染引擎对DOM渲染树的解析和输出是逐行进行的，内容越靠前越优先展示，所以为了确保用户体验，通常不要将script脚本插入到HTML显示内容区域，因为script内容的解析执行会阻塞页面结构的渲染。

整个过程中，要关注的是渲染树布局和绘制阶段：页面生成后，如果页面位置（position、float、margin等属性）发生变化，就要从布局阶段开始重新渲染，即页面重排。页面重排一定会进行后续重绘。如果页面元素只显示样式改变而布局不变，那么页面内容将从绘制阶段开始，即重绘。所以，需要尽可能的避免页面重排，并减少页面元素的重绘！

HTML文档解析

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>页面标题</title>
  </head>
  <body>
    <div>
      <p>页面内容</p>
    </div>
  </body>
</html>

let element = document.getElementById('id'),
    type = Object.prototype.toString.call(element).slice(8, -1);
console.log(type); // HTMLDivElement

CSS解析

html, body{
  margin: 0;
  color: red;
}
header, section, footer {
  margin-top: 10px;
}

在已经形成的DOM渲染树中，节点的CSS规则可以通过document.defaultView.getComputedStyle(element, null)方法来获取查看。

补充：样式规则的权重计算方式

样式规则	权重
!important	最高
内联	1000
id	100
.class	10
name	1

例如：

/* 100 + 10 + 1 = 111*/
body #content .btn {
  color: yellow;
}
/* 100 + 10 = 110*/
#content .btn {
  color: red;
}
/* 100 + 1 = 101 */
#content button {
  color: blue;
}

权重更高的样式规则生效，最终button按钮展示未黄色。

document.defaultView.getComputedStyle(element)获取元素CSS规则。

浏览器数据持久化存储技术

打开Chrome浏览器调试模式，Application左侧列举了现代浏览器的8种缓存机制HTTP文件缓存、localStorage、sessionStorage、indexDB、Web SQL、Cookie、CacheStorage、Application Cache，以及不常用的Flash缓存。

HTTP文件缓存

HTTP文件缓存是基于HTTP协议的浏览器文件级缓存技术。详情请查看：【HTTP】缓存

1. Cache-Control:相对时间（秒为单位）（或者，Expires:绝对时间）如果未过期，直接读取浏览器缓存文件，不发生任何HTTP请求。 2. 在浏览器端判断上次返回头中是否包含Etag信息，有则连同If-None-Match一起向服务器端发送条件Get请求，304说明未做过修改，如果是200需要进入下一步； 3. 在浏览器端判断上次返回头中是否包含Last-Modify信息，有则连同If-Modified-Since一起向服务器端发送条件Get请求，内容失效返回200，否则304; 4. 如果Etag和Last-Modify都不存在，直接向服务器请求。

注意：如果返回304，不会有内容，节省请求大小！

localStorage

【受到同源策略影响】、【以及在safari下问题】、【常规解决方案代码】请查看八种方式实现跨域请求单个localStorage的大小受限，可以用多个iframe方式使用多个域名来突破单个页面下localStorage存储数据的最大限制。特别说明，浏览器多个标签页打开同个域名时，localStorage内容一般是共享的。其位置这可以监听事件“storage”来做一致性操作响应处理。这样会导致一种现象如下：

标签页一：通过某行为修改localStorage中某个属性值，然后数据接口依赖该属性值；标签页二：由于localStorage标签页间共享，导致标签页二数据不准确！

sessionStorage

和localStorage功能类似，但是sessionStorage在浏览器关闭时会自动清空。

Cookie

Cookie为了辨别用户身份（参见，客户端识别与cookie机制）或Session跟踪而存储在用户浏览器端的数据。Cookie一般会通过HTTP请求发送给服务器端。 Cookie分为：Session Cookie和持久型Cookie。Cookie设置中有个HttpOnly参数，前端浏览器使用document.cookie是读取不到HttpOnly类型的Cookie的，被设置为HttpOnly的Cookie记录只能通过HTTP请求头发送到服务器端进行读写操作，这样就避免了服务器的Cookie记录被前端javascript修改，保证了服务器验证Cookie的安全性。

其他

WebSQL：二维表的形成存储大量数据到客户端，但目前只有Chrome浏览器有。
IndexDB：在客户端存储大量结构化数据并且在这些数据上使用索引进行高性能检索的一套API，类似于NoSQL。
Application Cache：通过manifest配置文件在本地有选择性地存储javascript、css、图片等静态资源文件的文件缓存机制，已废弃。
cacheStorage：在ServiceWorker规范中定义的，用于保存每个ServiceWorker（后续博文会单独介绍）声明的Cache对象，未来可能替代Application Cache的离线方案。
Flash缓存：主要基于Flash，具有读写浏览器本地目录的功能。