客户端容器 | 青训营笔记

鉴常明
59 阅读8分钟

客户端容器

01.浏览器架构

  1. **单进程架构：**所有模块运行在同一个进程里，包含网络、插件、JavaScript运行环境等
  2. **多进程架构：**主进程、网络进程、渲染进程、GPU进程、插件进程
  3. **面向服务架构：**将原来的UI、数据库、文件、设备、网络等，作为一个独立的基础服务

image-20230422153603049.png

浏览器架构对比

image-20230422153759889.png

浏览器架构-任务管理器

image-20230422154052171.png

浏览器架构-多进程分工

image-20230422154128890.png

特殊标注的进程会主要讲解

  • 为什么会有单进程架构？

    答：主要还是因为早期受硬件的限制

  • 面向服务架构是否会替代多进程架构？

    答：长期来看，可能会，因为面向服务架构是谷歌16年时在多进程架构的基础上进行演进的，在性能比较好的设备上，一般都会做成面向服务架构

02.渲染进程

常见浏览器内核

image-20230422154723336.png

渲染进程-多线程架构

内部是多线程实现，主要负责页面渲染，脚本执行，事件处理，网络请求等

image-20230422155015097.png

JS引擎 VS 渲染引擎

  1. 解析执行JS

  2. XML解析生成渲染树，显示在屏幕

  3. 桥接方式通信

image-20230422155152113.png

> 渲染进程-多线程工作流程

1. 网络线程负责加载网页资源

2. JS引擎解析JS脚本并且执行

3. JS解析空闲时，渲染线程立即工作

4. 用户交互、定时器操作等产生会回调函数放入任务队列

5. 事件线程进行事件循环、将队列里 的任务取出交给JS引擎执行

image-20230422155433233.png

    > 看一道笔试题

    以下代码在浏览器环境下输出顺序、内容

    ```js
    const now = Date.now()
    
    setTimeout(() => {
        console.log("time10", Date.now() - now); // 输出？？
    }, 10)
    setTimeout(() => {
        console.log("time30", Date.now() - now); // 输出？？
    }, 30)
    
    while(true){
        if(Date.now() - now >= 20){
            break;
        }
    }+987
    
    console.log(Date.now() - now); // 输出？？ 
    
    /* 
    	输出： 20 time10 20 time30 30
    	因为同步代码先加入任务队列，异步的后加入
    	在while循环退出后，先执行全局的输出语句输出20
    	之后因为第一个定时器已经走完所以里面的语句也被加入消息队列
    	在同步代码的后面
    	所以执行完全局的输出语句后，紧接着就执行第一个定时器里的输出语句
    	输出time10 20
    	最后等待第二个定时器走完事件，其内的输出语句被推入任务队列
    	由于任务队列为空，所以可以马上就执行
    	输出 time30 30
    */
    
    
    
    ```

03.Chrom运行原理

03.1浏览器输入URL后发生了什么（八股文）

Chrome运行原理-如何展示网页

image-20230422170733184.png

Chrome运行原理-输入处理

  1. 用户Url框输入内容后，UI线程会判断输入的是一个URL地址，还是一个query的查询

  2. 如果是URL地址，直接去站点请求资源

  3. 如果是query，会将输入的内容发送给谷歌的搜索引擎（其实谷歌的搜索引擎也是一个站点，Brower Process）

image-20230422171243221.png

> Chrome运行原理-开始导航当



1.用户按下回车，UI线程通知网络线程发起一个网络请求，来获取站点内容

2.请求过程中，tab处于loading状态

image-20230422171400618.png

> Chrome运行原理-读取效应

1.网络线程收到HTTP响应后，先检查响应头的媒体类型（MIME Type）

2.如果响应主体是一个HTML文件，浏览器将内容交给渲染进程

3.如果拿到的是其他类型文件，比如Zip、exe等，则交给下载管理器处理

image-20230422171733451.png

> Chrome运行原理-寻找渲染进程

1.网络线程做完所有检查后，会告知主进程数据已准备完毕，主进程确认后为这个站点寻找一个渲染进程

2.主进程通过IPC消息告知渲染进程去处理本次导航

3.渲染进程开始接收数据并告知主进程自己已开始处理，导航结束，进入文档加载阶段

image-20230422172030564.png

渲染进程-资源加载

1.收到主进程的消息后，开始加载HTML文档

2.除此之外，还需要加载子资源，比如一些图片，CSS样式文件以及JavaScript脚本

image-20230422172304728.png

渲染进程-构建渲染树

1.构建DOM树，将HTML文本转化成浏览器能够理解的结构

2.构建CSSOM树，浏览器同样不认识CS，需要将CSS代码转化成可理解的CSSOM

3.构建渲染树，渲染树是DOM树和CSSOM树的结合

image-20230422172515186.png

渲染进程-页面布局

1.根据渲染树计算每个节点的位置和大小

2.在浏览器页面区域绘制元素边框

3.遍历渲染树，将元素以盒模型的形式写入文档流

image-20230422172653498.png

渲染进程-页面绘制

1.构建图层：为特定的节点生成专用图层

2.绘制图层：一个图层分成很多绘制指令，然后将这些指令按顺序组成一个绘制列表，交给合成线程

