客户端容器 | 青训营笔记

Dillonz
118 阅读6分钟

前言

本文主要着重介绍浏览器的架构以及运行原理，并以一道八股文为例，讲解在Chrome浏览器里，网页是如何加载并且渲染成我们所见的画面。通过对本节课的学习，你还能了解到在浏览器里JS引擎和渲染引擎如何协同工作，如何从多个角度优化前端的性能体验。再以webview容器为扩展，带你认识一些常见的跨端方案。

1.浏览器架构

浏览器架构演进

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

image.png

浏览器架构对比

image.png

浏览器架构-任务管理器

image.png

浏览器架构-多进程分工

image.png

2.渲染进程

常见浏览器内核

image.png

渲染进程-多线程架构

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

image.png

image.png

JS引擎VS渲染引擎

  • 1.解析执行JS
  • 2.XML解析生成渲染树，显示在屏幕
  • 3.桥接方式通信

image.png

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

  • 1.网络线程负责加载网页资源
  • 2.JS引擎解析JS脚本并且在执行
  • 3.JS解析引擎空闲时，渲染线程立即工作
  • 4.用户交互、定时器操作等产生回调函数放入任务队列中
  • 5.事件线程进行事件循环，将队列里的任务取出交给JS引擎执行

image.png

笔试题

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

image.png

3.Chrome运行原理

如何展示网页

  • 浏览器地址输入URL后发生了什么

image.png

输入处理

  • 1.用户Url框输入内容后，UI线程会判断输入的是一个URL地址呢，还是一个query查询条件
  • 2.如果URL，直接请求站点资源
  • 3.如果是query，将输入发送给搜索引擎

image.png

开始导航

  • 1.当用户按下回车，UI线程通知网络线程发起一个网络请求，来获取站点内容
  • 2.请求过程中，tab处于loading状态

image.png

读取响应

  • 1.网络线程接收到HTTP响应后，先检查响应头 的媒体类型（MIME Type）
  • 2.如果响应主体是一个HTML文件，比如HTML文件，浏览器将内容交给渲染进程处理
  • 3.如果拿到的是其它类型文件，比如Zip、exe等，则交给下载管理器处理

image.png

寻找渲染进程

  • 1.网络线程做完所有检查后，会告知主进程数据已准备完毕，主进程确认后为这个站点寻找一个渲染进程
  • 2.主进程通过IPC消息告知渲染进程去处理本次导航
  • 3.渲染进程开始接收数据并告知主进程自己开始处理，导航结束，进入文档加载阶段

image.png

资源加载

  • 1.收到主进程的消息后，开始加载HTML文档
  • 2.除此之外，还需要加载子资源，比如一些图片，CSS样式文件以及JavaScript脚本

image.png

构建渲染树

  • 1.构建DOM树，将HTML文本转换成浏览器能够理解的结构
  • 2.构建CSSOM树，浏览器同样不认识CSS,需要将CSS代码转化为可理解的CSSOM
  • 3.构建渲染树，渲染树是DOM树和CSSOM树的结合

image.png

页面布局

  • 1.根据渲染树计算每个节点的位置和大小
  • 2.在浏览器页面区域绘制元素边框
  • 3.遍历渲染树，将元素以盒模型的形式写入文档流

image.png

页面绘制

  • 1.构建图层：为特定的节点生成专用图层
  • 2.绘制图层：一个图层分成很多绘制指令，然后将这些指令按属性组成一个绘制列表，交给合成线程
  • 3.合成线程接收指令生成图块
  • 4.栅格线程将图块进行栅格化
  • 5.显示在屏幕上

image.png

image.png

前端性能performance

  • 1.时间都花在哪
  • 2.什么情况下卡顿

image.png

首屏优化

  • 1.压缩、分包、删除无用代码
  • 2.静态资源分离
  • 3.JS脚本非阻塞加载
  • 4.缓存策略
  • 5.SSR
  • 6.预置loading、骨架屏

渲染优化

  • 1.GPU加速
  • 2.减少回流、重绘
  • 3.离屏渲染
  • 4.懒加载

