zhufeng架构

一.进程与线程

  • 进程是操作系统资源分配的基本单位，进程中包含线程。
  • 线程是由进程所管理的。为了提升浏览器的稳定性和安全性，浏览器采用了多进程模型。

浏览器中的（5 个）进程

⭐️浏览器渲染原理与性能优化 - 图1

  • 浏览器进程：负责界面显示、用户交互、子进程管理，提供存储等。
  • 渲染进程：每个页面都有单独的渲染进程，核心用于渲染页面。
  • 网络进程：主要处理网络资源加载 (HTML、CSS,、JS等)
  • GPU进程：3d绘制, 提高性能
  • 插件进程： chrome 中安装的一些插件

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

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

1. 浏览器进程的相互调用

  • 在浏览器进程中输入url地址开始导航。并准备渲染进程
  • 在网络进程中发送请求，将响应后的结果交给渲染进程处理
  • 解析页面，加载页面中所需资源
  • 渲染完毕，展示结果

我们开始细化每一步流程，并且从流程中提取我们可以优化的点。

2.URL请求过程

  • 浏览器查找当前 URL 是否存在缓存，如果有缓存、并且缓存未过期，直接从缓存中返回。
  • 查看域名是否已经被解析过了，没有解析过进行DNS解析将域名解析成IP地址，并增加端口号
  • 如果请求是HTTPS，进行SSL协商
  • 利用IP地址进行寻址，请求排队。同一个域名下请求数量不能多余 6 个。
  • 排队后服务器创建TCP链接 （三次握手）
  • 利用TCP协议将大文件拆分成数据包进行传输 (有序传输)，可靠的传输给服务器（丢包重传），服务器收到后按照序号重排数据包 （增加TCP头部，IP头部）
  • 发送 HTTP 请求（请求行，请求头，请求体）
  • HTTP 1.1中支持keep-alive属性, TCP 链接不会立即关闭，后续请求可以省去建立链接时间。
  • 服务器响应结果（响应行，响应头，响应体）
  • 返回状态码为 301、302 时，浏览器会进行重定向操作。（重新进行导航）
  • 返回 304 则查找缓存。（服务端可以设置强制缓存）

通过network Timing 观察请求发出的流程：

⭐️浏览器渲染原理与性能优化 - 图2

  • Queuing: 请求发送前会根据优先级进行排队，同时每个域名最多处理 6 个 TCP 链接，超过的也会进行排队，并且分配磁盘空间时也会消耗一定时间。
  • Stalled : 请求发出前的等待时间（处理代理，链接复用）
  • DNS lookup : 查找DNS的时间
  • initial Connection : 建立 TCP 链接时间
  • SSL: SSL握手时间（SSL协商）
  • Request Sent : 请求发送时间（可忽略）
  • Waiting(TTFB) : 等待响应的时间，等待返回首个字符的时间
  • Content Dowloaded : 用于下载响应的时间

蓝色：DOMContentLoaded:DOM构建完成的时间

红色：Load: 浏览器所有资源加载完毕

本质上，浏览器是方便一般互联网用户通过界面解析和发送 HTTP 协议的软件

3.HTTP发展历程

  • HTTP/0.9 在传输过程中没有请求头和请求体，服务器响应没有返回头信息，内容采用 ASCII 字符流来进行传输 HTML
  • HTTP/1.0 增加了请求头和响应头，实现多类型数据传输
  • HTTP/1.1 默认开启持久链接，在一个 TCP 链接上可以传输多个 HTTP 请求 ， 采用管线化的方式（每个域名最多维护 6 个 TCP 持久链接）解决队头阻塞问题 （服务端需要按顺序依次处理请求）。完美支持数据分块传输（chunk transfer），并引入客户端 cookie 机制、安全机制等。
  • HTTP/2.0 解决网络带宽使用率低 （TCP 慢启动，多个 TCP 竞争带宽，队头阻塞）采用多路复用机制（一个域名使用一个 TCP 长链接，通过二进制分帧层来实现）。头部压缩（HPACK）、及服务端推送
  • HTTP/3.0 解决 TCP 队头阻塞问题， 采用QUIC协议。QUIC协议是基于UDP的 （目前：支持和部署是最大的问题）
  • HTTP 明文传输, 在传输过程中会经历路由器、运营商等环节，数据有可能被窃取或篡改 （安全问题）

对比 HTTP/1.1 和 HTTP/2 的差异

4. 渲染流程

⭐️浏览器渲染原理与性能优化 - 图3

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

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

