《现代前端技术解析》第1-2章 阅读笔记

《现代前端技术解析》阅读笔记

第一章 Web前端技术基础

思考一些问题：

1. 页面内容多而复杂，怎样保证开发效率？
   需要借助符合特定场合的前端框架来提高效率。

2. 页面内容多且复杂，项目管理和维护该如何去做？
   考虑用模块化和组件化的思路管理，所谓模块化和组件化是指采用代码管理中分治的思想，将复杂的代码拆分成多个独立，简单，解耦合的结构或文件分开管理，使项目结构更加清晰。

3. 页面加载内容很多，怎样保证尽快将网页内容显示给用户？
   通过异步的方式来实现，即将一部分内容先展示给用户，然后根据用户的操作，异步加载用户需要的其他内容，避免用户长时间等待。

4. 怎样限制页面内图片的大小以保证页面快速展示？
   需要考虑图片的优化处理。

5. 对于重复打开的页面，能否让浏览器不再向服务器重复请求的内容呢？
   合理的文件缓存就能做到这一点，这样可以大幅度提高网页资源的加载速度。

   以上问题，涉及了前端开发框架，模块化和组件化开发，资源异步加载，响应式站点开发，缓存和前端优化等多个方面。

前端应用开发模式演变：

1. 静态黄页
2. 服务器组装动态网页数据
3. 后端为主的MVC
4. 前后端分离
5. 纯前端MV*为主，中间层直出
6. 前端Virtual DOM，MNV*，前后端同构

1.2 浏览器应用基础

1.2.1 浏览器组成结构

1. 打开浏览器输入一个网址后：

1. 在接收到用户输入的网址后， 浏览器会开启一个线程来处理这个请求，对用户输入的URL地址进行分析判断，如果是HTTP协议就按照HTTP方式来处理。
2. 调用浏览器引擎中的对应方法，分析并加载这个URL地址。
3. 通过DNS解析获取该网站地址对应的IP 地址，查询完成后连同浏览器的Cookis，userAgent等信息向网站目的IP发出GET请求。
4. 进行 HTTP协议会话，浏览器客户端向Web服务器发送报文。
5. 进入网站后台上的Web 服务器处理请求，如Apache Tomcat. Nodejs等服务器。
6. 进入部署好的后端应用， 如PHP、Java， JavaScript， Python 等后端程序，找到对应请求处理逻辑，这期间可能会读取服务器级存或查询数据库等。
7. 服务器处理请求并返回响应报文， 此时如果浏览器访问过该页面，缓存上有对应资源，会与服务器最后修改记录对比，一致则返回304,否则返回!200和对应的内容。
8. 浏览器开始下载 HTML文档(响应报头状态码为200时) 或者从本地缓有更存读取文件 (浏览器缓存有效或响应报头状态码为304时)。
9. 浏览器根据下载接收到的HTML文件解析结构建立DOM 文档树，井根据HTML中的标记请求下载指定的MIME类型文件(如CSS、JavaScript 脚本等)，同时设置缓存等内容。
10. 页面开始解析谊染 DOM, CSS根据规则解析并结合DOM文档树进行网页内容布局和绘制渲染，JavaScript 根据DOM API 操作DOM，并读取浏览器缓存、执行事件绑定等，页面整个展示过程完成。

2. 浏览器组成部分：

1. 用户界面
2. 网络
3. JavaScript引擎
4. 渲染引擎
5. UI后端
6. JavaScript解释器
7. 持久化数据存储

1.2.2 浏览器渲染引擎简介

浏览器渲染引擎（浏览器内核）的主要用于解析HTML文档和CSS文档，然后将CSS规则运用到HTML标签元素上并将HTML渲染到浏览器窗口中以展示具体DOM内容。

工作流程:

1. 解析HTML构建DOM树
2. 构建渲染树
3. 渲染树布局阶段
4. 绘制渲染树

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

这里所说的数据持久化存储主要是针对浏览器的，所以我们统称为浏览器缓存(Browser Caching)，浏览器缓存是浏览器端用于在本地保存数据并进行快速读取以避免重复资源请求的传输机制的统称。有效的缓存可以避免重复的网络资源请求并让浏览器快速地响应用户操作，提高页面内容的加载速度。

浏览器端缓存的实现机制种类较多，一般可以分为九种

1. HTTP文件缓存：

​ 是基于HTTP协议的浏览器文件缓存机制。在文件重复请求的情况下，浏览器可以根据HTTP响应的协议头判断是从服务器请求文件还是从本地读取文件。

流程：

2. localStorage：

   是一种HTML5的一种本地缓存方案。主要用于浏览器端保存体积较大的数据（如Ajax返回结果等）。localStorage在不同浏览器的长度限制各不相同。

3. sessionStorage：

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

4. Cookie：

   指网站为了辨别用户身份或者Session跟踪而存储在用户浏览器端的数据。Cookie信息一般会通过HTTP发送到服务器端。Cookie分两种：Session Cookie 和持久型Cookie。

5. WebSQL：

   浏览器端用于存储大量数据的缓存机制。

6. IndexDB：

   也是一个可在客户端存储大量结构化数据并且这些数据上使用索引进行高性能检索的一套API。由于WebSQL不是HTML5规范，很多浏览器不兼容，一般推荐使用IndexDB进行大量数据存储。

7. CacheStorage

8. Application Cache

9. Flash 缓存方式

