9 posts tagged with "Web Performance"

Hello everyone, it's been over a year since my blog was last updated. I guess the SEO ranking has dropped completely, and I don't know how many people will see this in the end.

Starting from May last year, due to organizational structure changes at work, I shifted from the performance optimization field to AI. Due to confidentiality agreements, I can't say much about the specific content, so I haven't updated for a long time. This year, my work direction has changed again, mainly focusing on GUI Agent work.

A year has passed, but the programming field has undergone earth-shaking changes. With the launch of tools like Cursor/Claude Code, everyone has basically broken free from the constraints of traditional programming methods (let's not worry about whether the generated code is correct, just ask if it's fast or not); many departments are not satisfied with the efficiency gains from external programming tools and have started building their own internal Agents, attempting to double efficiency in both business and engineering. Since my recent work involves more collaboration with large model teams, I feel this more deeply, and I'll have opportunities to share my insights slowly in the future.

Hello everyone, I am skychx, specializing in performance optimization.

When doing web-related performance optimization, it is necessary to have a certain understanding of the underlying principles of the browser, so that the page can better walk on the happy path. Today, let's understand a browser default performance optimization scheme that is rarely known by people - HTML Preload Scanner, and see how it optimizes the loading speed of network resources.

Introduction​

There are various ways to observe network performance data with the browser's Devtools tool, but these data are presented in different ways. This article is to interpret these performance data presentation methods and make a longitudinal comparison to help more people optimize the performance problems brought by the network.

Preface​

Due to the open nature of the Web, web front-end engineers often have to struggle with CORS (Cross-Origin Resource Sharing), such as a “SVG Image Font Failure Issue” I encountered before, which was caused by CORS.

A couple of days ago on "Jike," I spontaneously wrote a brief history of HTTP priority development. I felt it was too rushed at the time, so I decided to write a blog to expand on it, analyzing the concept of "priority" longitudinally to see the development and evolution of these fundamental protocols.

Rant Time​

I don't know when it started, but frontend development began to compete on "high-end knowledge," constantly bringing up browser underlying principles and how V8 works. It's not that these topics are useless, but the trend suggests that if you don't understand these things, you can't even build a simple webpage.

In my work, I've collaborated with kernel teams and VM teams and consulted them about these related issues. Their attitude is very clear: when facing large-scale engineering projects with tens of millions of lines of code, even as professionals, they don't understand everything. If you happen to meet someone who truly understands everything, they definitely wouldn't be doing frontend work. This makes the "eight-part essay" battles between interviewers and candidates seem ridiculous.

So if you really encounter scenarios that require learning related knowledge, or you're simply personally interested in understanding the principles and details, what's the best approach? It's simple: directly read the blogs or talks from relevant teams or core developers. This is first-hand information, aside from the source code itself, and the quality is much higher than those second-hand dealers.

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

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

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

最近在做 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 读了一遍，并以自己的认知对内容做了分析和总结，以便自己后续回顾与搜索。

I didn't write much in 2021, so I wanted to start 2022 on a good note by writing some simple content first, recording how I reduced my personal site's file storage costs by 90%.