CSS和网络性能

总体上来说，下面这些是为什么CSS对性能这么重要的原因： 浏览器必须等到渲染树完全渲染才能渲染页面； 渲染树的DOM和CSSOM整合到一起的结果； DOM是阻塞JavaScript渲染的HTML等； CSSOM是所有被应用到DOM上的CSS规则； 可以给JavaScript设置...

用prefetching加速下一页的加载速度

什么是prefetching？ 通过提前加载用户可能访问的下一个页面（）可以加速web页面加载速度，我们称之为prefetching。在某些情况下，这可以让接下来的导航交互立即加载。 现在化的prefetching可以使用很多种方式实现。通常使用浏览器的<link rel=pr...

前端性能检查项（2020版）

2020版前端性能检查项来了！ “Web性能是一个很狡猾的野兽”。当我们面对性能时，我们怎么真正知道我们该怎么做？是昂贵的JavaScript，缓慢的web字体传送，笨重的图片 或 缓慢的渲染？探索tree-shaking、作用域提升（Scope Hoisting)、代码分割(C...

修复Web应用的内存泄漏问题

近几年，由于网站的构建方式由服务端渲染切换到客户端渲染的SPA，我们需要花费更多的时间来管理用户设备的资源。不能阻塞UI渲染的进程，不能让笔记本的风扇狂响，不能让手机电池狂掉电等等，我们最不想看到的页面就是下面这个了。我们要认真思考这些在服务端渲染的时代不存在的问题。 很少有人...

拥抱现代图片格式-HTML和React中轻量的跨浏览器图片

在The Cost of JavaScript中，提到了一个很好的点：200kb的JavaScript比200kb的图片更加“昂贵”。因为相比于图片，浏览器需要做更多的工作做代码比较。原文描述如下： A JPEG image needs to be decoded, ras...