Submitted by yudesign on 2010, August 29, 11:23 PM
法则 1. 减少 HTTP 请求次数
80%的最终用户响应时间花在前端程序上,而其大部分时间则花在各种页面元素, 如图像、 样式表、 脚本和 Flash 等,的下载上。 减少页面元素将会减少 HTTP 请求 次数。这是快速显示页面的关键所在。 一种减少页面元素个数的方法是简化页面设计。 但是否存在其他方式,能做到既 有丰富内容,又能获得快速响应时间呢?以下是这样一些技术: Image maps 组合多个图片到一张图片中。总文件大小变化不大,但减少了 HTTP 请求次数从而加快了页面显示速度。 该方式只适合图片连续的情况;同时坐标的 定义是烦人又容易出错的工作。 CSS Sprites 是更好的方法。它可以组合页面中的图片到单个文件中,并使用 CSS 的 background-image 和 background-position 属性来现实所需的部分图片。 Inline images 使用 data: URL scheme 来在页面中内嵌图片。这将增大 HTML 文 件的大小。组合 inline images 到你的(缓存)样式表是既能较少 HTTP 请求, 又能避免加大 HTML 文件大小的方法。 Combined files 通过组合多个脚本文件到单一文件来减少 HTTP 请求次数。样式 表也可采用类似方法处理。 这个方法虽然简单,但没有得到大规模的使用。 大 10 美国网站每页平均有 7 个脚本文件和 2 个样式表。当页面之间脚本和样式表变化 很大时,该方式将遇到很大的挑战,但如果做到的话,将能加快响应时间。 减少 HTTP 请求次数是性能优化的起点。这最提高首次访问的效率起到很重要的 作用。 Tenni Theurer 的文章 Browser Cache Usage – Exposed!描述,40-60% 据 的日常访问是首次访问,因此为首次访问者加快页面访问速度是用户体验的关 键。
» 阅读全文
Tags: yahoo, 14条, 雅虎十四条, 优化原则, 前端优化
网页重构 | 评论:0
| Trackbacks:0
| 阅读:63
Submitted by yudesign on 2010, July 29, 6:23 PM
什么是ImageLazyLoad技术
在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互。尤其是对于高清晰的图片,占的几M的空间。ImageLazyLoad技 术就是,当前可见界面的图片是加载进来的,而不可见页面(通过滚动条下拉可见)中的图片是不加载的,这样势必会引起速度上质的提升。
» 阅读全文
Tags: jquery, 图片延时, 加载, imagelazyload, plugin
jQuery | 评论:0
| Trackbacks:0
| 阅读:125
Submitted by yudesign on 2010, July 28, 1:02 PM
1.什么是正则表达式
简单的说,正则表达式是一种可以用于文字模式匹配和替换的强有力的工具。是由一系列普通字符和特殊字符组成的能明确描述文本字符串的文字匹配模式。
正则表达式并非一门专用语言,但也可以看作是一种语言,它可以让用户通过使用一系列普通字符和特殊字符构建能明确描述文本字符串的匹配模式。除了简单描述 这些模式之外,正则表达式解释引擎通常可用于遍历匹配,并使用模式作为分隔符来将字符串解析为子字符串,或以智能方式替换文本或重新设置文本格式。正则表 达式为解决与文本处理有关的许多常见任务提供了有效而简捷的方式。
» 阅读全文
Tags: javascript, 正则表达式
Javascript | 评论:0
| Trackbacks:0
| 阅读:99
Submitted by yudesign on 2010, July 20, 1:36 PM
史上最酷的招聘已经结束,效果还是不错的。我们发现了很多颇有潜力的人才。他们的一些聘题的解法也开拓了我们的视野,让我们收获良多。感谢所有参与 招聘及所有关注淘宝 UED博客的朋友。
以下是该次招聘前端开发工程师的聘题解答:
小贤是一条可爱的小狗(Dog),它的叫声很好听(wow),每次看到主人的时候就会乖乖叫一声(yelp)。
从这段描述可以得到以下对象:
function Dog() {
this.wow = function() {
alert(‘Wow’);
}
this.yelp = function() {
this.wow();
}
}
小芒和小贤一样,原来也是一条可爱的小狗,可是突然有一天疯了(MadDog),一看到人就会每隔半秒叫一声(wow)地不停叫唤(yelp)。
请根据描述,按示例的形式用代码来实现(提示关键字: 继承,原型,setInterval)。
» 阅读全文
Tags: 前端技术, 淘宝前端, web面试题, 图片水平, 垂直居中
网页重构 | 评论:0
| Trackbacks:0
| 阅读:177
Submitted by yudesign on 2010, June 8, 11:50 PM
Tags: 网页设计, 电子商务, 网商网
设计作品 | 评论:0
| Trackbacks:0
| 阅读:262
Submitted by yudesign on 2010, May 29, 4:07 PM
人一旦习惯了某些东西就很难去改,以及各种各样的原因,新的浏览器越来越多,而老的总淘汰不了。增长总是快于消亡导致了浏览器兼容是成了谈不完的话 题。说到浏览器兼容,CSS HACK自然而然地被我们想起。今天,我们通常都有一个团队或者将有一个团队的人在一个公司里面做相同的事,需要我们有统一的规范来进行Coding,以 方便维护。而解决兼容的方法就是(必须是,因为这才最容易有问题的)其中一个最重要的、要解决的规范之一。

