修复标记来说有更好的语义正确的方式是什么？

仅仅是修复布局问题？也许对标记来说有更好的语义正确的方式。

dom元素的数量很好测试，在Firebug控制台输入：document.getElementsByTagName("*").length。

但是多少dom元素算多呢？可以参考下有良好标记的类似页面。

20.跨域分离组件

分离组件可以最大化的并行下载。考虑到DNS查考消耗，确保使用不超过2到4个域。例如你可以托管HMTL和动态内容在，将静态组件放在static1.example.org和static2.example.org上面。

21.减少iframe

iframe允许把html文档内嵌到父文档中。理解iframe的工作原理有助于更有效的使用iframe。

iframe优点：有助于缓冲第三方内容，像广告；安全沙箱；并行下载js；

iframe缺点:即使是空白标签也有消耗；阻塞页面加载；非语义；

22.不要404

HTTP请求是费时操作，所以发HTTP请求但是获取一个无用响应（例如404）是完全没必要的，也会降低用户体验而么有任何好处。

有些站点有一些有用的404内容，这有助于提高用户体验，但是仍然会浪费服务端的资源（像数据库等）。当引入的一个外部js文件是有问题的而且找不到的时候，这种情况是很糟糕的。首先这次下载会阻塞并行下载，然后浏览器可能会把404响应内容当成js代码解析，找出一些有用的东西。

23.减少Cookie大小

之所以会使用HTTP cookies是有多种理由的网站优化，例如权限，个性化。cookies的信息在浏览器和服务端通过HTTP头交换。尽量减少cookies大小有助于减少用户响应时间。

24.组件使用没有cookie的域

当浏览器请求一个静态图片时，会随请求发送cookies到服务器，但是这些cookies在服务端又没什么用。只会增加网络流量。应该确保静态组件响应没有cookie请求。可以创建一子域专门托管静态组件。

假设你的域名是，你可以把静态组件托管在static.example.org。如果你已经在顶级域名example.org上面设置了cookie而不是在上面设置，那么所有的经过static.example.org的请求都会携带cookie。这种情况你可以买一个新域名，把静态组件托管到新域名上，并保持这个域名没有cookie。

把静态文件托管在无cookie的域，还有一个好处就是，有些代理可能不会缓存那些请求中带cookie的静态组件。如果你想知道你是应该用example.org或者作为主页，考虑下cookie的影响。如果忽略www,会把cookie写到*.example.org中，所以为了性能考虑最好使用带www的子域并且把cookie写到子域。

25.减少DOM访问次数

js访问DOM元素也是耗时操作，为了更好的页面响应，你最好做到下面几点：

缓存访问到的元素引用

更新"离线"节点添加到DOM树中

避免用js操作布局

26.优化事件处理

有时页面可能会响应延时，因为DOM树中不同元素上绑定了太多的事件，然后这些事件执行的太频繁了。这就是为什么事件委托是一个好的方法。如果在一个div里面有10个button,可以给div绑定一个事件而不是给每一个button绑定事件。因为有事件冒泡，所以你可以捕获到这个事件，并且可以定位出来自于那个button。（关于事件委托可以参看这篇文章中的介绍）

如果你想开始对DOM树做点什么，你并不需要等待onload事件。通常你需要确定是你要获取的标签在DOM树中已经可用。你也没必要等待所有的图片都被下载。等到所有浏览器都支持DOMContentLoad事件，你可以用DOMContentLoad事件代替onload事件。

27.选择而不是@import

前面的最佳实践有一点就是把CSS放到顶部，这样可以渐进渲染。在IE中@import的行为和在页面底部使用的效果一样，所以最好不要使用它。

28.避免Filter

IE有个属性AlphaImageLoader filter，这个属性主要为了实现真彩色的PNG图片在IE7以下中的半透明效果。当浏览器正在下载图片时，使用这个filter会阻塞渲染让浏览器停止响应。它也会增加内存开销，会作用于每个元素而不是每个图片。

最好的方式是完全避免使用AlphaImageLoader，使用PNG8代替，PNG8对IE友好。如果必须要使用AlphaImageLoader，使用下划线hack _filter以防对使用IE7+的用户不利。

29.优化Images

设计师为网页设计好图片之后，在传到服务器上面之前还有很多事情要做。

你可以检查下GIFs，看看他们使用的调色板大小是佛对应图片颜色数。使用imagemagick工具，非常容易检查，使用命令 -verbose image.gif。当你看到一个图片使用了4种颜色，一个256颜色“槽”在调色板中，这说明还是有提升空间的。

尝试把GIFs转成PNGs，看下大小是否减少了。通常是有所减小的。开发者经常在使用PNG时犹豫，担心浏览器支持限制，但是现在这种事不会发生了。现在唯一要担心的是真彩色PNG的透明度通道，GIF不是真彩色，不支持透明度变化。因此GIF可以做的，PNG也可以做（动画除外）。在imagemagick工具中使用下面命令可以安全的使用PNG：convert image.gif image.png在pngcrush工具(PNG优化工具)中处理所有的PNG。在jpegtran工具中处理所有的JPEG。这个工具无损JPEG操作，可以用来优化移除图片中的注解以及无用信息（例如EXIF信息）。

30.优化CSS Sprites

在sprite中水平排列图片比垂直排列图片更剩空间。

在sprite中组合同类色可以降低颜色数量。理想情况下小于256色，这样更适应PNG8。保持移动友好性，sprite中的图片之间不要留大的空白。这样虽然对文件大小没多少影响，但是用户代理可以更少的内存把图片解压成像素地图。100X100的图片有一万个像素，1000X1000就有一百万个像素。

31.不要在HTML中使用过大的Images

不要使用超过你需要的大图片，因为你可以在HTML中设置宽高。如果你需要

网站优化，那么你的图片（mycat.jpg）应该是100X100，而不是500X500。

32.favicon.ico最小化以及可缓存

favicon.ico存在服务端根目录。即使你不关注它，但是浏览器仍然需要请求它，因此最好不要用404响应。因为在同一台服务器上面，浏览器每次请求它时也会带着cookie。这个图片也会干扰下载序列，例如在IE浏览器中当你请求额外的组件，favicon会在这些组件之前下载。所以为了减少favicon的缺点，需要做到下面几点：

使用小的favicon，最好1K一下。设置一个你认为合适的Expires header。你可以设置Expires header为几个月。为了做明智的决定，你可以检查favicon.icon的上次修改时间。

33.内容保持在25K以下

这个限制是基于这样一个事实，iphone不会缓存超过25K的内容。注意这是未压缩大小。这也说明了压缩的重要性，但是仅仅gzip压缩是不够的。

34.把内容打包成一个复合文档

把内容打包成一个复合文档相当于带附件的邮件，可以让你通过一个HTTP请求获取多个内容。使用这项技术之前，先确认下用户代理是否支持这种技术。

35.避免空的Image src

空src属性的Image经常会出现。主要有两种形式：

HTML形式：

js形式：var img = new Image(); img.src = "";

这两种形式都有同样的影响：浏览器给服务端发送另外的请求。

IE对当前页所在目录发请求。Safari和Chrome对当前页面本身发请求。Firefox3和之前的版本行为和Safari和Chrome一样，但是3.5以上版本不会发请求。Opera碰到这种情况也不会发请求。

原文