前端性能优化完全是一个技术话题,但是对于项目的用户体验有非常大的影响,如果你的网站打开要等待三五秒或者等到浏览器提示无法连接,那网站哪来的流量,哪来的品牌影响和用户忠诚度,挣钱就算了。
3s,作为判断一个用户忍受你网站速度的限度,如果超过3s,用户已经对这个网站产生了负面的抵触心理。
前端性能优化和web标准有什么关系,接着第一篇 悟道web标准——统一思想,遵循标准 ,这是对你遵循web标准的一个补偿或者是对标准的一个认可。
引用:
落后的页面工程师体系,美工代劳的页面代码,唯独IE才能浏览的页面代码,不需要写代码用图形工具直接导出的页面代码,大量的流量消耗的页面代码,速度慢的像蜗牛的页面代码,程序员看到就头大发麻的页面代码,每次改版修改都要打动干戈,重复产生的页面代码,一种让页面工程师和民工一样的页面代码。
我们当然要革命它,取代他,创造全新的页面工程师体系和页面质量,独立的页面工程师完成的页面代码,跨越平台的页面代码,只要能解析页面的设备都能够访问和浏览,手写的页面代码,整齐划一,层次分明,最低流量消耗的页面代码,程序员喜欢的页面代码,访问速度超快的页面代码,改版可重复利用的页面代码,让页面工程师抬起头来,骄傲的称自己是工程师,书写的也是计算机代码的页面代码。
前端优化正好给Web标准提供了一个检验的机会,用“实践是检验真理的唯一标准”来判断标准化到底好不好,对不对。
阅读全文…
浏览器为了重新渲染部分或整个页面,重新计算页面元素位置和几何结构(geometries)的进程叫做 reflow。由于 reflow 是一种浏览器中的用户拦截(user-blocking)操作,所以了解如何减少 reflow 次数,及不同的文档属性(DOM 层级(DOM depth),CSS 效率,不用类型的 style 变化)对 reflow 次数的影响对开发者来说非常必要。有时 reflow 页面中的一个元素会 reflow 它的父元素(译注:这里是复数)以及所有子元素。
阅读全文…
有很多种方法来实现图片的预加载,通常大部分使用Javascript让事情滚动。不要再受Javascript预载的束缚了吧,用CSS你就可以毫不麻烦的预载你的图片。
为什么使用预载
你为什么会考虑使用预载呢?你是否曾有个网站,在那个网站你要滚动你的导航然后有个延迟直到图片被加载完……嘿嘿。预载将在这方面帮助你。它将在页面加载的时候加载那些图片并将其存储在浏览器的缓存里面。这样当用户滚动导航的时候,很漂亮而且流畅,没有延迟。
阅读全文…
原文链接:http://www.hplus.org.cn/blog/2009/07/143
(本文的标题叫做“方式研究”,是因为,我最终也没有想通原理,只猜出了方法,但是,的确是实现了效果。)
最近的项目涉及到很多表单的制作,特别是复选框(checkbox)和单选框(radio)。但是在前端开发过程中发现,单(复)选框和它们后面的提示文字在不进行任何设置的情况下,是无法对齐的,而且在Firefox和IE中相差甚大。即使设置了vertical-align:middle,也依然不能完美对齐。如下图所示:

阅读全文…
引言
你是否曾经想过设计一个漂亮的网页,但是却不知道怎样入手?说实话,几年前我也是这样。当我浏览网页的时候我看到这么多好看的网页,我就希望自己有技术创作这样的设计作品。
今天我可以这么做了,而且我将教你怎么做这样的设计!从根本上,对于这种设计你需要一点photoshop的操作技能和观察细节的能力。通过以下的教程,我将会指出其中极细微的细节之处,而这些细节讲使你的网页设计漂亮起来。打开photoshop,我们开始啦!
正文
先看效果图
阅读全文…