性能优化1:从URL输入到页面展示发生了什么

时间:2021-1-8 作者:admin

性能优化1

一.为什么要优化性能

1.网页加载时间超过3秒就会有百分之57的用户会选择关闭当前网页;
2.在ToC的业务中糟糕的性能直接影响到交易量,下单率等等;

曾经我们的在学习前端的时候相信都接触过雅虎军规35条等等的性能优化建议

二.我们如何看到网页的

2.1 进程和线程

进程包含线程,线程依赖进程。曾经的浏览器是单进程的。

如此多的功能模块运行在一个进程里,是导致单进程浏览器不稳定不流畅不安全的一个主要因素。下面我就来一一分析下出现这些问题的原因。

2007年以后多进程浏览器的开始盛行;Chrome的改进了浏览器的设计。
如下:

如今演变成现在的这样子:

从图中可以看出,最新的 Chrome 浏览器包括:1 个浏览器(Browser)主进程、1 个 GPU 进程、1 个网络(NetWork)进程、多个渲染进程和多个插件进程。

浏览器进程:负责交互,显示,提供存储等功能;

渲染进程:核心任务是将 HTML、CSS 和 JavaScript 转换为用户可以与之交互的网页,排版引擎 Blink 和 JavaScript 引擎 V8 都是运行在该进程中,默认情况下,Chrome 会为每个 Tab 标签创建一个渲染进程。出于安全考虑,渲染进程都是运行在沙箱模式下;

GPU进程:处理3D css;

网络进程:负责网络的资源的加载工作;

插件进程:·····

三.老生常谈-从url输入到页面加载出来经历了什么

1.浏览器进程,输入URL会开始域名解析,先去本地host去匹配,如果发现host中存在映射关系,就直接去对应的ip,如果没有就要经过dns解析,查找ip;

dns解析过程如下:
浏览器:
域名 -> 浏览器缓存 -> Y -> ip
浏览器没有就会到本机:
-> OS DNS缓存/hosts -> Y -> 返回ip
没有就到路由器:
-> dns缓存中是否有 -> Y ->返回
没有 DNS服务器:
-> dns服务器 // 如果没有命中还会去到顶级域名服务器查找

2.获取端口号,http默认为80 https默认为443
3.网络进程,根据ip和端口号建立tcp链接,经历3次握手如果是https还要建立tls链接;

相关建立链接的过程自行查找,可以查看一下http0.9,1.0,1.1,2.0,3.0的区别

4.发起请求前会读取本地的缓存;

首先会读取内存中的,再是硬盘,如果都没有再去服务端;
在network中会看到from memory cache,from disk cache, 304的状态码;

5.http发起请求先检查浏览器的强缓存,如果命中,直接返回对应资源文件的副本;

强缓存通过响应头字段控制:Expires,cache-control,expires是过期时间,是一个绝对值,过期就重新请求;
cache-control有几个属性值,比如max-age,no-cache,no-store等

cache-control优先级高于expires

6.如果没有命中,就需要走协商缓存会去对比资源,是否需要更新,如果不需要读取本地的缓存,如果需要更新就加载新的资源;
7.服务器返回HTML响应给浏览器
8.渲染进程:浏览器解析HTML
9.对HTML页面引用的所有资源包括js,css,图片等等,浏览器都发送GET请求,又重复上面的过程

以上是表面上的经历,在浏览器环境中又做了些什么呢?
1.首先,浏览器进程接收到用户输入的 URL 请求,浏览器进程便将该 URL 转发给网络进程。
2.然后,在网络进程中发起真正的 URL 请求。接着网络进程接收到了响应头数据,便解析响应头数据,并将数据转发给浏览器进程。浏览器进程接收到网络进程的响应头数据之后,发送“提交导航 (CommitNavigation)”消息到渲染进程;渲染进程接收到“提交导航”的消息之后,便开始准备接收 HTML 数据,接收数据的方式是直接和网络进程建立数据管道;
3.最后渲染进程会向浏览器进程“确认提交”,这是告诉浏览器进程:“已经准备好接受和解析页面数据了”。
4.浏览器进程接收到渲染进程“提交文档”的消息之后,便开始移除之前旧的文档,然后更新浏览器进程中的页面状态

简单来说就是:url输入 -> 网络进程 -> 浏览器进程 -> 遇到html -> 提交导航 -> beforeunload -> 导航完成 -> 渲染进程开始准备

4.渲染流程是怎么样的

渲染流程非常的复杂,但是可以分步来看,总体流程大概如下:

HTML/CSS/JS -> 子流程 -> 子流程 -> 子流程 -> 完整的页面。

子流程包含以下内容:构建 DOM 树、样式计算、布局阶段、分层、绘制、分块、光栅化和合成。

如何去分析这个过程;关注三要素:输入-> 加工 -> 输出。

4.1 构建DOM树

问1: 为何要构建DOM树 ?

问2: 如何构建DOM树 ?

输入HTML -> 解析HTML -> DOM树

问3: 如何解析?

1.首先浏览器会将原始字节的按照编码格式转成字符串
2.第二部 令牌化;将字符串转成成HTML,标签;
3.给这些标签转化成一个个对象,赋予样式和属性;
4.生成DOM树

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。