这个会不会是因为html嵌套太深导致Layout等计算复杂，所以CPU上升了呢，笔者尝试把DOM结构简单化，以及加上contain: strict等Layout隔离的方法，也是没有效果。所以只能是JS执行问题了，通过Chrome devtools的Performance可以研究…

天下武功，唯 (wei) 快(fu) 不(bu) 破(po)。 随着近几年的前端技术的高速发展，越来越多的团队使用 React、Vue 等 SPA 框架作为其主要的技术栈。以 React 应用为例，从性能角度，其最重要的指标可能就是首屏渲染所花费的时间了。那么今天，我们要给大家…

函数节流和函数防抖是一种优化方法，可用于减少高频繁触发任务（函数）的执行次数，达到减少资源占用的目的。 函数节流：任务在指定的间隔时间内只执行一次。 函数防抖：只有在任务触发的间隔大于等于指定的间隔时间，任务才会被执行。 区别：在指定时间内，任务执行的次数不同。假设持续触发一个…

本文核心分为两部分，第一部分讲述普通浏览器中能干的事情，第二部分则讲述在自建容器的背景下更能干的事情。 文章内容会比较粗略，如果你对具体实现感兴趣，欢迎在 这 留言。 通常情况下，一个 html bundle 里面一般会有 script 等标签去加载其他的资源。浏览器在加载完 …

如果大家不了解 Gatsby 是什么，我这里简单介绍一下，它是一个基于 React 的静态页面构建工具。开发者通过编写页面模板（其实就是 React 组件）和配置文件，Gatsby 就能为指定的数据文件（可以是 Markdown 等）创建页面。 开发过程中我一直使用的是 ser…

前几周我们开始了一个关于深度探索 JavaScript 的系列，和 JavaScript 如何工作：我们想通过已经知道的 JavaScript 内容，把它们组织到一起帮你写出更好的代码和应用。 这个系列的第一篇文章关注了运行时和调用栈的引擎论述。第二篇深度调查了 Google'…

假设您正在访问一个网站，如果Web内容不在几秒内显示在屏幕上，那么作为用户您可能会选择关闭标签页，转去浏览其他页面从而代替这个网页的内容。但是作为Web开发者，您可能希望跟踪请求与导航的详细信息，这样你就可以知道为什么这个网页的速度在变慢。 W3C性能工作组提供了可以用来测量和…

三. tree-shaking实践 webpack2 发布，宣布支持tree-shaking，webpack 3发布，支持作用域提升，生成的bundle文件更小。 再没有升级webpack之前，增幻想我们的性能又要大幅提升了，对升级充满了期待。实际上事实是这样的 升级完之后，b…

最近在做一个基于mobile app的漫画的项目，面向印尼市场。 上线后，基本测试没有问题，打开也挺顺畅。但是google analytics却反馈加载平均19s！ OMG～～于是开展了一系列的探索。。 首先说说技术栈，用的是create-react-app,redux,rea…