xiongzhengxiang的专栏

1.

因为浏览器的安全策略，浏览器不允许不同域(比如：dancewithnet.com和lab.dancewithnet.com)、不同协议(比如:http://dancewithnet.com和https://dancewithnet.com)、不同端口(比如:http:dancewithnet.com和http://dancewithnet.com:8080)下的页面通过XMLHTTPRequest

interface PerformanceTiming { readonly attribute unsigned long long navigationStart; //打开网页的那个时间点 readonly attribute unsigned long long unloadEventStart; readonly attribute unsigned long long

通过netlimiter 等工具，限制网络速度，我们可以看到页面是慢慢打开的，这个从直观的角度，说明了浏览器是边下载内容，边进行渲染的。下面讲讲在渲染过程中，几个关键时间点的计算1 startRender timestartRender time 是指从浏览器发出请求，到head解析完毕的这段时间。由于网络请求涉及到网络和服务器的内容，从前端优化的角度，我们将startRender t

HAR 1.2 SpecThis document is intended to describe a HTTP Archive 1.2 (frozen) format that can be used by HTTP monitoring tools to export collected data.HTTP Archive v1.2One of the goal

ssi (server side include),将内容发送到浏览器之前，可以使用“服务器端包含 (SSI）”指令将文本、图形或应用程序信息包含到网页中Include 命令可以把其它文档中的文字或图片插入到当前被解析的文档中，这是整个SSI的关键所在。通过Include命令只需要改动一个文件就可以瞬间更新整个站点！Include 命令具有两个不同的参数：Virtual：给出到服务

如何在持续升级的项目中保持项目的高性能？如何更加准确的定位和解决性能问题？实际上，WPO的最主要目的是改善用户体验，而用户体验的好坏则可以根据几个核心性能指标来衡量。从用户体验出发的几个核心时间指标包括：Start Render、DOM Ready、Page Load、TTI。不同的性能指标对用户体验的影响是不同的，而指标本身受哪些因素的影响也是不同的。优化某个指标又该具体采用什么样的方式？接

一  开始渲染阶段的时间点：      1  TTFB(Time To First Byte)    发起请求到服务器返回数据的时间         wiki(Time To First Byte or TTFB is a measurement that is often used as an indication of the responsiveness of a webse

弹出浮动层，让起居于浏览器底部是需求中，我用到的各种height有：1  浏览器可见区域高度：document.documentElement.clientHeight;   ***document.body.clientHeight*** 是整个页面内容的高度，而非浏览器可见区域的高度2 滚动条已滚动的高度：document.documentElement.scrollTop;

在网站优化中，如果图片优化得好，不但可以提高页面的加载速度，提升网站的用户体验，而且还可以通过图片优化来节省网站的带宽。那么作为页面构建工 程师应该采用什么方法来优化图片，既能保证UI的还原度，又使图片最精简呢？下面我就个人经验，来简单介绍一下图片优化的方法，首先我们了解一些图片方面 的知识：1. 矢量图与位图。 矢量图：缩放、旋转不失真的图像格式，不管你离多近去看都看不到

在最近的一个项目中，遇到了IE6 select遮挡div的bug，为了解决这个bug我查了很多资料，试图找到一个最最有效的方法，很多人是通过iframe的方法来解决，其实我查了国外的很多资料也是通过iframe的方法来解决的。今天我说说iframe解决的一般方法，已经使用jQuery插件bgiframe解决IE6 select z-index无效，遮挡div的bug。解决方法之一：If

浮动在历史上最初是做什么的？ 在最开始的web发展初期，只有一些很简单的文字和图片的布局，其中文字环绕图片怎么办呢？聪明的css开发者就发明了一个float属性。这就是现在我们要说的浮动。因此，浮动出现的意义就是让文字环绕图片。这是最原始的初衷。文字环绕图片是怎么做到的呢？下面分析下。首先我们看看没有float的图文混排。 代码：HTML>http-equi

REST关键原则大部分对REST的介绍是以其正式的定义和背景作为开场的。但这儿且先按下不表，我先提出一个简单扼要的定义：REST定义了应该如何正确地使用（这和大多数人的实际使用方式有很大不同）Web标准，例如HTTP和URI。如果你在设计应用程序时能坚持REST原则，那就预示着你将会得到一个使用了优质Web架构（这将让你受益）的系统。总之，五条关键原则列举如下：为所有“事物”定

在使用中常常遇到utf-8和utf8，现在终于弄明白他们的使用不同之处了，现在来和大家分享一下，下面我们看一下utf8 和 UTF-8 有什么区别 “UTF-8”是标准写法，php在Windows下边英文不区分大小写，所以也可以写成“utf-8”。“UTF-8”也可以把中间的“-”省略，写成“UTF8”。一般程序都能识别，但也有例外（如下文），为了严格一点，最好用标准的大写“UTF-8”。

（转者著：转贴文章，中间原作者有些说的不对的地方，unicode细节可以参加wikipedia：http://zh.wikipedia.org/wiki/Unicode）    编码一直是让新手头疼的问题，特别是 GBK、GB2312、UTF-8 这三个比较常见的网页编码的区别，更是让许多新手晕头转向，怎么解释也解释不清楚。但是编码又是那么重要，特别在网页这一块。如果你打出来的不是乱码，而网页

张克军   http://hikejun.com/blog/玉伯   http://hi.baidu.com/bujichong/blog李松峰  http://www.cn-cuckoo.com/阮一峰  http://www.ruanyifeng.com/blog/archives.html田永强（朴灵）(淘宝）：xxx元彦 http://www.alloyte

随着W3C一声令下，几年前使用非常频繁的frameset + frame已完成使命，光荣退伍。作为frameset的替代方案（姑且这么称吧），iframe的使用也多了起来。较frameset方案，iframe在使用上更加灵活，文档结构更加友好。本文就js操作iframe在不同浏览器（没错，又是浏览器兼容…）的差异性做一些说明，力求总结出一个适应于所有主流浏览器的方案，笔者只测试了IE 6/

html5 postMessage实现跨域postMessage是html5的一个新功能，可以实现不同域名之间的通信，通过给postMessage方式发送数据，监听则通过在父子窗口添加onmessage事件进行。缺点也就很明显了，只有支持html5的浏览器才支持这种跨域方式，像IE6、7当然就拒之门外了！

需求，有三个内容需要居中显示内容居中，我们太熟悉了：）.content1,.content2,.content3{width:960px;margin:0 auto;}这样，三个内容都居中了。然后，当content1 内容里面的h1,距离顶部有50个像素的时候，怎么写？ 第一反应，用margin.title{

SVG Fill PatternsBy Jakob JenkovShare on Facebook Connect with me:      SVG fill patterns are used to fi

Working Draft: Working Drafts are published and announced specifically to ask for review and input from the community. Often there are issues that a Working Group would particularly like input on. U

展开缩写展开缩写功能将类似CSS的选择器转换为XHTML代码。术语“缩写”可能会有点儿难以理解。为什么不直接称之为“CSS选择器”呢？嗯，首要原因是语义化：“选择器”意为选择一些东西，但是在这里我们事实上是生成 一些东西，是写一个长代码的较短的替代。其次，它只是使用真实的CSS选择器语法的一个小的子集，并添加了一些新的操作符。这里是一个支持的属性和操作符的列表：E元

问题：xx.innerHTML=">"网页上输出> 我希望>就输出>解决方案：在innerHTML 赋值前，对字符串，进行如下处理：var tagsToReplace = { '&': '&amp', '<': '&lt', '>': '&gt'};function replaceTag(tag) { return t

网站的性能(Performance)要考虑两方面，一方面是在Server端的运行效率，另一方面是在Client端感受到的效率。不要以为Server端效率高这个网站或者服务给用户的体验就是高效的，如果不考虑影响Client Performance的因素，Server端跑得再快用户也可能感觉慢得和牛一样。Yahoo的哥们做的研究真不是盖的，他们还写了本书《High Performance We

TCP(Transmission Control Protocol)　传输控制协议TCP是主机对主机层的传输控制协议，提供可靠的连接服务，采用三次握手确认建立一个连接:位码即tcp标志位,有6种标示:SYN(synchronous建立联机) ACK(acknowledgement 确认) PSH(push传送) FIN(finish结束) RST(reset重置) URG(urge

HTTP协议（Hypertext Transfer Protocol，超文本传输协议）是用于从WWW服务器传输超文本到本地浏览器的传送协议，是一个客户端和服务器端请求和应答的标准（TCP）。HTTP协议 - HTTP协议的工作方式    由于HTTP协议是基于请求/响应范式的(相当于客户机/服务器)，客户机先发送请求，服务器才能返回响应，这也决定了服务器不能自主推送信息到客户机

why?SPDY产生的原因http 协议的以下问题，造成页面加载时间长：1 一个tcp/ip 连接，只能传输一个请求。一个tcp/ip连接，将导致500ms的延迟2 只有客户端能发送请求，服务器不能主动发送请求3 请求和响应头都没有压缩。请求头的大小从200b到2KB不等，这些未压缩的数据将造成明显的延迟4 重复的头。不变的数据如：ua、host、Accept*deng每次都发

我们知道HTTP协议采用“请求-应答”模式，当使用普通模式，即非KeepAlive模式时，每个请求/应答客户和服务器都要新建一个连接，完成 之后立即断开连接（HTTP协议为无连接的协议）；当使用Keep-Alive模式（又称持久连接、连接重用）时，Keep-Alive功能使客户端到服 务器端的连接持续有效，当出现对服务器的后继请求时，Keep-Alive功能避免了建立或者重新建立连接。

requestAnimationFrameThe secret to silky smooth JavaScript animation!Creating an animation in JavaScript is one of the simplest things you can do. If you’ve ever tried to do it, you’ll most

参考连接：http://www.ft77.com/texo/article.asp-id=87&title=87.htmlhttp://hi.baidu.com/yorbpmgwkxbdesd/item/24eb9472c81e20295d1789b1http://blog.youkuaiyun.com/jiangfei009003/article/details/7358735

当img 的display 属性为：none 时，通过imgTar .width 始终得到0，而display :block时，能正确得到width

}When developing modern HTML applications, you often write a lot of HTML fragments programmatically. You concatenate HTML tags and dynamic data, and insert the resulting UI markup into the DOM. He

session的工作原理 一、术语session 在我的经验里，session这个词被滥用的程度大概仅次于transaction，更加有趣的是transaction与session在某些语境下的含义是相同的。 session，中文经常翻译为会话，其本来的含义是指有始有终的一系列动作/消息，比如打电话时从拿起电话拨号到挂断电话这中间的一系列过程可以称之为一个session。有时候我们

标题（H1-H6）标签是指网页html 中对文本标题所进行的着重强调的一种标签，以标签... ...依此显示重要性的递减，制作标签的主要意义是告诉搜索引擎这个是一段文字的标题，起强调作用。网站优化时怎么使用标题（H1-H6）标签？一般来说，用来修饰网页的主标题

以两列div为例，由于两边内容都可能动态增长，所以不能写死高度，这就造成高度不一致的问题了。为了实现左右高度相同，除了使用js动态修改、table外，我们可以使用多div高度自适应的技巧。两列div框架如下： <div class="left"

from:http://clagnut.com/blog/348/        http://www.shrutigupta.com/index.php/2006/01/30/how-to-use-ems-for-html-font-size/Tex

一、#的涵义　　#代表网页中的一个位置。其右面的字符，就是该位置的标识符。比如，　　http://www.example.com/index.html#print　　就代表网页index.html的print位置。浏览器读取这个URL后，会自动将print

Over time certain conventions and best practices have been developed to help improve the general usability of websites during their design a

【本文系外部转载，原文地址：http://ued.taobao.com/blog/2011/08/26/encode-war/】 导语：由于历史原因，淘宝网的页面编码一直都是gbk，F2E手册中也有明确规范，刚开始的一段时间，F2E们并未遭遇太麻烦的乱码问题，大家相安

网页的缓存是由HTTP消息头中的“Cache-control”来控制的，常见的取值有private、no-cache、max-age、must-revalidate等，默认为private。其作用根据不同的重新浏览方式分为以下几种情况：（1） 打开新窗口如果指定cache