JS优化

  • 1.防止内存泄露
  • 2.循环尽早break
  • 3.合理使用闭包
  • 4.减少Dom访问
  • 5.防抖、节流
  • 6.Web Workers

4.跨端容器

为什么需要跨端

  • 1.开发成本
  • 2.一致性体验
  • 3.前端开发生态

image.png

有哪些跨端方案

  • webview
  • xiaochengxu
  • PN/Weex
  • Lynx
  • Flutter

image.png

跨端容器-WebView

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

image.png

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

image.png

跨端容器-常用WebView分类

  • 常用Webview，Android，IOS，国产Android

image.png

跨端容器-使用WebView优势

  • 1.一次开发，处处使用，学习成本低
  • 2.随时发布，即时更新，不用下载安装包
  • 3.移动设备性能不断提升，性能有保障
  • 4.通过JSBridge和原生系统交互，实现复杂功能

跨端容器-WebView使用原生能力

  • JavaScript调用Native

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

  • Native调用JavaScript

    • 直接通过webview暴露的API进行JS代码
    • IOS webview.stirngByEvaluatingJavaScriptFromString
    • Android webview.evaluateJavaScript

跨端容器-WebView<->Native通信

  • 1.JS环境中提供的通信的JSBridge
  • 2.Native端提供SDK响应JSBridge发出的调用
  • 3.前端和客户端分别实现对应的功能模块

image.png

跨端容器-实现一个简易JSBridge

    interface CallArgs {
        callId: string  //调用Id，唯一标识
        module: string  //调用模块
        method: string  //调用方法
        data: any // 参数
    }
    const Callbacks = {} // 存放回调函数 callId 为key
    function applyBative = (payload:CallArgs,callback:Function)=>{
        const callId = prefix + callTime++
        Callbacks[callId] = callback
        const Args0: CallArgs = {
        callId：callId,
        module:payload.module || 'layout',
        method:payload.method || 'randomSize',
        data: payload.data,
      }
      fi(IOS){
          return window.webkitURL.messageHandler.postMessage(JSON.string(Args0))
      }else {
          // Android 对 window 上约定的对象进行拦截
          return window.AndroidBridge(JSON.string(Args0))
      }


       interface ResponseArgs {
           callId: string  //回调Id，与callId对应
           errCode: number
           errMsg?: string 
           data: unknown
       }
       // native 端通用 webview，参数都经过序列化
       const applyWebview = (res:string)=>{
           const response = JSON.parse(res) as ResponseArgs
           const {responseId} = response
           //从 Callbacks 找到对应的回调处理方法
           if(type og Callbacks[responseId] === 'fucntion'){
               Callbacks[responseId](response)
               //回调后删除该次回调函数
               delete Callbacks[responseId]
           }
        }
           
        window.JSBridge = {
            applyNative,
            applyWebview // 挂载在window上，供native直接调用
        
        }

跨端容器-小程序

  • 1.微信、支付宝、百度小程序、小米直达号
  • 2.渲染层-webview
  • 3.双线程，多webview架构
  • 4.数据通信，Native转发

image.png

跨端容器-React Native/Weex

  • 1.原生组件渲染
  • 2.React/Vue框架
  • 3.virtual dom
  • 4.JSBridge

image.png

跨端容器-Lynx

  • 1.Vue
  • 2.JS Core/V8
  • 3.JSBinding
  • 4.Native UI/Skia

image.png

跨端容器-Flutter

  • 1.wideget
  • 2.dart vm
  • 3.ia图形库

image.png

跨端容器-通用原理

  • 1.UI组件
  • 2.渲染引擎
  • 3.辑控制引擎
  • 4.通信桥梁
  • 5.底层API抹平表现差异

image.png

跨端方案对比

image.png

思考？

  • 1.同样基于webview渲染，为什么小程序体验比webview流畅
    • 离线缓存
  • 2.未来的跨端方案会是什么
    • 市场还是以Webview，性能体验可能不是最好，但运用比较广，其他的可能学习成本太高

引用

  • 字节内部课：客户端容器-字节前端初阶训练营
avatar
文章
阅读
粉丝