Fork me on GitHub

web

HTML页面性能指标

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

NPM版本号规则以及更新策略

初次使用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,也可以大于...

CentOS7搭建ngrok服务器

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

Jetty9简易教程

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

使用Swagger生成RESTful API文档

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

聊一聊WebSocket

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

使用Ajax实现异步任务

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

防止表单重复提交

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

HTTP缓存介绍

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

JavaScript图表库ECharts使用

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

树形控件zTree使用

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