深入浏览器内部谈性能优化

简介: 笔记

1. 浏览器发展历史


a. 1995 年,美国网景公司因“网景浏览器”的发布而快速崛起


b. 同年,微软发布windows95,捆绑IE


c. 2002年,微软占据了浏览器市场80%的份额



2. 浏览器三大进化路线(Web应用能做的事以及未来发展趋势)


a) 应用程序Web化,如:视频、音频、游戏


b) Web应用移动化,如:谷歌新推出的PWA方案


c) Web操作系统化,如,SOA,WebAssembly



3. 学习浏览器的重要性


a) 准确评估 Web 开发项目的可行性


i. 技术选型


ii. 方案规划


b) 从更高维度审视项目


i. 用户体验


ii. 整体观感


c) 在快节奏的技术迭代中把握本质


i. 脚本执行速度


ii. 前端模块化开发



4. 进程与线程


a) 概念


i. 线程:用来处理程序任务,不能单独存在


ii. 进程:即是一个程序运行的实例。启动一个程序的时候,操作系统会为该程序创建一块内存,用来存放代码、运行中的数据和一个执行任务的主线程,我们把这样的一个运行环境叫进程。


iii. 线程图解如下:


iv.1.png

v. 线程是依附于进程的,而进程中使用多线程并行处理能提升运算效率

b) 进程与线程的四大特点

i. 进程中的任意一线程执行出错,都会导致整个进程的崩溃。

ii. 线程之间共享进程中的数据

1. 如图:线程之间可以对进程的公共数据进行读写操作

2.


2.png


iii. 当一个进程关闭之后,操作系统会回收进程所占用的内存

iv. 进程之间的内容相互隔离

5. 渲染流程:HTML+CSS+JS是如何渲染成页面的?

a)

3.png从上图可以看出,左边的HTML、CSS、JS经过中间渲染模块的处理,变成了用户在屏幕上看到的元素

b)



4.png


由于渲染机制过于复杂,所以渲染模块在执行过程中会被划分为很多子阶段,输入的 HTML 经过这些子阶段,最后输出像素。我们把这样的一个处理流程叫做渲染流水线。如图:

5.png


c) 按照渲染的时间顺序,流水线可分为如下几个子阶段:构建 DOM 树、样式计算、布局阶段、分层、绘制、分块、光栅化和合成。


i. 构建dom树


1. 原因:浏览器无法直接理解和使用 HTML,所以需要将 HTML 转换为浏览器能够理解的结构——DOM 树


2. 树结构:


a)

6.pngb) 构建过程:

c)


7.png


ii. 样式计算

1. 将CSS转化成浏览器能够理解的结构

a) CSS来源,如图所示

b)

8.png


2. 转换样式表中的属性值,使其标准化

a)


9.png


3. 计算出 DOM 树中每个节点的具体样式

a)

10.png

iii. 布局阶段

1. 创建布局树

a) 构造过程:

b)


11.png

目录
相关文章
|
1月前
|
前端开发 JavaScript UED
如何优化前端网页加载速度:最佳实践与技巧
本文探讨了如何通过优化前端网页加载速度来提升用户体验和网站性能。从资源压缩和合并、减少HTTP请求、优化图片、使用CDN加速、采用异步加载和延迟加载等方面介绍了一系列最佳实践和技巧,帮助开发者更好地优化前端性能,提升网页加载速度。
|
4月前
|
存储 SQL JavaScript
聊一聊常见的浏览器数据存储方案(上)
聊一聊常见的浏览器数据存储方案(上)
111 0
|
4月前
|
存储 前端开发 JavaScript
聊一聊常见的浏览器数据存储方案(下)
聊一聊常见的浏览器数据存储方案(下)
101 0
|
11月前
|
缓存 并行计算 JavaScript
移动端浏览器性能优化探索
移动端浏览器性能优化探索
|
缓存 边缘计算 前端开发
系统介绍浏览器缓存机制及前端优化方案
系统介绍浏览器缓存机制及前端优化方案
系统介绍浏览器缓存机制及前端优化方案
|
JavaScript 前端开发 UED
浏览器原理 38 # 加载阶段性能:使用 Audits(Lighthouse) 来优化 Web 性能2
浏览器原理 38 # 加载阶段性能:使用 Audits(Lighthouse) 来优化 Web 性能
201 0
浏览器原理 38 # 加载阶段性能:使用 Audits(Lighthouse) 来优化 Web 性能2
|
Web App开发 缓存 监控
浏览器原理 38 # 加载阶段性能:使用 Audits(Lighthouse) 来优化 Web 性能
浏览器原理 38 # 加载阶段性能:使用 Audits(Lighthouse) 来优化 Web 性能
171 0
浏览器原理 38 # 加载阶段性能:使用 Audits(Lighthouse) 来优化 Web 性能
|
前端开发 JavaScript Java
浏览器原理 24 # 页面性能:如何系统地优化页面?
浏览器原理 24 # 页面性能:如何系统地优化页面?
88 0
浏览器原理 24 # 页面性能:如何系统地优化页面?
|
存储 缓存 前端开发
浏览器缓存机制(一):概述
浏览器缓存机制(一):概述
110 0
|
Web App开发 JavaScript 前端开发
从浏览器渲染原理,说一说如何实现高效的动画
从浏览器渲染原理,说一说如何实现高效的动画
218 0
从浏览器渲染原理,说一说如何实现高效的动画