浏览器工作原理学习（十九）

1. 浏览器的三大进化路线

• 应用程序Web化
• Web应用移动化
• Web操作系统化

2. 渐进式网页应用（PWA）

• PWA是一套理念，渐进式增强Web的优势，并通过技术手段渐进式缩短和本地应用或者小程序的距离。

3. Web应相对于本地应用缺少了什么

• Web应用缺少离线使用能力，在离线或者弱网环境下基本上是无法使用的。而用户需要的是沉浸式的体验，在离线或者弱网环境下能够流程地使用时用户对一个应用的基本要求。
• Web应用缺少了消息推送能力。
• Web缺少一级入口，也就是将Web应用安装到桌面，在需要的时候直接从左面打开Web应用，而不是每次都需要通过浏览器打开。
• 针对以上缺陷，PWA提出通过Service Worker来解决离线存储和消息推送的问题，通过引入manifest.json来解决一级入口问题。

4. 什么是Service Worker

• 在页面和网络之间增加一个拦截器，用来缓存和拦截请求。
• Web Worker的功能只执行一些与DOM无关的JS脚本，然后通过postMessage方法将执行的结果返回主线程。Web Worker就是在渲染进程中开启一个新的线程，它的生命周期是和页面关联的。
• 让其运行在主线程之外就是Service Worker来自Web Worker的一个核心思想。Web Worker是临时的，每次JS脚本执行完成之后就会退出，执行结果也不能保存下来如果下次还有同样的操作需要重新来一遍。Service Worker需要在Web Worker的基础之上加上存储功能。
• Service Worker需要为多个页面提供服务，所以不能把Service Worker和单个页面绑定起来。所以其是运行在浏览器进程中的。因为浏览器进程生命周期最长，其能够为所有页面提供服务。
• 消息推送也是基于Service Worker来实现的。
• Service Worker采用HTTPS协议，支持Web页面默认的安全策略，同源策略、内容安全策略（CSP）
• 渲染效率、对系统设备的支持程度、WebAssembly等是PWA崛起的底层核心技术。

WebComponent组件化

1. 什么是组件化

• 对内高聚合，对外低耦合：对内各个元素彼此紧密结合、相互依赖，对外和其他组件的联系小且接口简单。
• 组件化可以减低整个系统的耦合度，同时也降低了程序员之间的沟通复杂度，让系统变得更加易于维护
• 大多数语言都有自己的函数级作用域和块级作用域，这有利于封装内部状态并提供接口给外部。

2. 阻碍前端组件化的因素

• CSS是全局影响的。
• 因为页面只有一个DOM，任何地方都可以直接读取和修改DOM。
• WebComponent 它给出的解决思路是，提供局部视图的封装能力，可以让DOM和CSSOM和JS运行在局部环境中，这样使得局部CSS和DOM不会影响到全局。

3. WebComponent是怎么实现组件化的

• WebComponent是一套技术的组合，涉及到自定义元素(Custom elements)、影子DOM(Shadow DOM)和HTML模板(HTML templates)
• 使用template属性创建模板。
• 影子DOM的作用是将模板中的内容与全局DOM和CSS进行隔离，这样就能实现元素和样式的私有化。可以将影子DOM看成是一个作用域，其内部的样式和元素不会影响到全局的样式和元素，而在全局环境下，要访问影子DOM内部的样式或者元素也是需要通过约定好的接口的。
• 使用customElements.define来自定义元素了。
• 影子DOM中的元素对于整个网页是不可见的。
• 影子DOM的CSS不会影响到整个页面的CSSOM，影子DOM内部的CSS只对内部的元素起作用。
• 浏览器为了实现影子DOM的特性，在代码内部做了大量的条件判断，比如当通过DOM接口去查找元素时，渲染引擎会去判断自定义元素属性下面的shadow-root元素是否时影子DOM，如果是影子DOM，那么就直接跳过shadow-root元素的查询操作。这样DOM API就无法直接查询到影子DOM的内部元素了。
• 生成布局树的时候，渲染引擎也会判断自定义元素属性下面的shadow-root元素是否是影子DOM，如果是，那么影子DOM内部元素的节点选择CSS样式的时候，会直接使用影子DOM内部的CSS属性。所以最终渲染出来的效果就是影子DOM内部定义的样式。