在解决兼容方法上,想定出一个统一的规范,个人认为应该以下面3点为基本原则:
» 阅读全文
Tags: css, css hack, 向后兼容, 前端重构
网页重构 | 评论:0
| Trackbacks:0
| 阅读:276
Submitted by yudesign on 2010, May 29, 3:33 PM
Tags: 网页设计, 纹身, web设计, 外贸, 购物
设计作品 | 评论:0
| Trackbacks:0
| 阅读:302
Submitted by yudesign on 2010, May 29, 3:19 PM

广州拓普斯电子科技有限公司成立于1999前初,,是一家集开发、生产、销售一体的企业,一直以来我们凭着其积极进取的精神和广大客户的鼎力支持,并辅以精心严谨的管理,不断发展壮大.现已成为国内知名汽车用品经销商,汽车精品店值得信赖的合作伙伴,同时我们凭借着高性价比的产品及完善的售前,售中,售后服务,我们公司在海外市场也赢得了极高的市场信誉,产品已近远销全球三十多个国家及地区。
到目前,拓普斯在高水平和严格的技术管理下,其产品质量获得了CE,E-MARK,和ISO90001的认证,在未来我们会更专注每一个产品的工序和细节,运用我们高技术的设备,全力为客户出发,生产高品质的和汽车相关的产品。
» 阅读全文
Tags: 网页设计, led
设计作品 | 评论:0
| Trackbacks:0
| 阅读:268
Submitted by yudesign on 2010, April 19, 1:20 AM
现在将腾讯WEB前端开发笔试题分享给大家:
1 请实现,鼠标点击页面中的任意标签,alert该标签的名称.(注意兼容性)
2 请指出一下代码的性能问题,并经行优化。
var info="腾讯拍拍网(www.paipai.com)是腾讯旗下知名电子商务网站。";
info +="拍拍网于2005年9月12日上线发布,";
info +="2006年3月13日宣布正式运营,";
info +="是目前国内第二大电子商务平台。";
info=info.split(",");
for(var i=0; i<info.length; i++)
{
alert(info[i]);
}
3 请给出异步加载js方案,不少于两种。
4 请写出jQuery绑定事件的方法,不少于两种。
5 请设计一套方案,用于确保页面中JS加载完全。
6 请优化某网页的加载速度。
7 对string对象经行扩展,使其具有删除前后空格的方法。
8 完成一个正则表达式,验证用户输入是否身份证号码。
» 阅读全文
Tags: 腾讯, web前端开发, javascript
生活日志 | 评论:0
| Trackbacks:0
| 阅读:892
Submitted by yudesign on 2010, April 19, 12:35 AM
制作一个类似QQ空间的相册图片展示功能,使用jQuery可以非常简单的实现,可自定义图片的标题和描述,并定义图片展示的动画效果,使用非常简 单。
功能说明:
1、可以自定义图片的标题和描述。
2、当图片大于边框时,自动截取图片,如果图片小于边框,则图片自动垂直居中。
3、当点击向上向下箭头,小排列的小图片自动向上向下滚动。
» 阅读全文
Tags: jquery, 图片幻灯片, web前端
jQuery | 评论:0
| Trackbacks:0
| 阅读:437