玖五

大家好，我叫刘博文，今天给大家分享的主题叫《让你的网页更丝滑》，其实就是更流畅的意思。 简单介绍一下自己，2012年我从中专毕业，当时是17岁，2015年我加入了360最大的前端团队奇舞团，那一年我是20岁；2017年由于组织架构的变动，我们组被拆分到360导航，所以我就变成3…

上周我在FDConf的分享《让你的网页更丝滑》中提到了“时间切片”，由于时间关系当时并没有对时间切片展开更细致的讨论。所以回来后就想着补一篇文章针对“时间切片”展开详细的讨论。 从用户的输入，再到显示器在视觉上给用户的输出，这一过程如果超过100ms，那么用户会察觉到网页的卡顿…

所谓放量其实就是A/B测试，不过在我们组内部喜欢叫“放量”。关于放量其实有很多种规则：时间、地区、用户区间、随机放量等。 放量只有在大流量的C端项目中才有这个需求，流量小的产品或者公司内部使用的管理系统通常不需要做放量。 这里衍生出一个问题“为什么大流量C端项目需要做放量？”。…

前段时间，我将精力专注在Web性能领域；在这个领域下有个重要的课题是如何让网页更丝滑（流畅）。 想让网页变得丝滑，首先，我们需要一个标准来判断什么样的网页是丝滑的；其次，我们要准确的测量出网页的性能数据；最后，使用有效的方法让网页变得丝滑。 本篇文章将针对这三个方面进行详细的介…

上个月，我写了一篇文章介绍什么是“关键渲染路径”，其实目的是为了给这篇文章做一个铺垫，本文将谈谈如何优化关键渲染路径（本文将假设您已经阅读过《关键渲染路径》这篇文章或已经懂得了什么是“关键渲染路径”）。 优化关键渲染路径有很多种方法与情况，不同情况下优化方式也各不相同，初步看起…

浏览器将HTML，CSS，JavaScript转换为屏幕上所呈现的实际像素，这期间所经历的一系列步骤，叫做关键渲染路径（Critical Rendering Path）。 图1-1给出了关键渲染路径的具体步骤。如图所示，首先，浏览器获取HTML并开始构建DOM（文档对象模型 -…

我们都喜欢有图片的网页，图片很美好，很有趣，同时它涵盖了丰富的信息。所以，在加载网页时，大部分流量被图像资源所占据（平均60%，数据可能不准确）。 图像资源不只占用网络资源，它也会占用网页中大量的视觉空间。所以图像渲染的速度会直接影响用户体验。图像优化其实就是最大限度地减少图像…

在前端应用越来复杂的今天，为了监控前端应用是否正常运行，通常会在前端收集一些错误与性能等数据，最终我们会将这些数据上报到服务端。 上报的方式有很多，理论上我们只要能把数据发给服务端就行了。在浏览器中可以发送请求的方式非常多，包括不限于：xhr、fetch、script标签、im…

剑，是剑客的武器，而现代前端工程师的剑可以理解为前端框架(当然不止是前端框架，但今天我们只谈前端框架)。 所谓御剑之道，指的是如何驾驭所有前端框架。对，你没有看错，是所有，而不是某一个。 如果是介绍如何驾驭某一个框架，那么本文的标题可能就要改成“御剑之术”，但本文介绍的是“御剑…