CoyPan

React在16.8版本正式发布了Hooks。关注了很久，最近正好有一个小需求，赶紧来试一下。 需求很简单，部门内部的一个数据查询小工具。大致长成下面这样： 用户首次访问页面，会拉取数据展示。输入筛选条件，点击查询后，会再次拉取数据在前端展示。 关于React hooks的相关…

做过运营活动需求的同学都知道，一般一个运营活动中会用到很多的图片资源。用户访问首页时，都会看到一个loading态，表示页面正在加载所需的所有图片资源。像下面这样： 之所以要提前加载所有的图片，是为了在后续的页面中使用图片时，不会因为需要加载图片而产生耗时，导致体验问题。本文所…

JavaScript提供了几种运算符，可以对一些简单的值进行基本操作，比如算术操作、赋值操作、逻辑操作、按位操作等。 我们经常可以看到混合了赋值操作，算术操作和逻辑操作的JavaScript代码。但是，按位操作的代码就不是那么常见了。 在本文中，我们将过一遍所有的按位操作符并且…

如果我开两个浏览器tab，同时访问这个页面，我在其中一个页面切换ppt，另外一个页面会跟着变化。链接在这里： 研究了一下，这个效果其实就是用localStorage来实现的。 localStorage, 是一个用来做本地持久化存储的Web Api。 localStorage以键…

浏览器在什么时候会去加载一张图片呢？当然是我们网页中有图片的时候。在平时的项目开发中，我们还常常会用图片进行日志上报，大概像下面这样： 新建一个Image，将其src赋值，浏览器便会发出一个网络请求。 答案是：不会。只需要增加一行代码，将script插入到DOM树中，便会触发网…

作为一名前端工程师，网页首屏性能优化是一个绕不开的话题。最近这段时间我做了一些首屏性能优化的项目，这里做一个小小的总结。 网页是运行在浏览器端的，优化网页性能无法脱离浏览器。所以首先需要搞清楚浏览器加载一个网页的过程。最经典、常见的一个问题就是：从输入Url到网页呈现在用户面前…

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

自从HTML5提供了video标签，在网页中播放视频已经变成一个非常简单的事，只要一个video标签，src属性设置为视频的地址就完事了。由于src指向真实的视频网络地址，在早期一般网站资源文件不怎么通过referer设置防盗链，当我们拿到视频的地址后可以随意的下载或使用（每次…

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