首页 技术 正文
技术 2022年11月20日
0 收藏 452 点赞 2,847 浏览 1427 个字

要彻底了解web性能优化的问题,得搞清楚浏览器的工作原理。

我们需要了解,你在浏览器地址栏中输入url到页面展示的短短几秒中,浏览器究竟做了什么,才能了解到为什么我们口中所说的优化方案能够起到优化作用。

浏览器的多进程架构(以下的例子都是以chrome为例)

chrome由多个进程组成,每个进程都有自己的核心职责,每个进程又包含多个线程,一个进程内的多个线程也会协同工作,配合完成进程的职责。

说了这么多,还是来张图更直白:

进程(process)和线程(thread)

web性能优化-浏览器工作原理

当我们启动一个应用,计算机会创建一个进程,操作系统会为进程分配一部分内存,应用也会创建多个线程来辅助工作,这些线程可以共享这部分内存中的数据。如果应用被关闭,进程就会被终结,操作系统会释放相应的内存。

一个进程还可以要求操作系统生成另外一个进程来执行不同的任务,系统会为新的进程分配独立的内存,两个进程之间可以使用IPC (Inter Process Communication)进行通信。如果一个进程反应迟钝,重启该进程不会影响其他的进程。

这是chrome多进程:

web性能优化-浏览器工作原理

有了这个基础,我们知道一个浏览器,可以是单进程多线程,也可以是多进程应用了。

这里我们来分析下chrome的多进程是怎么工作的

chrome主要进程

web性能优化-浏览器工作原理

Chrome有一个主进程(Browser Process)用来协调浏览器的其他的进程。

Browser Procee:

  • 负责包括地址栏,书签栏,前进后退等部分工作
  • 负责处理浏览器的一些不可见的底层操作,比如网络请求和文件访问

Renderer Process:

  • 负责一个网页内关于呈现的所有事情

Plugin Process:

  • 负责控制一个网页所用的插件,如flash

GPU Process:

  • 负责处理GPU相关的任务

Utility Process:

  • 负责工具相关的任务

Chrome多进程的优缺点比较:

优点:

某一渲染进程出问题不会影响其他的进程

缺点:

由于不同进程不能共享内存,不同的进程常常需要包含相同的内用。

那么从地址栏输入发生了什么:

1. 处理输入

  UI Thread 判断用户输入的是url还是query,开始显示spinner在地址栏

2.开始导航

  当用户点击回车键,UI Thread通知 Network Thread获取页面内容

  Network Thread会查询DNS,随后为请求建立TLS链接

3.去读响应

  当请求返回时,network thread会一句Content-Type和MIME Typesniffing判断响应内容的格式

  如果响应的内容是HTML,则把数据转给Renderer Process;

  如果是Zip文件或者其他文件,则把数据传输给下载管理器

4.查找Renderer Procee

  当上述所有完成后,network thread确认浏览器可以导航到请求网页,network thread会通知UI thread,UI Thread会查找到一个renderer process进行页面渲染

5.确认导航,Renderer Process开始渲染page。

6.额外的工作

  当渲染结束,rederer process会发送IPC信号到Browser process,UI thread会停止tab中的spinner.

还是用一张图来表示:

web性能优化-浏览器工作原理

在这个过程中,我们需要优化的地方,主要考虑:

  • dns是否通过缓存减少查询时间
  • 网络请求走最近的网络环境
  • 相同的静态资源缓存
  • 减小请求的大小
  • 服务端渲染优化

这里涉及的优化点,在后续文章中有讲解。

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:8,997
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,511
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,356
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,139
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,770
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,848