跳到主要内容

8 篇博文 含有标签「Web Performance」

查看所有标签

· 阅读需 11 分钟
卤代烃

html-preload-scanner-hero-image.jpg

大家好,我是专注于做性能优化的卤代烃。

做网页相关的性能优化时,需要对浏览器的底层原理有一定的了解,这样才能更好的让页面走在 happy path 上。今天我们就了解一个很少被人所知的浏览器默认性能优化方案 —— HTML Preload Scanner,看看它是如何优化网络资源加载速度的。

· 阅读需 9 分钟
卤代烃

observe-browser-network-hero-image.jpg

前言

📢 招聘

正式开始文章前先插播一条招聘信息。

字节 Web Infra 团队最近开启新一轮招聘了,如果你对 AI/Framework/Rust/Performance 感兴趣,可以来看看我们的岗位(具体岗位信息可以看这个招聘链接 👉 字节跳动 Web Infra - Web Solutions 团队招人啦!

简历可以发到我的邮箱 skychx@hotmail.com,我可以帮你内推岗位并跟进进度 🥳


浏览器的 Devtools 工具有多种观测 network 性能数据的方式,但是这些数据的表现方式各有不同。本文就是解读一下这些性能数据的表现方式,并做纵向比较,帮助更多的人去优化网络带来的性能问题。

· 阅读需 9 分钟
卤代烃

cross-origin-and-performance-hero-image.jpg

前言

招聘信息

正式开始文章前先插播一条招聘信息。

字节 Web Infra 团队最近开启新一轮招聘了,如果你对 Web Framework/Runtime/Performance,或对编译构建/Rust/AI 感兴趣,可以来看看我们的岗位(具体岗位信息可以看这个招聘链接 👉 字节跳动 Web Infra - Web Solutions 团队招人啦!

简历可以发到我的邮箱 skychx@hotmail.com,我可以帮你内推岗位并跟进进度 🥳


由于 Web 的开放特性,同样是糊页面,Web 前端工程师往往要和 CORS(跨域请求)做一些斗争,例如我之前遇到的一个 《SVG 图片字体失效问题》 就是 CORS 引起的。

· 阅读需 11 分钟
卤代烃

ybsbny.png

吐槽时间

不知道从什么时候开始,前端开始卷一些 “高端知识”,动不动就浏览器底层原理V8 是如何运行的,倒不是说这些没啥用,只是来势汹汹好像不懂这些就不能糊页面一样。

我工作中和内核团队与虚拟机团队也合作过并咨询过他们这些相关问题,大家的态度也很明确,面对这种千万行代码的大型工程项目,他们作为专业人士也不是啥都懂,万一遇到个真的啥都懂的,人家必然也不会去做前端,这就显得一些面试官和求职者的八股攻防战可笑了起来。

那么如果真的遇到一些场景需要学习相关知识,或者就是单纯的个人感兴趣想了解一下原理和细节,最好的办法是什么呢?很简单,直接看相关团队的 Blog 或核心开发人员的 Blog & 演讲,这都是除去源码的第一手消息,水平比那些二道贩子不知道高到哪里去了。

· 阅读需 17 分钟
卤代烃

fontend-target-hero-image.jpg

更新提示

文章已于 2022-10-10 更新

对于大部分开发者来说,版本兼容是一件存在感很低的事情,因为它在绝大部分情况下都是一行配置,在一些前端工具链(例如 Babel、CoreJS,Autoprefixer 等工具)的帮助下适配到目标浏览器,只会在一些大的 break change 事件(例如 Vue3 必须在支持 Proxy 的现代浏览器下才能运行)下才会关注这件不起眼的事情。

但当你稍微研究一下的时候,才会发现这块儿内容知识非常杂,因为版本兼容的相关知识没有那么多内在逻辑性,很多细碎的知识点散落在在各个商业公司的博弈和版本变更中。前段时间因工作需要对部分语言/浏览器特性重点关注了一下,以此文做一下记录。

本文主要记录了移动端的版本适配问题,未对桌面端做更多的研究,后面有可能补充相关内容。

· 阅读需 38 分钟
卤代烃

web_dev_hero_image.jpg

更新提示

文章已于 2022-10-10 更新

最近在做 web 性能优化的工作,所以想集中学习了解一下相关的专题内容。这部分内容肯定要学习一手信息,所以找先找了 https://web.dev/,一个 Google 官方推出的一个面向 Web 开发者的网站,里面有非常多的教程和最佳实践,非常适合有性能优化诉求的开发者去浏览和学习。

网站的核心部分分为 4 类:

  • Learn:体系化的教程,例如性能优化和 PWA
  • Measure:就是一个在线版本的 Lighthouse,和 Chrome DevTools 的 Lighthouse 功能一致
  • Case Study:优化案例(商业互吹),内容一般为采用 X 优化带来数据 Y 的提升最终带来 Z 的商业增长
  • Blog:内容较杂,优化教程/API 解读/优化案例等等都有涉及

从上面的结构可以看出,Lean/Measure/CaseStudy 这三个章节内容都是比较体系化的,但是 Blog 内容却没有一个很好的分类。以我的阅读经验,Blog 里有一些非常好的文章,所以我很好奇 Blog 章节里有多少好东西可供挖掘,于是花了几个月的时间,把所有的 Blog 读了一遍,并以自己的认知对内容做了分析和总结,以便自己后续回顾与搜索。