从输入URL到前端的性能优化

冷0
174 阅读6分钟

进程与线程

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

浏览器进程： 负责页面展示及交互 GPU 进程： 硬件加速提高体验 （3D绘制提升性能） 插件进程： 安装的插件 网络进程： 处理网络资源 渲染进程： 每个标签卡都有单独的渲染进程 核心用于渲染页面。 下面有三个线程： GUI线程 js引擎线程 事件触发线程

用户输入URL都发生了什么 从进程的角度来看

  1. 用户输入URL地址（关键字， 会将关键字按照默认的引擎生成地址） 会开始导航，浏览器进程里面做
  2. 浏览器进程 会准备一个渲染进程用于渲染页面
  3. 网络进程加载资源，最终将加载的资源交给渲染进程来做
  4. 渲染完毕进行展示 ipc？

网络七层模式 （物 数） 网IP 传tcp udp （会 表 应）应用层http

http0.9 负责传输 html 最早是没有请求头和响应头 http1.0 提供响应头 根据header不同处理不同资源 http1.1 默认开启了 keep-alive 链接复用 管线化（6个请求） 服务器处理多个请求是也是一个一个处理的 （ 队头阻塞的问题） http2.0 用同一个tcp 来发送数据，一个域名一个tcp（多路复用） 头部压缩 二进制分帧 还有就是服务器可以推送数据给客户端 http3.0 解决了tcp的队头阻塞的问题 采用了udp 在其上加了一层QUIC协议

请求流程

先去查找缓存， 检测缓存有没有更新 看域名是否被解析过，DNS协议，将域名解析成IP地址 （DNS是基于UDP） ip+host 请求是https 会有SS了协商 ip地址来进行寻址，排队等待，最多发6个http请求 tcp 创建链接 用于传输（三次握手） 利用tcp传输数据 （拆分数据包 有序可靠 服务器会按照顺序来接收） http请求（请求行 请求头 请求体） 默认不会断开 keep-alive 为了下次传输数据时候，可以复用上次创建的链接 服务器接收到数据后（响应头 相应行 响应主体） 服务器返回 301 302 会进行重定向 服务器 304 会查询浏览器缓存进行返回

渲染流程

浏览器无法直接使用html html转为DOM树 document 浏览器无法解析纯文本的css css解析成 styleSheets CSSDOM树 doucment.styleSheets 计算出DOM树中每个节点的具体样式 创建渲染树（render 树） 将DOM树中 可见 节点添加到布局书中，并计算渲染到页面对应的坐标位置（layout） 通过布局树进行分层， 根据定位属性 透明属性 transform clip 等生产 图层树 将不同的图层树进行绘制， 转交给 合成的线程进行处理 最终产生页面 显示到浏览器 Painting Display

控制台 performance 可以查看性能优劣

在index.html 中为什么 css文件放上边， js文件放下边

是因为 html渲染时 从上到下边解析边渲染， 遇到css文件和js文件会先扫描（进行预解析） 所以 假如css文件放下， 某个dom解析渲染完了， 加载了css文件，可能会导致重绘的效果 css文件不会阻塞 html的渲染 但是 rende树需要等待 css文件加载

但是js会阻塞html的解析，并且，js 会等待 css文件解析，因为js可能会操作css js 会阻塞解析 也会阻塞渲染

优化策略

Performance API

网络优化策略

减少http请求 合并 js css 合理内嵌 css js 合理设置服务器缓存，提高服务器处理速度（强缓存 协商缓存） 避免重定向 重定向会降低响应速度 采用域名分片技术， 将资源放在不同的域名下， 接触同一个域名做多6个tcp链接的问题 采用CDN 加快访问速度， gzip 压缩优化 对传输资源进行体积压缩 html js css Content-Encoding： gzip 加载数据优先级，preload 预先请求页面加载需要的资源 prefetch 将来页面中使用的资源 将数据缓存到http缓存中

关键渲染路径

重排 添加删除 更改大小 主要是位置变化 （获取位置会导致重排 因为不知道是否改变所以要重新） 重绘 dom的位置不发生改变 样式发生变化

减少回流和重绘 脱离文档流 渲染时给图片固定宽高 尽量使用css3动画 可以使用will-change 提取到单独的图层中

静态文件优化

  1. 图片优化 图片格式 （以下格式适合哪些图片） jpg png gif webp svg

    图片优化

    1. 避免空的src

    2. 减少图片的尺寸 节约流量

    3. img标签设置 alt属性 提升图片加载失败的用户体验

    4. 原生的loading：lazy

    5. 不同环境下 加载不同大小的图片 <img loading="lazy" src='./imgae/1.img' width="200" height="200" />

  2. html 优化

    1. 标签语义化
    2. 提前声明字符串编码 让浏览器快速确定如何渲染网页内容
    3. 减少html嵌套关系
    4. 删除多余空格 空行 无用的属性
    5. html减少 iframe的使用（iframe 会阻塞onloade事件 ，可以动态加载iframe
    6. 避免使用 table布局

  3. css优化

    1. 减少伪类选择器 减少样式层数 减少使用通配符
    2. 避免使用css表达式 css 表达式会频繁求值，当滚动页面，或者移动鼠标都会重新计算
    3. 删除空行注释
    4. 使用外链css 可以对css进行缓存
    5. 添加媒体字段， 只加载有效的css
    6. css contain属性 将元素进行隔离
    7. 减少@import使用 因为@import 采用的是串行加载

  4. js 优化

    1. 使用 defer（ 等html加载完毕了才加载js） async（异步加载js 但是等js加载完成会马上执行 js）
    2. 减少DOM操作
    3. 操作不应用到 DOM上而是虚拟DOM上，最后一次性的应用到DOM上
    4. 使用webWorker 解决程序阻塞的问题
    5. intersectionObserver
    6. 虚拟滚动
    7. requestAnimationFrame requestIdleCallback
    8. 不要使用eval
    9. 使用事件委托 减少事件绑定个数
    10. 尽量使用canvas动画 css 动画

优化策略 关键资源的个数越多，首次加载的时间就越长 关键资源的大小， 内容越小下载时间越短 优化白屏 内联css 和内联js 预渲染 打包时进行渲染 使用 SSR 加速首屏加载 耗费服务器资源 有利于是SEO 首屏利用服务端渲染 后续交互用客户端

lightHouse

avatar
文章
阅读
粉丝