search

nodisappear / notes

学习笔记
0 stars 0 forks source link

杂记 #1

Open nodisappear opened 1 year ago

nodisappear commented 1 year ago

image

  1. 主动交互和被动交互 100ms fps=60 16.7ms
  2. 长任务 50ms
  3. rail 性能模型
  4. 像素管道 回流重绘
  5. web worker
  6. 时间切片
  7. https://csstriggers.com/

通过window.performance获取页面性能信息： performance.navigation

performance.timing / window.performance.getEntriesByType("navigation") https://www.w3.org/TR/navigation-timing/#sec-navigation-timing image

performance.memory

performance.timeOrigin

W3C规范的全部类型（关键看是否被官方认可） image

让你的网页更丝滑： https://zhuanlan.zhihu.com/p/67728054 https://zhuanlan.zhihu.com/p/66398148

https://www.w3.org/TR/navigation-timing/

https://cloud.tencent.com/developer/article/2023207 image

同一站点：协议 + 根域名 image

浏览器的导航过程：从 用户发起请求 到 提交文档给渲染进程

通过performance timing计算时间： http://www.alloyteam.com/2015/09/explore-performance/ image

function getPerformanceTiming() {
    let performance = window.performance, t = performance.timing;

    let times = {};
    // 【含义】页面首次渲染的时间 
    times.FP = t.domLoading - t.navigationStart;

    // 【含义】DOM 加载完成的时间 
    times.DCL = t.domContentLoadedEventEnd - t.navigationStart;

    // 【含义】页面加载完成的时间（几乎代表用户等待首屏页面的时间）
    times.loadPage = t.loadEventEnd - t.navigationStart;

    // 【含义】解析 DOM 树的时间
    // 【优化】减少 DOM 树嵌套和不必要的 DOM 节点（vue template有用吗？）
    times.domReady = t.domComplete - t.domLoading;

    // 【含义】重定向的时间
    // 【优化】减少不必要的重定向（什么样的重定向能够不要？）
    times.redirect = t.redirectEnd - t.redirectStart;

    // 【含义】DNS 查询时间
    // 【优化】DNS 预加载、合理利用“域名发散与域名收敛”策略（找一个例子？）     
    times.lookupDomain = t.domainLookupEnd - t.domainLookupStart;
    // 【含义】DNS 缓存时间（这个不理解...）
    times.appcache = t.domainLookupStart - t.fetchStart;

    // 【含义】Time_To_First_Byte，读取页面第一个字节的时间（用户获取资源的时间）
    // 【优化】异地机房、CDN、宽带、CPU运算（再多了解一下吧？）
    times.ttfb = t.responseStart - t.navigationStart;

    //【含义】请求资源的时间
    //【优化】静态资源压缩
    times.request = t.responseEnd - t.requestStart;

    //【含义】执行 onload 回调函数的时间
    //【优化】在 onload 回调函数里只执行必要操作、“延迟加载、按需加载”策略（onload回调函数执行的操作是在哪里指定？）
    times.loadEvent = t.loadEventEnd - t.loadEventStart;

    //【含义】TCP 建立连接完成握手的时间
    times.connect = t.connectEnd - t.connectStart;

    return times;
}
nodisappear commented 1 year ago

尽量不要在修改 DOM 结构时查询相关值，可以先查询再修改！

你不知道的 DOMContentLoaded

nodisappear commented 1 year ago

【收集一些解决问题的思路】

一. 性能优化的思路 - 对症下药（搞清楚“性能瓶颈”在哪里？）

  1. 首屏加载：network（请求慢？后台处理慢？加载慢？）-> performance（js执行慢？）
  2. webpack：用 webpack-bundle-analyzer 分析打包资源太大的原因（没有按需加载依赖包？重复打包不同版本的相同依赖？）
nodisappear commented 1 year ago

【收集一些清晰的图解】

一. innerHTML 与 innerText image

nodisappear commented 1 year ago

【收集一些 HTML5 的知识点】

  1. 语义化标签 （1）延伸言语表达，突出重点，消除歧义 （2）语义化的标题摘要能够支持自动生成文章的目录结构 （3）语义化结构的页面能让浏览器很好地支持“阅读视图功能”，可以提升搜索引擎的命中率，对视障用户的读屏软件更友好，

    <ruby>
      文字<rt>标注</rt>
</ruby>

<hgroup>
      <h1>主标题</h1>
      <h2>副标题</h2>
</hgroup>

<header>导航/介绍</header>
<aside>与文章主题非强关联的部分（侧边栏、导航/广告）</aside>
<address>文章/作者的联系方式</address>
<footer>作者信息/版权信息/相关链接</footer>
nodisappear commented 1 year ago

【收集一些 浏览器 的知识点】

  1. SOA：Services Oriented Architecture，面向服务的架构
  2. 分层和合成： (1) 渲染引擎根据布局树的特点将其转换为层树，层树中的每个节点都对应一个图层 (2) 绘制过程会生成绘制指令列表，光栅化会按照绘制指令列表生成图片 (3) 合成线程将每个图层分割成大小固定的图块并优先绘制靠近视口的图块，而且首次合成图块时会使用一个低分辨率的图片以减少纹理，当正常分辨率的图片合成之后再替换显示
  3. CSS 动画比 JS 动画高效的原因：恰当使用 will-change 提前告诉渲染引擎要即将进行的变换操作，渲染引擎会将该元素单独实现一帧，合成线程会直接处理变换而不阻塞主线程
  4. RTT（Round Trip Time，往返延时）：从发送端发送数据开始，到发送端收到来自接收端的确认，总共经历的时延，通常一个 http 数据包有 14kb 左右
  5. 延迟加载非关键 CSS image
  6. 显示器与显卡 (1) 显示器：每秒固定读取“帧率”次前缓冲区中的图像 (2) 显卡：合成新图像并将其放入后缓冲区 (3) 一旦显卡把合成图像写到后缓冲区，系统就会让后缓冲区和新缓冲区互换，保证显示器能读取到最新合成图像
  7. PWA (Progressive Web App，渐进式网页应用)： (1) 是一套理念，渐进式增强 web 优势，通过技术手段渐进式缩短和本地应用或小程序的距离 (2) 通过引入 Service Worker 来解决离线存储和消息推动的问题：在页面和网络之间增加一个拦截器 image (3) 通过引入 manifest.json 来解决一级入口的问题