000_开篇词

浏览器工作原理与实践.png

宏观视角下的浏览器

Chrome架构

仅仅打开了一个页面，为什么有4个进程？

TCP协议

如何保证页面文件能被完整送达浏览器？

HTTP请求流程

为什么很多站点第二次打开速度会很快？

导航流程

从输入URL到页面展示，这中间发生了什么？

渲染流程（上）

HTML、CSS和JavaScrpt文件，是如何变成页面的？

渲染流程（下）

HTML、CSS和JavaScrpt文件，是如何变成页面的？

浏览器中的JavaScript执行机制

变量提升

JavaScript代码是按顺序执行的吗？

调用栈

为什么JavaScript代码会出现栈溢出？

块级作用域

var缺陷以及为什么要引入let和const？

词法环境和闭包

代码中出现相同的变量，JavaScript引擎是如何选择的？

this

从JavaScript执行上下文的视角讲清楚this

V8工作原理

栈空间和堆空间

数据是如何存储的？

垃圾回收

垃圾数据是如何自动回收的？

编译器和解释器

V8是如何执行一段JavaScript代码的？

浏览器中的页面循环系统

消息队列和事件循环

页面是怎么活起来的？

WebAPI

setTimeOut是怎么实现的？

WebAPI

XMLHttpRequest是怎么实现的？

宏任务和微任务

不是所有任务都是一个待遇

Promise

使用Promise，告别回调函数

async/await

使用同步的方式去写异步代码

浏览器中的页面

页面性能分析

利用Chrome做Web性能分析

DOM树

JavaScript是如何影响DOM树构建的？

样式选择

渲染引擎是如何为DOM节点选择样式属性的？

分层和合成机制

为什么CSS动画比JavaScript高效？

页面性能

如何系统地优化页面？

虚拟DOM

虚拟DOM和实际的DOM有何不同？

渐进式网页应用（PWA）

他究竟解决了Web应用的哪些问题？

WebComponent

像搭积木一样构建web应用

浏览器中的网络

HTTP/1

HTTP性能优化

HTTP/2

如何提升网络速度？

HTTP/3

甩掉TCP、TLS的包袱，构建高效网络

浏览器安全

同源策略

为什么XMLHttpRequest不能跨域请求资源？

跨站脚本供给（XSS）

为什么Cookie中有HttpOnly属性？

跨站点请求伪造（CSRF）

Chrome为什么要让iframe运行在单独的渲染进程中？

沙盒

页面和系统之间的隔离墙

HTTPS

让数据传输更安全

主要内容：

基于浏览器的发展历程，梳理出了三个大的进化路线

1. 应用程序web化

随着云计算的普及和HTML5技术的快速发展，越来越多的应用转向了浏览器/服务器（B/S）架构，这种改变让浏览器的重要性与日俱增，视频、音频、游戏几大核心场景也都在往web的使用场景切换。

2. web应用移动化

对于移动设备应用，web天生具有开放的基因，虽然在技术层面还有问题尚待解决（比如，渲染流程过于复杂且性能不及原生应用、离线时用户无法使用、无法接收消息推送，移动端没有一级入口），但Google推出了PWA方案来整合web和本地程序各自的优势。

3. web操作系统化

web操作系统有两层含义：一是利用web技术构建一个纯粹的操作系统，如ChromeOS；二是浏览器的底层结构往操作系统架构方向发展，在整个架构演化的大背景下，会牵扯诸多改变：
1. Chrome朝着SOA的方向变化，未来很多模块都会以服务的形式提供给上层应用使用
2. 在浏览器中引入多种编程语言的支持，比如新支持的webAssembly
3. 简化渲染流程，使得渲染过程更加直接高效
4. 加大对系统设备特性的支持
5. 提供对复杂web项目开发的支持
也就是说，浏览器已经逐步演化成了操作系统之上的“操作系统”。

为什么需要学习浏览器工作原理？

1. 准确评估web开放项目的可行性

随着web特性的极大丰富和浏览器性能的提升，越来越多的项目可以用web来开发。所以，了解浏览器是如何工作的，能够让你更加准确地决策，是否可以采用web来开发项目。

2. 从更高维度审视页面