三. 模拟请求 -> 渲染流程

请求报文格式

  • 起始行：[方法][空格][请求 URL][HTTP 版本][换行符]
  • 首部： [首部名称][:][空格][首部内容][换行符]
  • 首部结束：[换行符]
  • 实体

响应报文格式

  • 起始行：[HTTP 版本][空格][状态码][空格][原因短语][换行符]
  • 首部：[首部名称][:][空格][首部内容][换行符]
  • 首部结束： [换行符]
  • 实体

⭐️浏览器渲染原理与性能优化 - 图4

⭐️浏览器渲染原理与性能优化 - 图5

1. 基于 TCP 发送 HTTP 请求

  1. const net = require('net')
  2. class HTTPRequest {
  3.     constructor(options) {
  4.         this.method = options.method || 'GET';
  5.         this.host = options.host || '127.0.0.1';
  6.         this.port = options.port || 80;
  7.         this.path = options.path || '/';
  8.         this.headers = options.headers || {}
  9.     }
  10.     send(body) {
  11.         return new Promise((resolve, reject) => {
  12.             body = Object.keys(body).map(key => (`${key}=${encodeURIComponent(body[key])}`)).join('&');
  13.             if (body) {
  14.                 this.headers['Content-Length'] = body.length;
  15.             };
  17.             const socket = net.createConnection({
  18.                 host:this.host,
  19.                 port:this.port
  20.             },()=>{
  21.                 const rows = [];
  22.                 rows.push(`${this.method} ${this.path} HTTP/1.1`);
  23.                 Object.keys(this.headers).forEach(key=>{
  24.                     rows.push(`${key}: ${this.headers[key]}`);
  25.                 });
  26.                 let request = rows.join('\r\n') + '\r\n\r\n' + body;
  27.                 socket.write(request)
  28.             });
  30.             socket.on('data',function(data){
  32.             })
  34.         })
  36.     }
  37. }
  38. async function request() {
  39.     const request = new HTTPRequest({
  40.         method: 'POST',
  41.         host: '127.0.0.1',
  42.         port: 3000,
  43.         path: '/',
  44.         headers: {
  45.             name: 'zhufeng',
  46.             age: 11
  47.         }
  48.     });
  49.     let { responseLine, headers, body } = await request.send({ address: '北京' });
  50. }
  52. request();

2. 解析响应结果

  1. const parser = new HTTPParser()
  2. socket.on('data',function(data){
  4.     parser.parse(data);
  5.     if(parser.result){
  6.         resolve(parser.result)
  7.     }
  8. });

3. 解析 HTML

  1. let stack = [{ type: 'document', children: [] }];
  2. const parser = new htmlparser2.Parser({
  3.     onopentag(name, attributes) {
  4.         let parent = stack[stack.length - 1];
  5.         let element = {
  6.             tagName: name,
  7.             type: 'element',
  8.             children: [],
  9.             attributes,
  10.             parent
  11.         }
  12.         parent.children.push(element);
  13.         element.parent = parent;
  14.         stack.push(element);
  15.     },
  16.     ontext(text) {
  17.         let parent = stack[stack.length - 1];
  18.         let textNode = {
  19.             type: 'text',
  20.             text
  21.         }
  22.         parent.children.push(textNode)
  23.     },
  24.     onclosetag(tagname) {
  25.         stack.pop();
  26.     }
  27. });
  28. parser.end(body)

4. 解析CSS

  1. const cssRules = [];
  2. const css = require('css');
  3. function parserCss(text) {
  4.     const ast = css.parse(text);
  5.     cssRules.push(...ast.stylesheet.rules);
  6. }
  1. const parser = new htmlparser2.Parser({
  2.     onclosetag(tagname) {
  3.         let parent = stack[stack.length - 1];
  4.         if (tagname == 'style') {
  5.             parserCss(parent.children[0].text);
  6.         }
  7.         stack.pop();
  8.     }
  9. });

5. 计算样式

  1. function computedCss(element) {
  2.     let attrs = element.attributes; 
  3.     element.computedStyle = {}; 
  4.     Object.entries(attrs).forEach(([key, value]) => {
  5.         cssRules.forEach(rule => {
  6.             let selector = rule.selectors[0];
  7.             if ((selector == '#'+value && key == 'id') || (selector == '.'+value && key == 'class')) {
  8.                 rule.declarations.forEach(({ property, value }) => {
  9.                     element.computedStyle[property] = value;
  10.                 })
  11.             }
  12.         })
  13.     });
  14. }

