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

简介: 笔记

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

目录
相关文章
|
7月前
|
前端开发 JavaScript UED
如何优化前端网页加载速度:最佳实践与技巧
本文探讨了如何通过优化前端网页加载速度来提升用户体验和网站性能。从资源压缩和合并、减少HTTP请求、优化图片、使用CDN加速、采用异步加载和延迟加载等方面介绍了一系列最佳实践和技巧,帮助开发者更好地优化前端性能,提升网页加载速度。
|
1月前
|
缓存 监控 测试技术
如何利用浏览器的缓存来优化网站性能?
【10月更文挑战第23天】通过以上多种方法合理利用浏览器缓存,可以显著提高网站的性能,减少网络请求,加快资源加载速度,提升用户的访问体验。同时,要根据网站的具体情况和资源的特点,不断优化和调整缓存策略,以适应不断变化的业务需求和用户访问模式。
91 7
|
5月前
|
JavaScript 前端开发 Web App开发
Chrome插件实现问题之单进程浏览器的不稳定主要体现在什么地方
Chrome插件实现问题之单进程浏览器的不稳定主要体现在什么地方
|
6月前
|
安全 JavaScript 前端开发
Wasmer 3.0 发布,可在浏览器外运行 WebAssembly
Wasmer 3.0 发布,可在浏览器外运行 WebAssembly
74 2
|
7月前
|
前端开发 JavaScript 数据可视化
探索浏览器的内心世界:渲染机制的奥秘
探索浏览器的内心世界:渲染机制的奥秘
探索浏览器的内心世界:渲染机制的奥秘
|
7月前
|
缓存 前端开发 JavaScript
如何优化前端网页性能
网页性能是用户体验的重要因素之一,许多因素会影响网页的性能,包括加载时间、响应速度和渲染时间等。本文将介绍如何优化前端网页性能,从减少HTTP请求数、压缩资源、使用CDN以及异步加载等方面入手,为读者提供实用的技巧和建议。
|
缓存 并行计算 JavaScript
移动端浏览器性能优化探索
移动端浏览器性能优化探索
163 0
|
缓存 边缘计算 前端开发
系统介绍浏览器缓存机制及前端优化方案
系统介绍浏览器缓存机制及前端优化方案
系统介绍浏览器缓存机制及前端优化方案
|
前端开发 JavaScript Java
浏览器原理 24 # 页面性能:如何系统地优化页面?
浏览器原理 24 # 页面性能:如何系统地优化页面?
116 0
浏览器原理 24 # 页面性能:如何系统地优化页面?
|
Web App开发 缓存 监控
浏览器原理 38 # 加载阶段性能:使用 Audits(Lighthouse) 来优化 Web 性能
浏览器原理 38 # 加载阶段性能:使用 Audits(Lighthouse) 来优化 Web 性能
235 0
浏览器原理 38 # 加载阶段性能:使用 Audits(Lighthouse) 来优化 Web 性能
下一篇
DataWorks