第二章 前端与协议

​ 浏览器上解析执行的HTML、CSS和JavaScript文件通常是通过网络请求从Web服务器上下载解析的，加载过程中，浏览器通过网络模块创建下载进程，发起HTTP请求，将HTML文本、CSS 样式或JavaScript脚本装载进浏览器解析或运行。这里就涉及了一些相关的网络协议，我们可以认为与前端关系最密切的协议是HTTP协议，因为几乎所有的前端相关资源文件均是通过HTTP协议请求完成的。前端Web应用的发展加速了前后端技术的分离，这种开发模式降低了前端与服务端的耦合，但是前端和服务端之间的交互数据通信仍是通过协议来完成的，这里的协议可以认为是前后端开发者之间主观协商形成的一层数据接口规范。当然，还有基于SSL (Secure Sockets Layer,安全套接字层)层的HTTPS协议。进入移动互联网时代后，移动端Web脚本开始需要与移动端原生程序进行交互，这便涉及与移动端Native原生程序交互的协议。除了这些还有HTML5的WebSocket实时通信协议、与服务端交互的RESTful协议等。

2.1 HTTP协议简介

2.1.1 HTTP协议概述

HTTP（超文本传输协议）协议是www服务器和用户请求代理之间通过请求模式传输超文本内容的一种协议。

HTTP请求头部结构：

HTTP协议响应头：

HTTP报文的头部域字段的设置：

2.2 Web安全机制

2.1.1 基础安全知识

XSS（跨站脚本攻击），SQL（结构化查询语言）注入，CSRF（跨站请求伪造）均属于基础的前端安全知识。

XSS：通常是由带有页面可解析内容的数据未经处理直接到页面上解析导致的。

需要注意，XSS分为 存储型XSS，反射性XSS，MXSS三种。这里区分不同类型主要是根据攻击脚本的引入位置。

存储型XSS的攻击脚本常常是由前端提交的数据未经处理直接存储到数据库中读取出来后有直接插入到页面所导致的。

反射型XSS可能是在网页URL参数中注入了课解析内容的数据导致的，如果直接获取URL中不合法的并插入页面中则可能出现页面上的XSS攻击。

MXSS则是在渲染DOM属性时将脚本插入DOM属性中被解析而导致的。

XSS主要的防范方法是验证输入到页面上所有内容来源数据是否安全，如果可能含有脚本标签等内容则需要进行必要的转义。

SQL：主要是因为页面提交数据到服务器端后，在服务器端未进行数据验证就将数据直接拼接到SQL语句中执行，因为产生执行与预期不同的现象。

SQL主要防范措施是对前端网页提交的数据内容进行严格的检查效验。

CSRF：是指非源站点按照源站点的数据请求格式提交非法数据给源站点服务器的一种攻击方法。非源站点在取得用户登录验证信息的情况下，可以直接对源站点的某个数据接口进行提交，如果源站点对该提交请求的数据来源未经验证，该请求可能被成功执行，这其实并不合理。

通常比较安全的是通过页面Token（令牌）提交验证的方式来验证请求是否为源站点页面提交的，来阻止伪请求的发生。

CSRL攻击原理图：

CSRF预防机制：

2.2.2 请求劫持与HTTPS

除了正常的前后端脚本安全问题，网络请求劫持的发生也越来越频繁。网络劫持一般指网站资源请求在请求过程中因为人为的攻击导致没有加载到预期的资源内容。

网络劫持目前主要分两种：DNS劫持与HTTP劫持。

DNS劫持：

通常是指攻击者劫持了DNS服务器，通过某些手段取得域名记录控制权，进而修改此域名的解析结果，导致用户对该域名地址的访问由原IP地址转入到修改后的指定IP地址的现象，其结果就是让正确的网址不能解析或指向另一个网站IP，实现获取用户资料或者破坏原有网站正常服务的目的。DNS劫持一般通过篡改DNS服务器上的域名解析记录，来返回给用户一个错误的DNS查询结果实现。

DNS劫持原理：

HTTP劫持：

HTTP劫持是指，在用户浏览器与访问的目的服务器之间所建立的网络数据通道中从网关或防火墙层上监视特定数据信息，当满足一定条件时，就会在正常的数据包中插入或修改成为攻击者设计的网络数据包，目的是让用户浏览器解释“错误”的数据，或者以弹出新窗口的形式在使用者浏览器界面上展示宣传栏广告或者直接显示其他内容。

HTTP劫持原理：

2.2.3 HTTPS协议通信过程

HTTPS协议是通过加入SSL层来加密HTTP数据进行安全传输的HTTP协议。同时启用默认的443端口进行数据传输。

2.3 前端实时协议

前端浏览器进行实时通信的功能实现方式主要有WebSocket，Poll，Long-poll，DDP协议。

2.4 RESTful数据协议规范

REST并不是某一种数据交互调用接口。的协议，而是定义了一种网络应用软件之间的架构关系，并提出了一套与之对应的网络之间交互调用的规则。

在REST形式的软件应用服务中。每个资源都有一个与之对应的URL地址，资源本身都有方法调用的目标。

RESTful是一种软件架构之间交互调用数据的协议风格规范，它建议以一种通用的方式定义和管理

2.5 与Native交互协议

一般将移动端原生应用的开发称为移动端Native开发。

Hybrid App是在Native App应用的基础上结合了Web App应用所形成的模式，称为混合App。