编程范式
编程语言分类
JS是基于原型和头等函数的多范式语言融合了：
·过程式
·面向对象
·函数式
·响应式
编程范式
程序语言特性：
根据语言特性进行分类：
过程式编程 包括
自顶向下 和 结构化编程,主要引入了结构化编程的思想。
自顶向下：
面向过程的问题：
·数据与算法关联弱 ·不利于修改和扩充 ·不利于代码重用
面向对象编程过程：
. 封装 ・继承 ・多态、 ・依赖注入
响应式编程：
·异步/离散的函数式编程 ·数据流 ·操作符 ·过滤 ·合并 ·转化 ·高阶
总结：
浏览器架构：
架构
多进程分工：
浏览器内核：
多线程架构：
JS引擎和渲染引擎对比：
JS引擎和渲染引擎是相互独立的，
1.解析执行JS 2.XML解析生成渲染树,显示在屏幕 3.桥接方式通信
多线程工作流程：
1.网络线程负责加载网页资源 2.JS引擎解析JS脚本并且执行 3.JS解析引擎空闲时,渲染线程立即工作 4.用户交互、定时器操作等产生回调函数 放入任务队列中 5.事件线程进行事件循环,将队列里的任 务取出交给JS引擎执行
Chrome浏览器运行原理：
输入处理：
1.用户Url框输入内容的后,UI线程会判断输入的是一个URL地址呢,还是一个query查询条件 2,如果是URL,直接请求站点资源 3.如果是query,将输入发送给搜索引擎
开始导航
1.当用户按下回车,UI线程通知网络线程 发起一个网络请求,来获取站点内容 2.请求过程中,tab处于loading状态
读取响应
1.网络线程接收到HTTP响应后,先检查 响应头的媒体类型(MIMEType) 2.如果响应主体是一个HTML文件,浏览 器将内容交给渲染进程处理 3.如果拿到的是其他类型文件,比如Zip、 exe等,则交给下载管理器处理
寻找渲染进程
1.网络线程做完所有检查后,会告知主进 程数据已准备完毕,主进程确认后为这个站点寻找一个渲染进程 2.主进程通过IPC消息告知渲染进程去处理本次导航 3.渲染进程开始接收数据并告知主进程自己已开始处理,导航结束,进入文档加载阶段
资源加载：
1.收到主进程的消息后,开始加载HTML 文档 2.除此之外,还需要加载子资源,比如一 些图片,CSS样式文件以及JavaScript脚 本
构建渲染树
1.构建DOM村,将HTML文本化成 洌器能够理解的构 2.构建CSSOM,器同不 CSS,需要将CSS代化为可理解 的CSSOM 3.构建染,染是DOM和 CSSOM村的合
页面布局
1.根据渲染树计算每个节点的位置和 大小 2.在浏览器页面区域绘制元素边框 3,遍历渲染树,将元素以盒模型的形 式写入文档流
页面绘制
1.构建图层:为特定的节点生成专用图 层 2.绘制图层:一个图层分成很多绘制指 令,然后将这些指令按顺序组成一个 绘制列表,交给合成线程 3.合成线程接收指令生成图块 4.栅格线程将图块进行栅格化 5.展示在屏幕上
前端性能
性能优化
首屏优化
1.压縮、分包、删除无用代码 2.静态资源分离 3.JS脚本非阻塞加载 4.缓存策略
- SSR 6.预置loading、骨架屏
渲染优化
1.GPU加速 2.减少回流、重绘 3.离屏渲染 4.懒加载
