浏览器渲染原理及性能优化

大家好,我是前端岚枫,两个多月没更新博客了,这段时间在忙着找工作,入职新公司,各项都有序的进行着,过年的一年算是很特殊的一年,经历7.20暴雨,8月疫情在家办公一个月,及后面的疫情,12月开始原公司长期放假,这些种种,真是一言难尽,但是进入2022年有个好的开始,1月入职新公司,年会抽奖中奖,紧接着没有被疫情留在郑州,顺利回家过年。新的一年开始,我的技术博文更新也会持续更新。今天主要跟大家分享我整理的浏览器渲染原理及性能优化:性能优化是我们工作中常遇到一些问题, 也是面试官经常提问的问题,希望下面文章对大家有所帮助。

一、进程与线程

  • 进程是操作系统资源分配的基本单位,进程中包含线程
  • 线程是由进程所管理的,为了提升浏览器的稳定性和安全性,浏览器采用了多进程模型
image.png
  • 浏览器进程:负责界面显示、用户交互、子进程管理、提供存储等
  • 渲染进程: 每个页面都有单独的渲染进程,核心用于渲染页面
  • 网络进程:主要处理网络资源加载(html、css、js 等)
  • GPU进程:3d绘制,提高性能
  • 插件进程:chrome中安装的一些插件

二、从输入URL到浏览器显示页面发生了什么

用户输入的关键字还是URL?如果是关键字则使用默认搜索引擎生成URL

  1. 用户输入url地址(关键字 会将关键字根据默认引擎生成地址)会开始导航,浏览器进程里面做
  2. 浏览器进程 :会准备一个渲染进程用户渲染页面
  3. 网络进程加载资源,最终将加载的资源交给渲染进程来处理
  4. 渲染完毕显示 ipc

网络七层模型

  • 先去查找缓存,检测缓存是否过期,直接返回缓存中的内容
  • 看域名是否被解析,DNS协议,将域名解析成ip地址(DNS基于UDP)ip+端口号 host
  • 请求是https SSL协商
  • ip地址来进行寻地址,排队等待,最多能发送6个http请求
  • tcp 创建链接,用于传输(三次握手)
  • 利用tcp传输数据(拆分成数据包 有序)可靠、有序,服务器按照顺序来接受
  • http 请求(请求行 请求头 请求体)
  • 默认不会断开keep-alive, 为了下次传输数据时候可以复用上次的创建的链接
  • 服务器收到数据后(响应行 响应头 响应体)
  • 服务器返回301 302 会进行重定向操作
  • 服务器返回304 去查询浏览器缓存进行返回

http 0.9 负责传输html 最早的时候没有请求头和响应头
http 1.0 提供了 http的header 根据header 的不同来处理不同的资源
http 1.1 默认开启了keep-alive 链接复用 管线化 服务器处理多个请求(队头阻塞问题)
http 2.0 用同一个tcp链接来发送数据 一个域名一个tcp(多路复用)头部压缩 服务器可以推送数据给服务端
http3.0 解决了tcp的队头阻塞问题 QUIC协议 采用了udp

渲染流程

image.png
  1. 浏览器无法直接使用HTML,需要将HTML转化成DOM树。(document)
  2. 浏览器无法解析纯文本的css样式,需要对css进行解析成styleSheets.(document.styleSheets)
  3. 计算出DOM树中的每个节点的具体样式
  4. 创建渲染(布局)树,将DOM树中可见节点,添加到布局树中,并计算节点渲染到页面的坐标位置,(layout)
  5. 通过布局树,进行分层(根据定位属性,transform属性,clip属性等)生产图层树
  6. 将不同图层进行绘制,转交给合成线程处理,最终生产页面,并显示到浏览器上(Painting Display)

查看layer并对图层进行绘制的列表

  • css 不会阻塞html解析, 先解析html,再解析css, 样式
  • css 放到底部,可能会导致重绘效果, 当html 渲染时候,会先扫描js 和css 渲染从上到下,边解析边渲染
  • 渲染DOM时,要等待样式加载完毕
  • js会阻塞html解析,阻止DOM渲染 需要暂停DOM解析去执行js ,js可能会操作样式,所以需要等待样式加载完成

所以js 一般放页面底部,css 放头部

总结:DOM 如何生成

  • 在解析前会先执行预解析操作,会预先加载js、css等文件
  • 字节流 =》分词器 =》Token =》根据token 生成节点 =》插入到DOM 树中
  • 遇到js 执行过程中遇到script 标签,HTMLParse会停止解析,(下载)执行对应的脚本
  • 在js 执行前,需要等待当前脚本之上的所有css 加载解析完毕(js是依赖css的加载)#

三、Perfomance API

image.png

image.png
// js
window.addEventListener('DOMContentLoaded', function(){
    let s = 0;
  for(let i = 0; i< 10000000; i++){
    s+=i;
  }
  setTimeout(()=>{
    document.body.appendChild(document.createtextNode('hello'))
  },1000)
})
setTimeout(()=>{
    const {
    fetchStart, //开始访问
    requestStart, //请求的开始
    responseStart, //响应的开始
    responseEnd, //响应的结束
    domInteractive, // dom 可交互的时间点
    domContentLoadedEventEnd, //dom加载完毕
    loadEventStart //所有资源加载完毕
  } = performance.timing;
  
  let TTFB = responseStart - requestStart; //首字节返回的事件 服务器处理能力
    let TTI = domInteractive - fetchStart; //整个的一个可交互的时间
  let DCL= domContentLoadedEventEnd - fetchStart; //DOM整个加载完毕
  console.log(TTFB, TTI, DCL) //如图一
  const paint = performance.getEnteriesByType('paint')
  console.log(paint[0].startTime); //FP

}, 3000)

//递归看load 的时间不能为0 mutationObserver
new PerformanceObserver((entryList)=>{
    console.log(entryList.getEntries)
}).observe({entryTypes:['element']})

图一


image.png

图二


image.png

四、网络优化策略

  1. 减少HTTP请求数,合并js、css,合理内嵌js、css
  2. 合理设置服务器端缓存,提高服务器处理速度。(强制缓存、协商缓存)
  3. 避免重定向,重定向会降低响应速度(301,302)
  4. 使用dns-prefetch,进行DNS预解析
  5. 采用域名分片技术,讲资源放到不同的域名下,同一个域名最多处理6个TCP链接问题
  6. 采用CDN加速加快访问速度。(指派最近、高度可用)
  7. gzip压缩优化,对传输资源进行体积压缩(html,css,js)
Content-Encoding:gzip
  1. 加载数据优先级:preload(预先请求当前页面需要的资源) prefetch(将来页面中使用的资源),将数据缓存到HTTP缓存中

五、关键渲染路径

image.png
  • 重排(回流)Reflow:添加元素、删除元素、修改大小、移动元素位置、获取位置等相关信息都会引起重排。
  • 重绘 Repaint: 页面中元素样式的改变并不影响它在文档中的位置。

1.强制同步布局问题

JavaScript强制将计算样式和布局操作提前到当前任务中

你可能感兴趣的:(浏览器渲染原理及性能优化)