跳到主要内容

· 阅读需 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 引起的。

· 阅读需 9 分钟
卤代烃

find_inject_js_hero_image.jpg

一个网页除了可以运行在公共的浏览器上,也可以运行在 APP 端内的 WebView 组件上。由于这些 Hybrid Web 网页运行在一个相对封闭的环境里,所以 APP 本身可以向 WebView 中注入一些 JS 代码,对 Web 页面做定向增强(最典型的运用就是 JSBridge,提供了一道 Web <--> Native 通信的桥梁)。

英文版本:How to Locate the JS Code Injected into Hybrid Web Pages by Native

· 阅读需 11 分钟
卤代烃

ybsbny.png

吐槽时间

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

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

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

· 阅读需 6 分钟
卤代烃

最近两年没怎么更新博客,算了一下从 2022 年开始,只更新了 5 篇(虽然之前也不多),这个还是远远低于自己的预期的。其实在公司内部也输出过一些技术文档和文章,但是限于篇幅和敏感性都没有放到公网上,其实还是有些可惜的。

· 阅读需 21 分钟
卤代烃

MIUI_hero_image.jpg

最近给长辈置换一下手机,在有限的预算内,经过多次比较发现还是小米的硬件配置更好一些,最后也是下单了小米。

在 2022 年,Android 系统对手机权限的进一步限制,一些过往的卡顿问题都得到了一定的解决。但是在国内的定制版 Android 机上,和原生 Android 系统还是多了一些特色的东西:

  • 无处不在的系统级广告,诱导用户点击/误触,从而去跳转/下载 APP
  • “不小心下载” 的 APP,占用宝贵的内存/硬盘资源,拖慢手机速度
  • 国内特色的航母级 APP,一个 APP 占几个 G 的硬盘,有些小而美的应用甚至几十个 G

上面的三个问题中,前两个可以通过一定的努力解决大部分,第三个大家都没得选只能硬抗。本文就是聚焦于「关闭 MIUI 无处不在的广告」这个话题的。

· 阅读需 24 分钟
卤代烃

charles_hero_image.jpg

更新提示

文章已于 2022-08-22 更新

作为一名 Web 开发工程师,天天都会和网络打交道。Charles 作为一款网络抓包工具,几乎成了 Web 开发的标配。

本文是我深度使用 Charles 后总结而成,不同于其它介绍 Charles 的文章,这篇文章不会详细介绍 Charles 的各个功能(例如 remote 和 rewrite),而是专注于分析一个问题:什么情况下 Charles 会抓包失败?