6. 布局绘制

  1. function layout(element) {
  3.     if (Object.keys(element.computedStyle).length != 0) {
  4.         let { background, width, height, top, left } = element.computedStyle
  5.         let code = `
  6.             let canvas = document.getElementById('canvas');
  7.             canvas.width = window.innerWidth;
  8.             canvas.height = window.innerHeight ;
  9.             let context = canvas.getContext("2d")
  10.             context.fillStyle = "${background}";
  11.             context.fillRect(${top}, ${left}, ${parseInt(width)}, ${parseInt(height)});
  12.             `
  13.         fs.writeFileSync('./code.js', code);
  14.     }
  15. }

总结：DOM 如何生成的

  • 当服务端返回的类型是text/html时，浏览器会将收到的数据通过HTMLParser进行解析 (边下载边解析)
  • 在解析前会执行预解析操作，会预先加载JS、CSS等文件
  • 字节流 -> 分词器 -> Tokens -> 根据 token 生成节点 -> 插入到 DOM 树中
  • 遇到js: 在解析过程中遇到script标签，HTMLParser会停止解析，（下载）执行对应的脚本。
  • 在js执行前，需要等待当前脚本之上的所有CSS加载解析完毕（js是依赖css的加载）

⭐️浏览器渲染原理与性能优化 - 图6

  • CSS样式文件尽量放在页面头部，CSS加载不会阻塞 DOM tree 解析, 浏览器会用解析出的DOM TREE和 CSSOM 进行渲染，不会出现闪烁问题。如果CSS放在底部，浏览是边解析边渲染，渲染出的结果不包含样式，后续会发生重绘操作。
  • JS文件放在 HTML 底部，防止JS的加载、解析、执行堵塞页面后续的正常渲染

通过PerformanceAPI 监控渲染流程

四.Perfomance API

⭐️浏览器渲染原理与性能优化 - 图7

关键时间节点 描述 含义
TTFB time to first byte
(首字节时间)		 从请求到数据返回第一个字节所消耗时间
TTI Time to Interactive
(可交互时间)		 DOM 树构建完毕，代表可以绑定事件
DCL DOMContentLoaded
(事件耗时)		 当 HTML 文档被完全加载和解析完成之后，DOMContentLoaded
事件被触发
L onLoad
(事件耗时)		 当依赖的资源全部加载完毕之后才会触发
FP First Paint
（首次绘制)		 第一个像素点绘制到屏幕的时间
FCP First Contentful Paint
(首次内容绘制)		 首次绘制任何文本，图像，非空白节点的时间
FMP First Meaningful paint
(首次有意义绘制)		 首次有意义绘制是页面可用性的量度标准
LCP Largest Contentful Paint
(最大内容渲染)		 在viewport
中最大的页面元素加载的时间
FID First Input Delay
(首次输入延迟)		 用户首次和页面交互 (单击链接，点击按钮等) 到页面响应交互的时间 
  1. <div></div>
  2. <h1 elementtiming="meaningful">珠峰架构</h1>
  3. <script>
  4.     window.onload = function () {
  5.         let ele = document.createElement('h1');
  6.         ele.innerHTML = 'zf';
  7.         document.body.appendChild(ele)
  8.     }
  9.     setTimeout(() => {
  10.         const {
  11.             fetchStart,
  12.             requestStart,
  13.             responseStart,
  14.             domInteractive,
  15.             domContentLoadedEventEnd,
  16.             loadEventStart
  17.         } = performance.timing;
  20.         let TTFB = responseStart - requestStart; 
  21.         let TTI = domInteractive - fetchStart; 
  22.         let DCL = domContentLoadedEventEnd - fetchStart 
  23.         let L = loadEventStart - fetchStart;
  24.         console.log(TTFB, TTI, DCL, L)
  26.         const paint = performance.getEntriesByType('paint');
  27.         const FP = paint[0].startTime;
  28.         const FCP = paint[1].startTime; 
  29.     }, 2000);
  31.     let FMP;
  32.     new PerformanceObserver((entryList, observer) => {
  33.         let entries = entryList.getEntries();
  34.         FMP = entries[0];
  35.         observer.disconnect();
  36.         console.log(FMP)
  37.     }).observe({ entryTypes: ['element'] });
  39.     let LCP;
  40.     new PerformanceObserver((entryList, observer) => {
  41.         let entries = entryList.getEntries();
  42.         LCP = entries[entries.length - 1];
  43.         observer.disconnect();
  44.         console.log(LCP); 
  45.     }).observe({ entryTypes: ['largest-contentful-paint'] });
  47.     let FID;
  48.     new PerformanceObserver((entryList, observer) => {
  49.         let firstInput = entryList.getEntries()[0];
  50.         if (firstInput) {
  51.             FID = firstInput.processingStart - firstInput.startTime;
  52.             observer.disconnect();
  53.             console.log(FID)
  54.         }
  55.     }).observe({ type: 'first-input', buffered: true });
  56. </script>

