Web 性能
文章平均质量分 93
记录Web 性能相关知识
凯小默
专注前端领域开发。
展开
-
浏览器原理 40 # 性能分析工具:如何分析 Performance 中的 Main 指标?(完结)
说明浏览器工作原理与实践专栏学习笔记任务 vs 过程Main 指标中的任务和过程:浏览器原理 14 # 消息队列和事件循环浏览器原理 37 # 任务调度:有了setTimeOut,为什么还要使用 requestAnimationFrame?渲染进程中维护了消息队列,如果通过 SetTimeout 设置的回调函数,通过鼠标点击的消息事件,都会以任务的形式添加消息队列中,然后任务调度器会按照一定规则从消息队列中取出合适的任务,并让其在渲染主线程上执行。Main 指标记录了渲染主线上所执行的全部原创 2021-07-07 21:54:09 · 995 阅读 · 2 评论 -
浏览器原理 39 # 页面性能工具:如何使用 Performance?
说明浏览器工作原理与实践专栏学习笔记Audits vs PerformancePerformance 可以记录站点在运行过程中的性能数据,有了这些性能数据,就可以回放整个页面的执行过程,这样就方便定位和诊断每个时间段内页面的运行情况,从而有效帮助我们找出页面的性能瓶颈。不同于 Audits,Performance 不会给出性能得分,也不会给出优化建议,它只是单纯地采集性能数据,并将采集到的数据按照时间线的方式来展现。需要我们自己依据原始数据来分析 Web 应用的性能问题。不同于 Audits 只能原创 2021-07-06 21:45:05 · 1519 阅读 · 0 评论 -
浏览器原理 38 # 加载阶段性能:使用 Audits(Lighthouse) 来优化 Web 性能
说明浏览器工作原理与实践专栏学习笔记什么是 Web 性能?Web performance:https://en.wikipedia.org/wiki/Web_performanceWeb 性能描述了 Web 应用在浏览器上的加载和显示的速度。性能检测工具:Performance vs AuditsPerformance 和 Audits,它们能够准确统计页面在加载阶段和运行阶段的一些核心数据,诸如任务执行记录、首屏展示花费的时长等,有了这些数据我们就能很容易定位到 Web 应用的性能瓶颈原创 2021-06-25 19:57:00 · 1536 阅读 · 0 评论 -
浏览器原理 24 # 页面性能:如何系统地优化页面?
说明浏览器工作原理与实践专栏学习笔记原创 2021-05-24 20:30:41 · 419 阅读 · 1 评论 -
浏览器原理 22 # 渲染流水线:CSS如何影响首次加载时的白屏时间?
说明浏览器工作原理与实践专栏学习笔记渲染流水线视角下的 CSS通过例子来看一下最简单的渲染流程://theme.cssdiv{ color : coral; background-color:black}<html><head> <link href="theme.css" rel="stylesheet"></head><body> <div>geekbang com</d原创 2021-05-11 13:44:58 · 379 阅读 · 1 评论 -
浏览器原理 13 # 编译器和解释器:V8是如何执行一段JavaScript代码的?
说明【浏览器工作原理与实践】专栏学习笔记必知概念深入理解 V8 的工作原理,需要搞清楚的一些概念,下面的解释部分来自百科。编译器(Compiler)1、简单讲,编译器就是将“一种语言(通常为高级语言)”翻译为“另一种语言(通常为低级语言)”的程序。2、一个现代编译器的主要工作流程:源代码 (source code) → 预处理器 (preprocessor) → 编译器 (compiler) → 目标代码 (object code) → 链接器 (Linker) → 可执行程序 (exec原创 2021-04-10 12:35:23 · 537 阅读 · 0 评论