2008 2008年 5月 15

最佳实践:使用JavaScript

包括JavaScript在HTML文档的底部

如果没有文件撰写(或任何页面内容使用的JavaScript动态生成)插入页的内容的一部分,在你的脚本,将脚本包括BODY标记年底前,语句在页面底部。
HTTP/1.1规范建议浏览器不超过两部分组成,每个主机的并行下载。 如果您的图片,从多个主机服务,你可以得到两个以上的下载发生在平行。 然而,当一个脚本下载,浏览器不会启动任何其他下载,甚至在不同的主机名。
也有动态创建脚本节点和远程脚本加载后使用AJAX页面加载的方式。

外化你JavaScript的

使用外部JavaScript文件会导致更快的页面加载JavaScript文件,因为是由浏览器的缓存。 内嵌JavaScript的HTML文档中的“获得下载HTML文件的要求。 这实际上可能降低的HTTP请求的数量,但后来增加了HTML文档的大小。 外部JavaScript的浏览器缓存的HTML文档的大小没有增加HTTP请求的数量减少。
请注意,如果您的网站上的用户,每个会话有多个页面访问量和您的网页重新使用相同的脚本和样式很多,有更大的缓存外部文件的潜在利益。

包JavaScript文件

不同的CSS,JavaScript的情况下,这些文件可能嘎吱嘎吱使用一些标准的算法,将减少文件的大小,比简单地去除空格或制表符。 例如JavaScript的包装可以在这里找到http://dean.edwards.name/packer/

摆脱任何重复的脚本

这是极不寻常,整个脚本可能会重复,但美国十大网站的评论表明,其中两个含有重复的脚本。 重复的脚本,但明显降低,造成不必要的HTTP请求和浪费JavaScript执行性能。
此外,在许多情况下,尽管脚本的名称是不同的,是由于团队的规模和数量的脚本在同一页面重复的脚本的可能性。

最小化在可能的情况下访问DOM元素

使用JavaScript访问DOM元素是缓慢的,因此,为了有更敏感的页面,你应该:
•缓存参考访问元素
•更新节点“离线”,然后将它们添加到树
•避免固定用JavaScript布局

从内容和表现的分离行为

正如我们单独介绍(CSS / XSLT),内容(XHTML / XML的),我们也应该分开行为(JavaScript)的。 这就是所谓的不显眼的Javascript。 正如我们链接到外部CSS文件,我们应该链接到外部JavaScript文件。

行为,而不是硬编码的内容(如onmouseover的onclick等)的行为,应被动态添加元素,类和独特的元素(IDS)使用DOM。 的基础性文件的内容,应包含唯一有效的XHTML / XML和没有JavaScript。
添加行为的Javascript应该增加的内容。 内容应保持有用和可用,没有JavaScript(或不完整的JavaScript支持)。


2008 2008年 5月 7

最佳实践:页重量

我已经保存了这篇文章的年龄,所以很抱歉! 我不记得源......但我们必须知道观众对他们来说,我们开发的网站,它似乎是有益的......所以我在这里是

页的重量可以用来确定一个给定页面的下载时间,各种各样的互联网连接速度。 例如,下表显示了在一些流行的连接速度三个不同的网页的下载时间。

页面重量下载

连接速度

20 KB

40 KB

100 KB

14.4 kbps的

12秒

25秒

62秒

28.8 Kbps的

6秒

12秒

31秒

33.3 Kbps的

5秒

10秒

26秒

56 Kbps的(V.90)

2秒

5秒

13秒

64 Kbps的(ISDN)。

2秒

4秒

12秒

128 Kbps的(DSL /缆线)

1秒

2秒

6秒

256 Kbps的(DSL /缆线)

<1秒

1秒

3秒

减少页重量的好处?

减少页面重效益的网站所有者和消费者产生积极的影响。 潜在的好处包括:

  1. 网页加载更快。 页重量减少最明显的影响,是您网站的网页加载速度更快的游客,无论其连接速度。
  2. 页面加载时间降低,创造更舒适的游客。 游客不太可能变得沮丧和其他地方去,如果您的网页加载迅速。 另一方面,缓慢加载页面失去访问者和潜在客户的最可靠的方法之一。
  3. 更快的加载时间,将有助于提高转换。 更多的游客将不再停留在您的网站。 他们将最终使采购,签署您的简报,或书,标志着您的网站。
  4. 你的品牌认知度将得到加强。 回头客和第一时间的游客,都将是更倾向于“专业”来形容你的网站(业务)如果您的网页加载迅速。
  5. 干净,坚实的代码的网页,往往会更有效地利用天然的搜索引擎被索引。
  6. 重量优化的页面,实际上可以节省带宽费用高流量的网站上。 100,000页,每个重达150 KB将需要从你的ISP的带宽超过10万页,每个重量75 KB的两倍多。 对于收取的ISP所使用的带宽或超支,这种减少可以极大地节省带宽费用。

