前端页面的性能一直都是一个热议的话题，从老早雅虎提出的35条“军规”开始我们就一直在关注页面的性能问题。 在前面巨人们的身后每个人也有自己的一些页面性能的经验，本文主要是介绍页面加载事件和性能评价指标。 浏览器渲染页面首先给一张直观图： 这是在网上找的一张图，虽然是用来描述 performance 的 API 但是也很好的描述了浏览器是怎么处理一个页面渲染的。 这是我们在 PC 时代考虑的浏览器性能，主要在服务端响应、文档下载、文档渲染三个阶段，性能优化大部分也集中在...

初次使用NodeJS的时候，被package.json中的版本规则搞晕，现在记录一下。 NPM中的版本号规则版本的格式major.minor.patch 主版本号.次版本号.修补版本号 版本匹配规则version 必须匹配某个版本 如：1.1.2，表示必须依赖1.1.2版 >version 必须大于某个版本 如：>1.1.2，表示必须大于1.1.2版 >=version 可大于或等于某个版本 如：>=1.1.2，表示可以等于1.1.2，也可以大于...

ngrok是一个反向代理，它能够让你本地的web服务或tcp服务通过公共的端口和外部建立一个安全的通道， 使得外网可以访问本地的计算机服务。也就是说，我们提供的服务（比如web站点）无需搭建在外部服务器， 只要通过ngrok把站点映射出去，别人即可直接访问到我们的服务。 有做过微信公众号开发的人，对它应该不陌生。因为用户跟微信公众号产生的交互行为，微信会把用户的相关信息推送到我们自己的服务器， 如果服务在本地，那微信当然无法推送给我们，这使得开发功能的时候调试相当麻烦。...

Jetty是一个用 Java 实现、开源、基于标准的，并且具有丰富功能的 Http 服务器和 Web 容器。 Jetty 可以用来作为一个传统的 Web 服务器，也可以作为一个动态的内容服务器，并且 Jetty 可以非常容易的嵌入到 Java 应用程序当中。 jetty是轻量级的web服务器和servlet引擎。它的最大特点是：可以很方便的作为嵌入式服务器。 就是只要引入jetty的jar包，可以通过直接调用其API的方式来启动web服务。 Jetty的广泛应用得益于其...

REST API都是要对外提供服务的，那么文档是必须的。Swagger是一个简单但功能强大的API表达工具。 它具有地球上最大的API工具生态系统，数以千计的开发人员，使用几乎所有的现代编程语言， 都在支持和使用Swagger。使用Swagger生成API，我们可以得到交互式文档，自动生成代码的SDK以及API的发现特性等。 2.X版本已经发布，Swagger变得更加强大。值得感激的是，Swagger的源码100%开源在github。 使用Swagger不纯粹是为了生成...

WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术。 依靠这种技术可以实现客户端和服务器端的长连接，双向实时通信。 它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息， 是真正的双向平等对话，属于服务器推送技术的一种。 其他特点包括： 建立在 TCP 协议之上，服务器端的实现比较容易。 与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，...

我们经常会遇见许多要运行很长时间的任务，如果还是按照常规的页面请求方式，就会产生卡顿，页面假死现象。 这时候我们第一个想到的就是将这种同步请求方式转换成异步请求，然而对于不需要关心返回结果的请求这个非常简单， 大部分情况是我们还得知道异步任务返回结果，然后调用回调函数来更新页面结果。 目前常见的三种方式是Ajax轮训、Ajax长连接（long polling）、WebSocket方式。 这里我只讲Ajax的两种方式，因为更好的WebSocket方式我已经单独写了一篇文章...

在平时开发中，如果网速比较慢的情况下，用户提交表单后，发现服务器半天都没有响应， 那么用户可能会以为是自己没有提交表单，就会再点击提交按钮重复提交表单，我们在开发中必须防止表单重复提交。 重复提交的几个场景场景一 在网络延迟的情况下让用户有时间点击多次submit按钮导致表单重复提交 场景二 表单提交后用户点击【刷新】按钮导致表单重复提交，点击浏览器的刷新按钮， 就是把浏览器上次做的事情再做一次，因为这样也会导致表单重复提交。 场景三 用户提交表单后，使用浏览器【后退】...

Http协议里包含了控制缓存的部分，以使Http客户端可以缓存和重用以前获取的资源，从而优化性能，提升体验。 在开发Web服务时，只需要关注请求头If-None-Match、响应头ETag、响应头Cache-Control就足够了。 因为这三个Http头就可以满足你的需求，并且，当今绝大多数的浏览器，都支持这三个Http头。 响应头ETagETag全称Entity Tag，用来标识一个资源。在具体的实现中，ETag可以是资源的hash值，也可以是一个内部维护的版本号。...

ECharts是一款由百度前端技术部开发的，基于Javascript的数据可视化图表库，提供直观，生动， 可交互，可个性化定制的数据可视化图表。 提供大量常用的数据可视化图表，底层基于ZRender（一个全新的轻量级canvas类库），创建了坐标系，图例，提示， 工具箱等基础组件，并在此上构建出折线图（区域图）、柱状图（条状图）、散点图（气泡图）、饼图（环形图）、K线图、地图、 力导向布局图以及和弦图，同时支持任意维度的堆积和多图表混合展现。 官方网站：http://e...

经常有这个需求，用用到树形菜单做展示或者选择，基于jquery的一个控件zTree非常简单好用，这里做一下记录。 官网介绍，zTree 是一个依靠 jQuery 实现的多功能“树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。 官网地址：http://www.treejs.cn/v3/main.php 另外还有好多实际效果的演示，可以去看看。 下载直接去github下载源码：https://github.com/zTree/zTree_v3 选取...