跳到主要内容

6 篇博文 含有标签「性能优化」

查看所有标签

· 15 分钟阅读
卤代烃

fontend-target-hero-image

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

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

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

· 36 分钟阅读
卤代烃

web_dev_hero_image

更新提示

文章已于 2022-08-06 更新

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

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

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

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

· 29 分钟阅读
卤代烃

Web 开发有一个经典问题:「浏览器中从输入 URL 到页面渲染的这个过程中都发生了什么?

据我考据这个问题起码有十年历史了。在日新月异学不动的前端圈子里,这个问题能一直被问,就是因为因为它是个非常好的问题,涉及非常多的知识点,平时做一些性能优化,都可以从这个问题出发,分析性能瓶颈,然后对症下药进行优化。

不过今天我们不谈 Web 的性能优化,只是借助刚刚的那个那个经典问题的分析思路,从 React Native 的启动到页面的第一次渲染完成,结合 React Native 的源码和 1.0 的新架构,探索 React Native 的启动性能优化之路

· 57 分钟阅读
卤代烃

更新提示

文章已于 2022-08-29 更新「图片」优化内容

文章已于 2022-01-22 更新「Fabric」架构章节

文章已于 2021-07-01 更新 Redux 优化内容

2020 年谈 React Native,在日新月异的前端圈,可能算比较另类了。文章动笔之前我也犹豫过,但是想到写技术文章又不是赶时髦,啥新潮写啥,所以还是动笔写了这篇 React Native 性能优化的文章。

本文谈到的 React Native 性能优化,还没到修改 React Native 源码那种地步,所以通用性很强,对大部分 RN 开发者来说都用得着。