《现代前端技术解析》第一章读书笔记（未完成）

　　今天是2017年6月26日，星期一，开始从第一章看起。第一章主要讲的是前端技术的发展概况以及一些必须掌握的浏览器基础知识与经常使用开发技术。

　　页面内容多而复杂，为了保证开发效率，咱们能够借助符合特定场景的前端框架来提升开发效率，例如使用JQuery丶MVVM等开发框架，对经常使用的 HTML DOM 操做进行高效封装，大大简化开发工做量，提升效率。

　　前端项目代码愈来愈多丶结构愈来愈复杂，咱们必须考虑用模块化和组件化的思路来管理。所谓的模块化和组件化是指采用代码管理中分治的思想，将复杂的代码结构拆分红多个独立丶简单丶解耦合的结构或文件分开管理，使项目结构更加清晰。若是页面的内容增多，咱们能够借助 Web Component（HTML 5的一种组件化规范），注册一个<news>的标签来直接引入使用，而后再使用<news>这个标签来代替上面组件的内容进行管理维护，页面中其余的标签内容也能够这样来处理。

　　页面加载的内容不少，为了尽快将网页内容显示给客户，咱们能够经过异步的方式来实现，即将一部份内容先展现给用户，而后根据用户的操做，异步加载用户须要的其余内容，避免用户长时间等待。

　　为了限制页面内图片的大小以保证页面快速展现，就须要对图片进行优化处理，如使用更高压缩比 webp 格式的图片，在图片质量不下降的状况下，能够大幅度减少图片的网络流量消耗，提升图片的加载速度。

　　对于重复打开的页面，使用 文件缓存 能够使浏览器再也不向服务器请求重复的内容，这样能够大幅度提升网页资源的加载速度。并且幸运的是，浏览器默承认以支持文件缓存，对于一段时间内浏览器的重复请求，服务器可能会返回 HTTP 的 304 状态码或者不发送请求，让浏览器直接从本地读取内容。

　　前端结构的开发实现模式前后经历了 静态黄页时期丶服务器组装动态网页数据时期丶后端为主的 MVC 模式时期丶先后端分离时期丶纯前端 MV* 为主和中间层直出时期丶前端 Virtual DOM 丶MNV*丶先后端同构时期。前端从无到有且发展到如今的不变宗旨是，一直持续在以效率和质量为最终导向的道路上探索前进，而且将来关于 Web 技术效率和质量这两方面的探索仍会有增无减。

 

 

　　接下来谈论一个比较常见的问题：从咱们打开浏览器输入一个网址到页面展现网页内容的这段时间内，浏览器和服务端都发生了什么事情？ 咱们直接来看一个相对简洁但比较清晰的过程描述。

• 　　在接受到用户输入的网址后，浏览器会开启一个线程来处理这个请求，对用户输入的 URL 地址进行分析判断，若是是 HTTP 协议就按照 HTTP 方式来处理。
• 　　调用浏览器引擎中的对应方法，好比 Web View 中的 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 文档树，并根据 HTML 中的标记请求下载指定的 MIME 类型文件 （如 CSS丶Javascript脚本等），同时设置缓存等内容。
•        页面开始解析渲染 DOM ，CSS 根据规则解析并结合 DOM 文档树进行网页内容布局和绘制渲染，Javascript 根据 DOM API 操做 DOM ,并读取浏览器缓存丶执行事件绑定等，页面整个展现过程完成。

　　整个过程当中使用到了较多的浏览器功能，如用户地址栏输入框丶网络请求丶浏览器文档解析丶渲染引擎丶Javascript 执行引擎丶客户端存储等。

　　一般咱们认为浏览器主要由七部分组成：用户界面丶网络丶Javascript 引擎丶渲染引擎丶UI 后端丶Javascript 解释器和持久化数据存储。以下图所示：　　做为前端开发者，咱们须要重点理解渲染引擎的工做原理，灵活运用数据持久化存储技术，由于实际的开发工做中这部分的操做比较多，而其余几个部分都是由浏览器决定的，开发者控制的部分相对较少。渲染引擎在浏览器中主要用于解析 HTML 文档和 CSS 文档，而后 将 CSS 规则应用到 HTML 标签元素上，并将 HTML 渲染到浏览器窗口中以显示具体的 DOM 内容。