影の域

关注web前端,追逐html5脚步,体会code人生

2011 年 03 月 20 日
by 影之迷惑
0 评论
881 点击

IE9允许前端开发获取到页面性能数据

长期以来,为了改善站点的用户体验,我们一直都是在页面顶端加上一个 (new Date()).getTime() 来获取用户打开页面的时间,使用httpwatch来分析页面打开的解释时间。httpwatch虽然强大,但是还是无法让我们深入到用户的环境去了解用户打开页面前的一些情况,例如:DNS解释时间,请求和响应时间,以及更加深入的页面渲染时间等重要信息。这些信息对用户环境分析是至关重要的。 如今,这个情况即将改变,微软的IE9将给前端开发们提供有力的性能分析接口让我们能够深入分析页面的性能,这就是强大的msPerformance接口。这个接口其实是基于HTML5草案Web Timing的定义来开发的(有意思的是这个接口是google提供的,chrome目前还没支持,IE9先行了)。 我们来看看通过Web Timing我们可以获取到什么数据   window.msPerformance.navigation { requestCount : 76 type : 0 startTime : 1277821481923 redirectedCount : 5 uniqueDomains : 31 }     window.msPerformance.timingMeasures { request : 22 domContentLoaded : 342 response : 10 … 阅读全文

2010 年 11 月 25 日
by 影之迷惑
0 评论
1,134 点击

前端资源文件缓存清除一法

对于前端开发来说,经常要面对JS,CSS,图片等资源的缓存更新问题(CDN永久缓存的就另当别论)。

大部分情况,为了节省服务器压力及带宽且又不失可维护性,习惯对这些资源文件添加比较久的缓存时间,这样就给前端开发人员带来一个自动更新的棘手问题。

其实,较简单的解决办法,就是固定周期或有条件的或每次(这样要缓存何用?)的增加随机数击穿缓存,强制更新即可。

这里说一个也较为简单的方式,利用AJAX的访问来更新本地缓存。

原理很简单,使用http协议的 If-Modified-Since 和 Cache-Control 两个header头参数即可。
阅读全文

2010 年 04 月 23 日
by 影之迷惑
0 评论
1,047 点击

IE6+和FF的CSS Hack

一、CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.) <style> #wrapper { width: 100px!important; /* IE7+FF */ width: 80px; /* IE6 */ } </style> 2, IE6/IE77对FireFox *+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签. <style> #wrapper { #wrapper { width: 120px; … 阅读全文

2010 年 04 月 10 日
by 影之迷惑
0 评论
993 点击

Data URI 和 MHTML

Data URI是由RFC 2397定义的一种把小文件直接嵌入文档的方案。通过如下语法就可以把小文件变成指定编码直接嵌入到页面中。
MHTML是MIME HTML (Multipurpose Internet Mail Extension HTML)的缩写,是由RFC 2557定义的把一个多媒体的页面所有内容都保存到同一个文档解决方案。这个方案是由微软提出从IE5.0开始支持,另外Opera9.0也开始支持,Safari可以把文件保存为.mht(MHTML文件的后缀)格式,但不支持显示它。 阅读全文

2010 年 03 月 09 日
by 影之迷惑
0 评论
965 点击

5 个简单实用的 CSS 属性

这篇文章介绍了 5 个实用的 CSS 属性。你应该很熟悉,但很可能很少会使用到。我并不是在谈论展望全新的 CSS3 属性,我指的是旧的 CSS2 中的属性,如:clip,min-height,white-space,curosr 和 display 等一些被所有浏览器广泛支持的属性。 阅读全文

2010 年 03 月 03 日
by 影之迷惑
0 评论
992 点击

Comet—“服务器推”技术

Comet指的是一种Web应用程序架构。可以直接说,它不是一种技术,而是一种思想,只是这种思想采用了已有的技术去实现。在这种思想里,客户端(Client)不需要显式地向服务器端(Server)发出请求,Server会在其数据发生变化的时候主动将数据异步发送给Client,从而使Client能够及时更新数据并呈现给用户。它不同于传统的Web,也不同于当前流行的Ajax,这种思想非常架构思想非常适合event-driven(事件驱动)式的Web应用和对交互性及实时性要求很强的应用,比如股票交易,聊天室,Web IM,网游等。 阅读全文

2010 年 02 月 28 日
by 影之迷惑
0 评论
679 点击

Understanding and Solving Internet Explorer Leak Patterns

In the past, memory leaks haven’t posed huge problems for Web developers. Pages were kept relatively simple and navigation between different locations within a site was a great way to clean up any loose memory. If there was a leak, it was most likely small enough to go unnoticed.

New Web applications live up to higher standards. A page might run for hours without being navigated and retrieve updated information dynamically through Web services. Language features are pushed to the breaking point by combining complex event schemes, object-oriented JScript, and closures to produce entire applications. With these and other changes, certain memory leak patterns are becoming more prominent, especially those previously hidden by navigation.

The good news is that memory leak patterns can be easily spotted if you know what to look for. Most of the troublesome patterns you might face have known workarounds requiring only a small amount of extra work on your behalf. While some pages might still fall prey to small memory leaks, the most noticeable ones can be easily removed. 阅读全文

2010 年 01 月 21 日
by 影之迷惑
0 评论
998 点击

CSS圆角—透明圆角化背景图片

序言:第一章中我介绍了最基本的纯CSS圆角框的实现原理,并给出Demo,在本章中会对上一个模型作一些新的创新,实现将背景图片透明圆角化。并给出一些漂亮的通用演示效果。
在上面的案例中,我只给出最为原始的圆角框模型,它还是存在一些不足之处。比如不能将图片应用到圆角框内。而在本例中,我会在上面的基础上作出一些创新。就是将背景图片也圆角化。 阅读全文