Yahoo!网站性能最佳体验的34条黄金守则——JavaScript和CSS
杰拉斯 | 时间:2013-02-24, Sun | 21,684 views前端开发
在第一部分和第二部分中我们分别介绍了改善网站性能中页面内容和服务器的几条守则,除此之外,JavaScript和CSS也是我们页面中经常用到的内容,对它们的优化也提高网站性能的重要方面:
在第一部分和第二部分中我们分别介绍了改善网站性能中页面内容和服务器的几条守则,除此之外,JavaScript和CSS也是我们页面中经常用到的内容,对它们的优化也提高网站性能的重要方面:
在本系列的第一节中,讲了提高网站性能中网站“内容”有关的10条原则。除了在网站在内容上的改进外,在网站服务器端上也有需要注意和改进的地方:
Yahoo!的Exceptional Performance团队为改善Web性能带来最佳实践。他们为此进行了一系列的实验、开发了各种工具、写了大量的文章和博客并在各种会议上参与探讨。最佳实践的核心就是旨在提高网站性能。
Excetional Performance团队总结出了一系列可以提高网站速度的方法。可以分为7大类34条。包括内容、服务器、cookie、CSS、JavaScript、图片、移动应用等七部分。
其中内容部分一共十条建议:
昨天下午凌一尧给我发来一张照片,是一件婚纱,她问好不好看,我说还行。
她说“初五举办婚礼,和我们以前想象得一样,有鲜花拱门,有红地毯,有白婚纱黑礼服,就是没有你。”
我说“要不要我去凑个份子?”
她半天之后才回复说:“不用了。
JavaScript 数组去重经常出现在前端招聘的笔试题里,比如:
有数组 var arr = ['a', 'b', 'c', '1', 0, 'c', 1, '', 1, 0],请用 JavaScript 实现去重函数 unqiue,使得 unique(arr) 返回 ['a', 'b', 'c', '1', 0, 1, '']
作为笔试题,考点有二:
1. 正确。别小看这个考点,考虑到 JavaScript 经常要在浏览器上运行,在千姿百态的各种浏览器环境下要保障一个函数的正确性可不是一件简单的事,不信你继续读完这篇博客。
2. 性能。虽然大部分情况下 JavaScript 语言本身(狭义范畴,不包含 DOM 等延拓)不会导致性能问题,但很不幸这是一道考题,因此面试官们还是会把性能作为一个考点。
在继续往下阅读之前,建议先实现一个自己认为最好的版本。
对于数组去重,只要写过程序的,立刻就能得到第一个解法:
function unique(arr) { var ret = [] for(var i = 0; i < arr.length; i++) { var item = arr[i] if(ret.indexOf(item) === -1) { ret.push(item) } } return ret }
直觉往往很靠谱,在现代浏览器下,上面这个函数很正确,性能也不错。但前端最大的悲哀也是挑战之处在于,要支持各种运行环境。