优化JS技巧–转摘

分类：Javascript,前端优化 ｜ 发表于2011/07/06 ｜ 没有评论 455 views

改进自己的JavaScript脚本性能

语言层次方面
循环
     循环是很常用的一个控制结构，大部分东西要依靠它来完成，在JavaScript中，我们可以使用for(;;),while(),for(in) 三种循环，事实上，这三种循环中for(in)的效率极差，因为他需要查询散列键，只要可以就应该尽量少用。for(;;)和while循环的性能应该说 基本（平时使用时）等价。
     而事实上，如何使用这两个循环，则有很大讲究。我得出的结论是：
     如果是循环变量递增或递减，不要单独对循环变量赋值，应该在它最后一次读取的时候使用嵌套的++或—操作符。
     如果要与数组的长度作比较，应该事先把数组的length属性放入一个局部变量中，减少查询次数。
     局部变量和全局变量
     局部变量的速度要比全局变量的访问速度更快，因为全局变量其实是全局对象的成员，而局部变量是放在函数的栈当中的。还有，局部变量屏蔽全局变量。 (全文 …)

iframe自适应高度,兼容高、宽(js版)

分类：前端优化 ｜ 发表于2011/02/17 ｜ 没有评论 1,051 views

可能有人还没接触到这个问题过，先说明一下，什么是自适应高度吧。所谓iframe自适应高度，就是，基于界面美观和交互的考虑，隐藏了iframe的border和scrollbar，让人看不出它是个iframe。如果iframe始终调用同一个固定高度的页面，我们直接写死iframe高度就可以了。而如果iframe要切换页面，或者被包含页面要做DOM动态操作，这时候，就需要程序去同步iframe高度和被包含页的实际高度了。
(全文 …)

10条影响CSS渲染速度的写法与建议

分类：前端优化 ｜ 发表于2011/02/15 ｜ 3条评论 1,128 views

这篇文章主要写的提高网页在客户端浏览器的渲染速度的CSS部分，暂时总结了10条。

1、*{} #zishu *{} 尽量避开

由于不同浏览器对HTML标签的解释有差异，所以最终的网页效果在不同的浏览器中可能是不一样的，为了消除这方面的风险，设计者通常会在CSS的一个始就把所有标签的默认属性全部去除，以达到所有签标属性值都统一的效果。所以就有了*通配符。*会遍历所有的标签；

*{margin:0; padding:0}
如果这样写，页面中所有的标签的margin全是0；padding也是0；
(全文 …)

解密CSS Sprites：技巧、工具和教程

分类：前端优化 ｜ 发表于2011/02/15 ｜ 没有评论 1,066 views

简介
CSS Sprites并没有一个确定的中文翻译，通常被意译为“CSS图像拼合”或“CSS贴图定位”。CSS Sprites并不是一门新技术，目前它已经在网页开发中发展得较为成熟。本文系统的介绍了CSS Sprites的概念、用途和用法，相信本文会解决你在使用CSS Sprites中遇到的大部分问题。

本文系统的介绍了CSS Sprites的概念、用途和用法，相信本文会解决你在使用CSS Sprites中遇到的大部分问题。

什么是CSS Sprites？

“Sprite”(精灵)这个词在计算机图形学中有它独特的定义，由于游戏、视频等画质越来越高，必须有一种技术可以智能的处理材质和贴图，并且要同时保 持画面流畅。“Sprite”就是这样一种技术，它将许多图片组合到一个网格上，然后通过程序将每个网格的内容定位到画面上。 (全文 …)

CSS写法性能

分类：前端优化 ｜ 发表于2011/02/15 ｜ 没有评论 636 views

首先说明一点，CSS对网页的最后渲染出来的速度影响非常的小，全是毫秒级别的，一个百K左右的网页，加上CSS最多也就是多了100个毫秒而已。很多优化都是在这100个毫秒里产生的，正常的写法是100个毫秒，但不合适的写法，会增大这100个毫秒，严重时可能会让浏览器死掉。今天放出来的这些数据是和《10条影响CSS渲染速度的写法与建议》里边有关的几条：

* 图表中的数字单位是毫秒；

3、一个页面上少用绝对定位

这样的写法，如果在ubuntu下测试，我百分百保证，一定会让浏览器死了！
(全文 …)

DNF官网整容手册-腾讯页面优化范例

分类：前端优化 ｜ 发表于2010/12/23 ｜ 没有评论 643 views

第1章 引言

1.1 改版目的

为了配合DNF第五章新版本上线，并改善DNF官网的用户体验和功能，DNF开始了新的官网改版行动。

本次改版主要优化了页面结构布局，增加一些新功能和新板块，提高页面加载速度，改善用户的细节操作体验，为用户带来新的视觉感受。

(全文 …)

网站SEO优化规范与指南_(新浪版)V2

分类：前端优化 ｜ 发表于2010/12/23 ｜ 没有评论 741 views

 

（说明：综合考虑对SEO效果的影响大小及实施的难易程度，对以下规范按优先级排序）

一、   标题规范

  1. 为所有页加上标题。标题简短精练、高度概括，标题长度一般不超过30个汉字；
  2. 标题要含有关键字，关键字个数不超过3个；
  3. 频道首页标题格式：<title>{$频道名}_新浪网</title>；

例如：<title>财经频道_新浪网</title>

  1. 栏目首页标题格式：</title>{$栏目名}首页_{$频道名}_新浪网</title>；

例如：</title>股票首页_财经频道_新浪网</title>；

  1. 新闻最终页标题格式：</title>{$网页标题}_{$频道名}_新浪网</title>；

例如：<title>沈殿霞生前托孤好友_影音娱乐_新浪网</title>；

<title>印尼遭泥石流袭击12人死亡9人失踪_新闻中心_新浪网</title>；

  1. 非新闻最终页标题格式：</title>核心关键字_{$栏目名}_{$频道名}_新浪网</title>；

例如：<title>姚明_NBA球员_体育_新浪网</title>。

  1. 专题标题格式：</title>专题名_{$频道名}_新浪网</title>；

例如：<title>四川汶川强烈地震_新闻中心_新浪网</title>。 (全文 …)

图片格式与设计那点事儿(转载TaobaoUED大侠)

分类：前端优化 ｜ 发表于2010/12/23 ｜ 没有评论 669 views

原文地址：http://ued.taobao.com/blog/2010/12/10/jpg_png/

第一次写技术博客，有不尽如人意的地方，还请见谅和指正。

为什么想整理这方面的类容，我觉得就像油画家要了解他的颜料和画布、雕塑家要了解他的石材一样，作为网页设计师也应该对图片格式的特性有一定了解，这样才能更好的表达你的创意和想法。

除此之外，我们在平时工作中也会遇到许多与图片格式相关的问题。比如设计师会奇怪为什么有些页面的产出物总是没法达到设计稿那样的品质和效果，什么样的设计才更适合Web页面；页面重构师和前端工程师则想知道在切图的时候应采用什么图片格式、如何进行参数设置才能达到品质和性能的最优化。

有时候我们可能会因为一张格式不正确的图片而导致设计品质的下降以及页面性能的降低。了解图片格式的特性就是为解答这些困惑从而让我们设计的产品更好、更快。 (全文 …)