CoyPan

在平时的工作中，页面的动画效果是很常见的需求。那么，怎么样实现一个高效的动画呢？ 一个页面展示在用户面前，简单来说，会经历以上5个步骤。我们可以把上面这个图称为像素管道。 Javascript: 执行js逻辑，修改DOM，修改CSS等。 Style：计算样式。 Layout：在…

性能优化是前端开发中不可避免的一个话题。本文将记录一次客户端内H5页面首屏性能优化的项目。 信息流App是当下最流行的产品之一，如今日头条等。我所在的团队也是在做这样一款信息流App。App的Feed流是客户端Native实现的。用户点击Feed流中的文章后，会进入到文章底层页…

我曾经写过关于如何在2018年设计Web页面的文章，但是网络发展得很快，所以随着越来越多的现代公约成为主流，这些指导方针已经过时了。 让我们来分解并讨论一下2019年为现代网络设计的最重要的设计原则。 这一条仍然是最重要的原则，也并非没有理由。高薪的焦点小组已经表明，当用户在浏…

HTML 中****元素规定了外部资源与当前文档的关系。最常见的用法，是用来链接一个外部的样式表，比如： link标签还能做一些其他的事情，来帮助我们提高页面性能。 来看一下link标签除了链接外部样式表之外的一些使用场景。 DNS预解析。 DNS解析，简单来说就是把域名转化为…

web应用的表现，越来越受制于启动时间。我们已经习惯于使用大量的JavaScript代码来开发丰富的web交互体验。从HTTPArchive上，我们可以看到，一个移动设备平均会加载350KB的JavaSript代码，10%的页面会加载超过1MB的JavaScipt代码。复杂的交…

最近这段时间，我在做h5的首屏加速相关的工作。首先需要搞清楚的问题就是：首屏加速，到底是要加速什么? 答案可能很简单：加快网页的展现过程。不过再细想一下，网页快不快是针对用户而言的，那么什么样的速度会让用户感到快呢？或者说，哪些指标能够衡量用户所感知的"快"呢？ 我首先想到的衡…

在上一篇文章中，梳理了javascript中的两个重要概念：iterator和generator，并且介绍了两者在异步操作中的应用。 在异步操作中使用iterator和generator是一件比较费劲的事情，而ES2017给我们提供了更为简便的async和await。 mdn上…

上面的代码中，用for...of来遍历一个数组。其实这里说遍历不太准确，应该是说：for...of语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执…

前端开发正在以惊人的速度发展。曾经的前端开发，技术栈都是很简单的，如今却越来越复杂。这一点从无数的文章、教程和Twitter上就可以看出来。在本文中，我将讨论为什么Web Component是一个很好的工具，可以在不使用复杂框架或构建步骤的情况下提供高质量的用户体验，而且不存在…