Follow me on GitHub

建站❤编程

静态资源(JS、CSS)的版本化、优化及增量部署

版本化

Web前端性能优化中很重要的一个部分是文件加载的优化,静态文件在客户端缓存的做法可减少请求量,减小服务器和带宽压力的同时让页面加载更顺畅,提升浏览体验。

所以在服务环境中(产品上线后),一般会通过header允许浏览器缓存,并设置一个过期时间(Expires)。但若在Expires期内对资源文件做修改,客户端仍由缓存读取旧版文件而非从服务器加载,则可能造成样式破坏或脚本报错等问题。这就要求我们在开启缓存的同时,在文件更新后通知客户端更新缓存文件,也就是这里要说的“版本化”——对静态文件uri中加入版本信息,每次文件改动的同时更新版本信息,告知浏览器文件版本,从而确保始终调用最新的资源文件。

More >

一个闭包还是三个闭包?

2013-01-24_133245

截自:http://coolshell.cn/articles/6731.html

More >

用Navigation Timing API测试前端性能

Navigation Timing 接口为我们提供了监控网站性能所需的数据。相比于以往基于JS的监测机制,此接口提供的数据更为准确和全面。

JS中通过 window.performance 调用数据,该特性在IE9、最新的Firefox和Chrome中都已实现(http://caniuse.com/nav-timing)

具体的介绍已经有人做了详尽总结 http://www.cnblogs.com/mrsunny/archive/2012/09/04/2670727.html

为了方便理解和测试,对图片稍稍加工为网页,把各时间节点和区间(差值)计算结果标注在旁边,有兴趣的可以访问:http://github.kainy.cn/NavigationTiming/

More >

移动设备浏览当前页

这是一个用于移动设备(手机/pad)访问桌面设备(台式机/笔记本)正在浏览网页的书签栏工具。如果你还在通过电子邮件向自己发送链接,以便在另一台设备上打开,推荐你试试这个小工具。

由来

受Chrome“发送标签页到移动设备”功能的启发,有了让手机能够访问到电脑浏览器正在浏览的网页这个想法。最开始的实践是在博客文章页右边栏添加了“移动设备上浏览本页”挂件,但我这样一个门可罗雀的小博客受众实在有限;于是考虑以bookmarklet的形式,借助JavaScript这种为浏览器广泛支持的脚本语言,生成网址二维码来实现浏览网页的设备间同步,最终完成此工具。

More >

webrtc实现的视频聊天室应用

在Github上逛荡,发现一个有趣的项目 webrtc.io-demo —— 对webRTC的简化应用。

百科上的介绍“webRTC实现了基于网页的视频会议,标准是WHATWG 协议,目的是通过浏览器提供简单的javascript就可以达到实时通讯(Real-Time Communications (RTC))能力…”

看样子是很有希望在未来浏览器端到端通信大展拳脚。

More >

PHP函数setcookie写入重名cookie

测试代码

测试代码

More >

移动设备浏览当前页