五. 网络优化策略

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

六. 关键渲染路径

⭐️浏览器渲染原理与性能优化 - 图8

  • 重排（回流）Reflow： 添加元素、删除元素、修改大小、移动元素位置、获取位置相关信息
  • 重绘 Repaint：页面中元素样式的改变并不影响它在文档流中的位置。

我们应当尽可能减少重绘和回流

1. 强制同步布局问题

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

  1. <div></div>
  2. <script>
  3.     function reflow() {
  4.         let el = document.getElementById('app');
  5.         let node = document.createElement('h1');
  6.         node.innerHTML = 'hello';
  7.         el.appendChild(node);
  9.         console.log(app.offsetHeight);
  10.     }
  11.     requestAnimationFrame(reflow)
  12. </script>

2. 布局抖动（layout thrashing）问题

在一段js代码中，反复执行布局操作，就是布局抖动

  1. function reflow(){
  2.     let el = document.getElementById('app');
  3.     let node = document.createElement('h1');
  4.     node.innerHTML = 'hello';
  5.     el.appendChild(node);
  7.     console.log(app.offsetHeight);
  8. }
  9. window.addEventListener('load',function(){
  10.     for(let i = 0 ; i<100;i++){
  11.         reflow();
  12.     }
  13. });

3. 减少回流和重绘

  • 脱离文档流
  • 渲染时给图片增加固定宽高
  • 尽量使用css3 动画
  • 可以使用 will-change 提取到单独的图层中

七. 静态文件优化

1. 图片优化

图片格式：

  • jpg: 适合色彩丰富的照片、banner 图；不适合图形文字、图标（纹理边缘有锯齿），不支持透明度
  • png:适合纯色、透明、图标，支持半透明；不适合色彩丰富图片，因为无损存储会导致存储体积大
  • gif: 适合动画，可以动的图标；不支持半透明，不适和存储彩色图片
  • webp: 适合半透明图片，可以保证图片质量和较小的体积
  • svg格式图片: 相比于jpg和jpg它的体积更小, 渲染成本过高, 适合小且色彩单一的图标;

图片优化：

  • 避免空src的图片
  • 减小图片尺寸，节约用户流量
  • img标签设置alt属性， 提升图片加载失败时的用户体验

  • 原生的loading:lazy 图片懒加载 

    1. <img loading="lazy" src="./images/1.jpg" width="300" height="450" />

  • 不同环境下，加载不同尺寸和像素的图片 

    1. <img src="./images/1.jpg" sizes="(max-width:500px) 100px,(max-width:600px) 200px"  srcset="./images/1.jpg 100w, ./images/3.jpg 200w">

  • 对于较大的图片可以考虑采用渐进式图片

  • 采用base64URL减少图片请求
  • 采用雪碧图合并图标图片等

2.HTML优化

  1. 语义化HTML: 代码简洁清晰，利于搜索引擎，便于团队开发
  2. 提前声明字符编码，让浏览器快速确定如何渲染网页内容
  3. 减少 HTML 嵌套关系、减少 DOM 节点数量
  4. 删除多余空格、空行、注释、及无用的属性等
  5. HTML 减少iframes使用 (iframe会阻塞onload事件可以动态加载iframe)
  6. 避免使用 table 布局

3.CSS优化

  1. 减少伪类选择器、减少样式层数、减少使用通配符

  2. 避免使用CSS表达式，CSS表达式会频繁求值， 当滚动页面，或者移动鼠标时都会重新计算 (IE6,7) 

    1. background-color: expression( (new Date()).getHours()%2 ? "red" : "yellow" );

  3. 删除空行、注释、减少无意义的单位、css进行压缩

  4. 使用外链css, 可以对CSS进行缓存

  5. 添加媒体字段，只加载有效的css文件 

    1. <link href="index.css" rel="stylesheet" media="screen and (min-width:1024px)" />

  6. CSS contain属性, 将元素进行隔离

  7. 减少 @import 使用，由于 @import 采用的是串行加载