作为一个合格的开发者，要能站在用户体验角度来考虑页面性能，以下为几个常见的用户体验指标：
1) 当用户请求一个网站时，如果在1s内看不到关键内容，用户会产生任务被中断的感觉。
2) 当用户点击某些按钮时，如果100ms内无法响应，用户会感受到延迟。
3) 如果web中的动画没有达到60fps，用户会感受到动画的卡顿。

这里的页面加载时长、用户交互反馈时长、web动画中的帧数都决定了用户体验的流畅度，并最终决定了用户体验的效果。在用户体验尤其重要的今天，我们必须能够有效地解决这些体验问题，以免给产品造成不可挽回的伤害。
但通常， 这些指标是有一系列的复杂因素导致的。如果你要开发流畅的页面，或者断外web页面中的性能问题，那你就需要了解url是怎么变成页面的 ，  只有弄懂这些之后，你才可以站在全局的角度定位问题，或者写出更高效的代码 。 

你当然可以把浏览器看作一个黑盒子，左边输入一个url ，经过黑河处理之后，右边返回你预期的效果 。 如果你对盒一无所知 ，你也依然可以写前端代码，也可以使用很多最佳实践的策略来优化代码  ，    这就如同不了解操作系统的工作原理，同样也可以在操作系统上面写应用一样。     

如果你了解浏览器的工作原理，更加的可以把这些知识点串成线连成网，最终形成自己的知识体系面，就像专家一样思考问题解决问题的能力。 

3. 在快节奏的技术迭代中把握本质

Node.js上前端发展的一个核心推动力。Node.js上基于chrome的javaScript引起V8来实现的，它的特点是可以脱离浏览器环境来执行JavaScript，于是大家惊讶的发现，原来也可以使用JavaScript来写服务器程序 。尽管Node.js的诞生时间不长，  但其周边已经形成了一个庞大的生态系统，与此同时各种新标准新技术纷至沓来  ，前端生态空前繁荣 。

为什么Node.js能如此快速地发展？   根本原因还是 浏览器功能以及整个前端的开发环境 ，不足以支撑日益增长的需求，所以变化是这段时间的主旋律，这种变化直接扩大了前端工程师的知识半径 ，这也导致很多前端开发工程师变成了爆栈工程师。

  未来随着脚本执行效率的提高，页面渲染性能的提升和开发工具链的完善，接下来的前端会进入一个相对平稳的阶段  ，通俗的理解就是等到核心技术足以支撑核心需求  ，那么前端生态会进入一个相对稳定的状态 。 

如果了解了浏览器的工作机制，那么你可以梳理出来前端技术的发展脉络  ，更加深刻的理解当前的技术，同时你也会清楚不足之处  及以及演化方向，那么接下来我们看前端技术  ，是如何针对这些核心诉求做演进的？

1）脚本执行速度问题
 比如针对JavaScript设计缺陷机执行效率的问题，可以从以下两个途径去解决 ， 
 *不断修订和更新语言本身，这样你就应该知道es6，es7，es8，或者TypeScript出现的必要性，那么修订对目前生态环境的改动量是最小的，所以推进起来会比较容易 。
*  颠覆性的使用新语言  ，这就是webAssembly出现的原因，webAssembly需要经过编译器编译，所以体积小，时间速度快使用，它能够大幅度提升语言的执行效率，但语言本身的完善和生态的构建都需要花很长的时间来打造。    
2）前端模块化开发
 比如 随着外部应用在各个领域的深入，外部工程的复杂程度也越来越高，这就产生了模块化开发的需求，于是相应出现了webComponent标准，我们所熟悉的React和Vue都在渐渐的适应web component标准 ，  同时各种前端框架的最佳实 践也会反过来去影响ebComponent的标准制定。   
3）渲染效率
 同样如果理解浏览器的渲染流程，那么你应该知道目前页面的渲染依然存在很大缺陷，然后你就清楚的避开这些问题，从而开发出更加高效的外围应用，与此同时，Chrome团队也在着手改善这些缺陷，比如正在开发的下一代布局方案LayoutNG， 还有渲染瘦身方案Slim Paint，其目的都是让渲染变得更加高效和简单。

综上可以看出触发这些改变的背后因素是当前技术制约了现实的需求，所以了解浏览器是如何工作的，能让你站在更高的维度去理解前端 。