考虑下面的数据,在一份报告中公布的

游客放弃

网页加载时间

用户的百分比
继续等待

10秒后

84%

15秒

51%

20秒

26%

30秒

5%


2008 2008年 04月 24日

最佳实践:使用CSS

置于顶端的样式表

如果你想一个页面加载逐步的,我们希望浏览器显示的任何内容,尽快付诸表决,在文档的HEAD内页的顶部的CSS。 这使得网页出现被载入速度更快,这有利于逐步呈现的页面。 很多内容和较慢的互联网连接上的用户页面,这一点尤为重要。

这是一个记录的事实,以提高整体用户体验,重要的是提供进度指标和视觉反馈。 为了避免重绘页面元素的情况下,如果他们的风格变化,一些浏览器,包括IE,阻止页面的渲染,直到CSS是满载。 正因为如此,用户是得到 一个空白页。

W3的HTML规范“还规定,CSS,我必须包括在HTML页面的HEAD部分。 at the bottom of the page, so it's best not to use it.还注意到@import行为,在IE浏览器使用的是相同<link>在页面的底部,所以最好不要使用它。

避免使用特定功能的浏览器

过滤器:过滤器的使用 增加内存消耗,并且每个元素的应用,而不是每幅图像,这样的问题,乘以。 此外,过滤器是IE专有的,因此不会工作打算在其他浏览器。 如果你想透明或渐变的背景,用图像1Pixel。
表现形式:CSS表达式是在CSS中有一个很好的功能,但仍然是IE浏览器的特定功能。 此外,重要的是要注意的是,这些表达式 评估时,页面呈现和调整,滚动,甚至当用户移动鼠标在页面。 不用说,这可能会影响你的页面的性能。 因此,在简单的话,应避免使用CSS表达式,除非你觉得它的优点,重量超过其利弊'

外化你的CSS

使用外部CSS会导致更快的加载 ,因为是由浏览器的JavaScript和CSS文件缓存的网页。 内嵌在HTML文档中的CSS得到下载的HTML文件要求的时间。 这实际上可能降低的HTTP请求的数量,但后来增加了HTML文档的大小。 外部CSS浏览器缓存的HTML文档的大小没有增加HTTP请求的数量减少。

请注意,如果您的网站上的用户,每个会话有多个页面访问量和您的网页重新使用相同的脚本和样式很多,有更大的缓存外部文件的潜在利益。

包你的CSS文件

包装或吱嘎你的CSS是从代码中删除不必要的字符,以减少其大小,从而提高加载时间的做法。

CSS可以我嘎吱嘎吱消除所有的意见和任何不必要的字符,如空格,换行符等


2008 2008年 03月 14日

为UI开发的最佳实践

年龄,我已经想巩固所有的最佳实践,我一直在阅读每一个现在,然后。 终于来了! 我踏踏实实地把它的笔。 我意识到这将是艰巨的任务,创建这个庞大的文件,所以我决定奉献给它一个完整的类,这样我就可以继续增加有关最佳做法的东西,当我遇到他们......

好吧! 这里的内容与像雅虎,谷歌等标准开发编写的合并将是我个人的UI开发的最佳做法

观看此空间不断褐变的最佳做法分类


2007 2007年 09月 15日

什么是文档类型? 什么是浏览器怪癖严格模式?

简单讲那些从来没有想过在今天之前DOCTYPE听到! DOCTYPE是在一个HTML文件,前<HTML>标签来声明,看起来像这样(从这个网页的源粘贴)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


为什么使用DOCTYPE?
这一切开始时,浏览器标准是由W3C推出。 早期的Web开发人员实施CSS根据浏览器的意愿,必须正确地呈现在他们和大多数网站页面CSS不太符合这些规范/标准。

因此解决这个问题是

  • 允许Web开发人员,谁知道他们的标准来选择使用哪种模式。
  • 按照老规则(怪癖),继续显示旧的网页。

DOCTYPE诞生了。

所以,根据你是否页面设计标准或不,你选择合适的DOCTYPE。


DOCTYPE与浏览器模式之间的关系
DOCTYPE声明告诉您的浏览器,它应该呈现什么模式的HTML页面,或者更确切地说,是更精确的浏览器应该如何解释CSS Quirks模式或Strict模式。

没有书面介绍了这些标准之前的旧网页的doctype。 因此,当有没有DOCTYPE,然后在你的HTML浏览器是在Quirks模式。
但如果DOCTYPE定义为下列之一,然后在浏览器据说是在严格模式。

DOCTYPE HTML PUBLIC“ - / / W3C / / DTD HTML 4.01过渡/ / EN”“http://www.w3.org/TR/html4/loose.dtd”>


NDK的家 | 表达它 表示唇腭裂 表示Penmenship 表示敬畏 表达自己