客户端容器 | 青训营笔记

用户1320468246909
41 阅读5分钟

客户端容器

浏览器架构演进

image-20230423202652034

架构对比

image-20230423202719911

多进程分工

image-20230423203606184

渲染进程

常见浏览器内核

image-20230423204056981

多线程架构

image-20230423204229912

js引擎vs渲染引擎

image-20230423204321134

js引擎解析生成ast语法树，再翻译成字节码，v8新规则会先将高频变量和函数成机器码

渲染进程——多线程工作

image-20230423204601105

一道笔试题

image-20230423204627653

image-20230423210105512

首先执行同步函数image-20230423210119679

接着在任务队列里面寻找image-20230423210246036

因为在10s时队列已经有一个回调了，会直接输出来

然后再等30s时队列接受回调，再输出

chrome运行原理

image-20230423214203987

image-20230423214846933

image-20230423214943978

image-20230423214958839

image-20230423222518930

image-20230423222642438

image-20230423222721764

image-20230423222848919

image-20230423222903393

image-20230423223043238

image-20230423223151487

image-20230423223527601

2.由于页面中有时候会有一部分元素是有持续性的动画效果的，所以会一直触发回流和重绘，此时可以使这些元素脱离文档流，以此减少页面回流和重绘的次数；使用浮动( float )、绝对定位( position: absolute )可以使元素脱离文档流；

image-20230423223841848

  1. 合理使用闭包

    闭包可以使用以下方式来运用：

    将内部函数作为返回值：将内部函数作为返回值，即可创建闭包。 将内部函数作为参数传递给其他函数：将内部函数作为参数传递给其他函数，即可在其他函数中创建闭包。 使用 IIFE（立即执行函数表达式）：使用 IIFE 可以立即执行函数，并且将内部函数作为返回值，从而创建闭包。

跨端容器

image-20230423224224366

image-20230423224249784

image-20230423224301338

image-20230423224310646

image-20230423224328765

image-20230423224603211

image-20230423224742833

image-20230423224815063

image-20230423224953520

image-20230423225041266

image-20230423225054532

image-20230423225104793

dart vm是dart的虚拟环境

image-20230423225118401

image-20230423225140370

image-20230423225127396

1.做了离线缓存，做了一些定制比如dom操作啥的封锁了

2.webview，最广

image-20230423225619806

avatar
文章
阅读
粉丝