HTTP/2 在没有破坏原有的语义化（例如:方法、状态码、URIs、首部字段……）的基础上，更改了数据的封装格式以及客户端和服务器之间的数据传输机制，引入了二进制分帧层（Binary Framing）。采用新的编码机制，客户端与服务器之间的通信信息被分割成更小的帧，每个帧都是二进制编码。本文将对 HTTP/2 和 HTTP/1.1 的差异部分进行对比，同时对 HTTP/2 部分关键帧进行梳理说明。
显示部分REQUEST:HTTP/2 VS HTTP/1.1HTTP/2 Header部分新增冒号开头 authority method path scheme 首部,同时所有字段均小写
RESPONSE:HTTP/2 VS HTTP/1.1
所有字段均小写,其余基本相同
流量部分调试工具:
Chrome net-internalWiresharkChrome net-internal：以 Chrome (版本:53.0.2785.143) 为例,通过其内置的 net-internals 工具(地址栏输入 chrome://net-internals/#http2)即可查看当前活跃...阅读全文

使用缓存和重用之前的资源的能力，则是成为前端性能优化很关键的一个方面。每个资源都可以通过 HTTP Cache-Control 头来定义相关的缓存策略，Cache-Control 可以控制谁，以及在什么条件下重用缓存，那么如何定义最佳的 Cache-Control 策略就显得格外重要。
Cache-control：The Cache-Control general-header field is used to specify directivesthat MUST be obeyed by all caching mechanisms along therequest/response chain. The directives specify behavior intended toprevent caches from adversely interfering with the request orresponse. These directives typically override the default cachingalgorithms. Cache direc...阅读全文

前端性能优化一直都是一个值得讨论和深究的问题，上有 yahoo 经典 14 条优化军规，下有 O’Reilly 出版的两本性能优化圣经《高性能网站建设指南》、《高性能网站建设进阶指南》。它们的出现，让 Web 应用的性能在 HTTP 1.x 时代大放异彩，而即将步入 HTTP 2.0 时代，有哪些新的手段可以采用，又有哪些老的手段将不再适用？本文将从一个前端初学者的角度，整理并分析开来。
前言雅虎 14 条性能优化原则及其分类：...阅读全文

The HTML <meta> element represents any metadata information that cannot be represented by one of the other HTML meta-related elements
HTML <meta> 标签提供了 HTML 文档的元数据信息,HTML 5 引入了新属性 charset 抛弃 scheme 的同时，开发者也可以适当的利用相关  标签，做一些有利于 SEO 的小举措，还可以进行其他服务的调用。
相关属性：charsethttp-equivcontent-languageContent-Security-Policycontent-typedefault-stylerefreshset-cookieX-UA-Compatiblenameapplication-nameauthorcreatordescriptiongeneratorkeywordsreferrerno-referreroriginno-referrer-when-downgradeorigin-when-cros...阅读全文

本文总阅读量原生JS实现li点击弹出索引2012年10月9日两种方法原生JS实现li点击弹出索引
第一种方法：直接将索引i寄存在对象中，代码如下：Html结构：<ul id="test">    <li>0</li>    <li>1</li>    <li>2</li>    <li>3</li></ul>
JS：window.onload = function () {    var oUl = document.getElementById('test'),        oLi = oUl.getElementsByTagName('li');    for (var i = 0,len = oLi.length; i < len; i++) {        oLi[i].idx = i;        oLi[i].onclick = function () {            alert(this.idx)        }    }}
第二种方法：利用JS闭包实现，代码如下：...阅读全文