4.JS优化

  1. 通过async、defer异步加载文件
    ⭐️浏览器渲染原理与性能优化 - 图9
  2. 减少 DOM 操作，缓存访问过的元素
  3. 操作不直接应用到 DOM 上，而应用到虚拟 DOM 上。最后一次性的应用到 DOM 上。
  4. 使用webworker解决程序阻塞问题

  5. IntersectionObserver 

    1. const observer = new IntersectionObserver(function(changes) { 
    2. changes.forEach(function(element, index) {
    3.     if (element.intersectionRatio > 0) {
    4.         observer.unobserve(element.target);
    5.         element.target.src = element.target.dataset.src;
    6.     }
    7. });
    8. });
    9. function initObserver() {
    10. const listItems = document.querySelectorAll('img');
    11. listItems.forEach(function(item) {
    12.     observer.observe(item);
    13. });
    14. }
    15. initObserver();

  6. 虚拟滚动 vertual-scroll-list

  7. requestAnimationFrame、requestIdleCallback
    ⭐️浏览器渲染原理与性能优化 - 图10
  8. 尽量避免使用eval, 消耗时间久
  9. 使用事件委托，减少事件绑定个数。
  10. 尽量使用 canvas 动画、CSS动画

5. 字体优化

  1. @font-face {
  2.     font-family: "Bmy";
  3.     src: url("./HelloQuincy.ttf");
  4.     font-display: block;
  9. }
  10. body {
  11.     font-family: "Bmy"
  12. }

FOUT(Flash Of Unstyled Text) 等待一段时间，如果没加载完成，先显示默认。加载后再进行切换。

FOIT(Flash Of Invisible Text)字体加载完毕后显示，加载超时降级系统字体 （白屏）

八. 优化策略

  • 关键资源个数越多，首次页面加载时间就会越长
  • 关键资源的大小，内容越小，下载时间越短
  • 优化白屏：内联css和内联js移除文件下载, 较小文件体积
  • 预渲染，打包时进行预渲染
  • 使用SSR加速首屏加载（耗费服务端资源），有利于SEO优化。 首屏利用服务端渲染，后续交互采用客户端渲染

九. 浏览器的存储

  • cookie: cookie 过期时间内一直有效，存储大小4k左右、同时限制字段个数，不适合大量的数据存储，每次请求会携带cookie, 主要可以利用做身份检查。
    • 设置cookie有效期
    • 根据不同子域划分cookie较少传输
    • 静态资源域名和cookie域名采用不同域名，避免静态资源访问时携带cookie
  • localStorage: chrome 下最大存储5M, 除非手动清除，否则一直存在。利用localStorage存储静态资源 
  1. function cacheFile(url) {
  2.     let fileContent = localStorage.getItem(url);
  3.     if (fileContent) {
  4.         eval(fileContent)
  5.     } else {
  6.         let xhr = new XMLHttpRequest();
  7.         xhr.open('GET', url, true);
  8.         xhr.onload = function () {
  9.             let reponseText = xhr.responseText
  10.             eval(reponseText);
  11.             localStorage.setItem(url, reponseText)
  12.         }
  13.         xhr.send()
  14.     }
  15. }
  16. cacheFile('/index.js');
  • sessionStorage: 会话级别存储，可用于页面间的传值
  • indexDB: 浏览器的本地数据库 （基本无上限） 
  1. let request = window.indexedDB.open('myDatabase');
  2. request.onsuccess = function(event){
  3.     let db = event.target.result;
  4.     let ts = db.transaction(['student'],'readwrite')
  5.     ts.objectStore('student').add({name:'zf'})
  6.     let r = ts.objectStore('student').get(5);
  7.     r.onsuccess = function(e){
  8.         console.log(e.target.result)
  9.     }
  10. }
  11. request.onupgradeneeded  = function (event) {
  12.     let db = event.target.result;
  13.     if (!db.objectStoreNames.contains('student')) {
  14.         let store = db.createObjectStore('student', { autoIncrement: true });
  15.     }
  16. }

十. 增加体验 PWA（Progressive Web App）

webapp用户体验差（不能离线访问），用户粘性低（无法保存入口），pwa就是为了解决这一系列问题, 让webapp具有快速，可靠，安全等特点

  • Web App Manifest: 将网站添加到桌面、更类似 native 的体验
  • Service Worker: 离线缓存内容, 配合cache API
  • Push Api & Notification Api: 消息推送与提醒
  • App Shell & App Skeleton App壳、骨架屏

十一.LightHouse使用

  1. npm install lighthouse -g
  2. lighthouse http://www.taobao.com

可以根据 lighthouse 中的建议进行页面的优化