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

写在前面 本文首发于公众号：【符合预期的CoyPan】 在上一篇文章中，梳理了javascript中的两个重要概念：iterator和generator，并且介绍了两者在异步操作中的应用。 【JS基础】从JavaScript中的for...of说起(上) - iterator 和 generator 在异步操作中使用iterator和generator是一件比较费劲的事情，而ES2017给我们提供...

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

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

使用正确的缓存可以带来巨大的页面性能上的收益，节省带宽，减少服务器成本。但是许多网站并没有解决好他们的缓存问题，创造了一个race conditions，导致相互依赖的资源之间失去了同步。

写在前面 本文首发于公众号：符合预期的CoyPan React在16.8版本正式发布了Hooks。关注了很久，最近正好有一个小需求，赶紧来试一下。 需求描述 需求很简单，部门内部的一个数据查询小工具。大致长成下面这样： 用户首次访问页面，会拉取数据展示。输入筛选条件，点击查询后，会再次拉取数据在前端展示。 需求实现 使用Re...

做过运营活动需求的同学都知道，一般一个运营活动中会用到很多的图片资源。用户访问首页时，都会看到一个loading态，表示页面正在加载所需的所有图片资源。像下面这样：

写在前面 本文首发于公众号：符合预期的CoyPan demo体验地址及代码在这里：请用手机或浏览器模拟手机访问 上一篇文章介绍了canvas中的拖拽、缩放、旋转中涉及到的数学知识。可以点击下面的链接查看。 canvas中的拖拽、缩放、旋转 (上) —— 数学知识准备。 代码准备 - 如何在canvas中画出一个带旋转角度的元素 在canvas中...

最近做了一个移动端活动页的需求，大概就是diy一个页面。用户可以对物料进行拖动、缩放、旋转，来达到diy的目的。用DOM来实现是不现实的，我采用了canvas来实现和用户的交互。开发过程中，涉及到了canvas中对物料元素的拖动、缩放、旋转等。本文将详细介绍在不使用任何第三方库的情况下，如何实现这些功能。最终的效果de...

本文首发于公众号：符合预期的CoyPan 写在前面 css大家都很熟悉了，这里就不多介绍了。本文主要介绍一下两个在日常的工作中可能会出错的地方。 margin-top 与 padding-top 这两个属性大家都很熟悉了，margin-top表示外部的上边距，padding-top表示内部的上边距。 取值可以是一个具体的值或者一个百分比，如： {代码...} ...

本文首发于公众号：符合预期的CoyPan web中的事件 事件并不是JavaScript的核心部分，他们是在浏览器的Web Api中定义的。下面列举的几种情况，都属于发生了事件。 用户在某个元素上点击鼠标或悬停光标。 用户在键盘中按下某个按键。 用户调整浏览器的大小或者关闭浏览器窗口。 一个网页停止加载。 提交表单。 播放、暂停...

写在前面 前段时间，我写过一篇文章前端开发中的Error以及异常捕获。 在文章中，我提到了这个问题： 经过不断探索(不想再喷自己了)，我找到了原因。下面一一道来。本文主要讲解自己找问题原因的思路，如果想看结论和总结，请直接跳到文末。 问题复现 我是在自己以前的项目中测试addEventListener的重写的。这里直接上精...

本文首发于公众号: 符合预期的CoyPan本文章翻译于：[链接]原标题为：Prevent Sending HTTP Referer Headers from Your Website

在前端项目中，由于JavaScript本身是一个弱类型语言，加上浏览器环境的复杂性，网络问题等等，很容易发生错误。做好网页错误监控，不断优化代码，提高代码健壮性是一项很重要的工作。本文将从Error开始，讲到如何捕获页面中的异常。文章较长，细节较多，请耐心观看。

在前端开发中，npm已经是必不可少的工具了。使用npm，不可避免的就要和package.json打交道。平时package.json用得挺多，但是没有认真看过官方文档。本文结合npm官方文档以及自己平时使用过程中的感悟，谈一谈package.json。官方文档在这里。

原文标题：This year in JavaScript: 2018 in review and npm’s predictions for 2019本文翻译自NPM官方发布的一份报告。原文链接点击这里

在这个数据无比重要的时代，用户在网页上面的一系列操作，都需要用数据记录下来。在一个网页中，某个元素的点击数，展现数可以说是最基本的指标了。点击数很简单，用户点击的时候，上报一条点击日志即可。但是展现日志，就稍微麻烦一点了。特别是对于必须要上下滑动页面才会出现的元素。滑动展现的场景，在feed流形式的...

在最近的开发过程中，不同的项目、不同的页面都需要用到某种UI控件，于是很自然的将这些UI控件拆出来，单独建立了一个代码库进行维护。下面是我的组件库大致的目录结构如下：

在前端项目日益复杂的今天，早已不再是后端吐出数据，前端直接展示就行了。一些计算是需要放在前端进行的。前端要进行计算，那么变量的类型在整个过程中，就必须是明确的。不然很容易出一些bug。举个最简单的例子，

svg是XML语言的一种形式。SVG可以通过定义必要的线和形状来创建一个图形，也可以修改已有的位图，或者将这两种方式结合起来创建图形。图形和其组成部分可以变形，可以合成，还可以通过滤镜完全改变外观。可能不太准确的简单来说，"就是可以绘图的html"。

在项目中使用highcharts是很容易的，移动端也适配的不错，按照官网教程即可。但是在移动端，由于手机端屏幕太小，需求方希望可以弄一个全屏图，把手机横过来观察曲线。

背景 在H5页面或者app的webview中调起第三方app 核心 调起app是操作系统(iOS、Android)的机制，在h5页面，我们可以做的不多。 在调起之前，h5页面无法判断当前手机是否安装了对应的app，我们只能去尝试调起，并且用一些方法来处理没有调起的情况。 调起的原理就不介绍了，网上一搜一大堆。直接上核心代码。 {代码...} 解...