3.合成线程接收指令生成土图块

4栅格线程将图款进行栅格化（把图块转成位图）

5.展示在屏幕上

image-20230422173008766.png

前端性能performance

1.时间花在哪

2.什么情况下卡顿

image-20230422173326384.png

Scripting：Script解析花费时间

Rendering：花时较短

Painting：花时较短

Idle：空闲时间

首屏优化（一些优化方案）

1.压缩、分包、删除无用代码

2.静态资源分离

3.JS脚本非阻塞加载（scrpit标签放在底部，也js本身会阻塞加载）

4.缓存策略

5.SSR

6.预置loading、骨架屏

渲染优化

1.GPU加速

如：

颜色渐变可以使用通过设置透明度opacity去实现，因为会改变像素点，符合重复且大量的特点，会新建图层，交给 gpu 渲染。

用transform做动画，每个样式值的计算也符合重复且大量的特点，也默认会使用 gpu 加速。

2.减少回流、重绘

如：

transform代替left、top等移动。

用visibility去控制元素的显示的隐藏（替代display：none）

千万不要使用table布局，因为table是一个很大的表单，里面很多东西都改变了，都会重新布局

3.离屏渲染

非离屏渲染：渲染时始终在画面上

离屏渲染：会开辟一段内存缓冲区，先把要渲染的内容在里面渲染好了，等它完成了最后一帧渲染后，再把它放到页面上

如：

用canvas画很多线或者点的时候，如果不用离屏渲染，就会感觉到明显的掉帧

4.懒加载

将所需要的资源先加载到本地，当我们要使用某个资源时，就可以直接到缓存里去取

JS优化

1.防止内存泄漏

通常情况下，用全局变量时容易产生内存泄漏

定时器（建议自己封装一个会自动消除的定时器）

2.循环尽早break

3.合理使用闭包

4.减少Dom访问

比如一个dom要经常使用的话，我们要用一个变量去缓存起来，不要总是去页面访问它

5.防抖、节流

防抖：防止多次提交后，它只执行最后一次的结果

节流：在规定时间内，当你多次调用重复操作时，它只会执行一次

使用场景：滚动时、dom拖拽时，手指在屏幕移动时

6.Web Workers

与JS引擎相互独立，它不会阻塞浏览器渲染

缺点：它在传输时是文本形式传输的，当传输的东西很大时，会损耗性能

优点：buffer可以直接传输，可以应用在图片、视频、音频的传输上

04.跨端容器

为什么需要跨端？

1.开发成本、效率

2.一致性体验

3.前端开发生态

image-20230422180337563.png

有哪些跨端方案

  • webview
  • 小程序
  • RN / WeeX
  • Lynx(字节的跨段方案)
  • Flutter

WebView

1.WebView，即网页视图，用于加载网页url，并展示其内容的控件

2.可以内嵌在移动端App内，实现前端混合开发，大多数混合框架都是基于WebView的二次开发；比如lonic、Cordova、uniapp

常见的WebView分类

常用webview，Android，IOS，国产Android

image-20230422180803838.png

使用WebView优势

1.一次开发，处处使用，学习成本低

2.随时发布，即时更新，不用下载安装包

3.移动设备性能不断提升，性能有保障

4.通过JSBridge的原生系统交互，实现复杂功能

WebView使用原生能力

JavaScript调用Native

  • API注入：Native获取JavaScript环境上下文，对其挂载的对象或者方法进行拦截
  • 使用WebView URL Scheme跳转拦截
  • IOS上 window.webkit.messageHandler直接通信

Native调用JavaScript

  • 直接通过webview暴露的API执行JS代码
  • IOS webview.stringByEvaluatingJavaScriptFromString
  • Android wevview.evakuateJavascript

WebView< - > Native通信

1.JS环境中提供通信的JSBridge

2.Native端提供SDK响应JSBridge发出的调用

3.前端和客户端分别实现对应功能模块

image-20230422181607340.png

实现一个简易JSBridge

image-20230422181646124.png

小程序

1.微信、支付宝、百度小程序、小米直达号

2、渲染层-webview

3.双线程，多webview架构

4.数据通信，Native转发

image-20230422181836697.png

React Native/WeeX

1.原生组件渲染

2.React/Vue框架

3.virtual dom

4.JSBridge

image-20230422181953222.png

Lynx

1.Vue

2.JS Core / V8

3.JSBinding

4.Native UI / Skia

image-20230422182109329.png

Flutter

1.wideget

2.dart vm

3，skia图形库

image-20230422182201616.png

跨端容器-通用原理

1.UI组件

2.渲染引擎

3.逻辑控制引擎

4.通信引擎

5.底层API抹平表现差异

image-20230422182322820.png

跨端方案对比

image-20230422182351376.png

思考

1.同样是基于webview渲染，为什么小程序体验比webview流畅

**答：**最大的一点就是小程序做了离线缓存，还有是基于wenview做了一些精致，一些危险的操作都是被禁止的

2.未来的跨端方案是什么

**答：**可能还是会回归webview，虽然体现性能不是最好，但是却是使用最广的

课程总结

++++

image-20230422183020215.png

avatar
文章
阅读
粉丝