可扩展 HTML (XHTML) 具有许多优势，但是其缺点也很明显。XHTML 可能使您的页面更加符合标准，但是它大量使用标记（强制性的 <start>和 <end>标记），这意味着浏览器要下载更多代码。所以，事情都有两面性，尝试在您的网页中使用较少的 XHTML 代码，以减小页面大小。如果您确实不得不使用 XHTML，试着尽可能对它进行优化。

二、不要使布局超载

坚持简约原则：少即是多。页面中充斥着各种类型的图像、视频、广告等，这大大违背实用性原则。

三、不要使用图像来表示文本

使用图像表示文本的最常见示例就是在导航栏中。美观的按钮更加具有吸引力，但是它们的加载速度很慢。此外，图像仍然不能由搜索引擎直接索引，因此，使用图像进行导航不利于搜索引擎优化（search engine optimization，SEO）。当无需图像就可以通过大量 CSS 技巧创建漂亮的按钮时，绝不使用图像来表示文本。

四、检查cookie使用情况

设置一个较早的 expire 日期或者根本不设置 expire 日期，会缩短响应时间。要在 PHP 语言中设置 cookie 的 expire 日期，使用以下代码：

<?php

$expire = 2592000 + time()

// Add 30 day’s to the current time

setcookie(userid, “123rrw3”, $expire)

?>

这段代码设置 cookie userid，并将 expire 日期设置为自当前日期之后 30 天。

五、不要包含不必要的 JavaScript 代码，尽可能将其外部化

应该明智地使用 JavaScript（仅在真正必要时才使用）并优化脚本的大小和速度。缩短 JavaScript 下载时间的另一种方式是使用外部文件，而不是包含脚本内联。这种方法也适用于 CSS，因为浏览器会缓存外部化的文本，而（在 HTML 页面自身中）以内联方式编码的 CSS 或 JavaScript 每次都会随 HTML 一起加载。

六、尽可能避免使用表格

表格被用作网页的主要构建块，但是作为页面布局元素，使用表格现在被认为是糟糕的做法。有时候，您必须使用表格（并且它们被认为是显示表格数据的出色实践）。如果是这样，明确地指定表格单元格、行和列的宽度和高度，否则，浏览器必须执行许多操作来计算如何显示它们，这会降低页面加载速度。

七、删除任何不必要的元素

可能这是所有技巧中最显而易见的一个，但是它也是最容易忘记的一个技巧。如果您真正需要在网页上放置许多内容，考虑将网页分为 2 个、3 个或更多的独立页面。

八、一些优化网页的技巧

可以使用许多方法来优化您的网页，包括压缩 JavaScript 文件，使用超文本传输协议（Hypertext Transfer Protocol，HTTP）压缩，以及设置图像大小。

九、压缩和缩小 JavaScript 文件

您可以使用 GNU zip (gzip) 来完成此任务，因为许多浏览器都支持这种压缩算法。另一种替代方法是缩小文件。这种方法删除代码中所有不必要的字符，比如制表符（tab）、新行和空格。它删除代码中的注释和空白，进一步缩小文件大小。外部和内部样式表都可以缩小。两种最流行的缩小工具是 JSMin 和 YUI Compressor。

十、使用 HTTP 压缩，并始终使用小写的 div 和类名

可以使用 HTTP 压缩来减少服务器与浏览器之间的通信量。可以在 Apache 中配置 HTTP 压缩（.htaccess 文件），或者可以将其包含到页面中（对于 PHP，可以使用一个 HTTP_ACCEPT_ENCODING 选项）。但是请注意：不是所有浏览器都支持压缩。即使是支持压缩的浏览器，压缩和解压缩都会加重处理器的负载。要在 Apache 中启用地毯式（blanket）压缩（即压缩所有文本和 HTML），使用以下命令：

AddOutputFilterByType DEFLATE text/html text/plain text/xml

另外，考虑一下您想要压缩的内容。图像、音乐和视频在创建时已经进行了压缩，因此您可以将压缩对象限制为 HTML、CSS 和 JavaScript 文件。另一种减少压缩工作的技巧是使用小写形式的 <div>元素和类名。由于大小写敏感性，并且使用的是无损压缩，<header>与 <Header>不同，它们被压缩为两个不同的标记。

十一、设置图像大小

与表格单元格、行和列一样，当您未明确设置图像大小时，浏览器需要执行计算来显示图像，这会降低处理速度。

十二、将 CSS 图像映射用于装饰功能

使用图像映射代替多个图像，这是另一种缩短加载时间的方式，因为同时下载图像的各个独立部分能够加快整个页面的下载进度。或者，您可以使用某种名为 CSS sprites 的工具。CSS sprites 可帮助减少 HTTP 请求的数量。一个图像可以包含装饰或布置页面所需的所有图像元素。您使用 CSS 来选择（通过调用某些位置和维度）用于特定元素的映射。

十三、尽可能延迟脚本加载

一种提升页面下载速度的潜在方式是将脚本放在页面的底部，使页面加载更迅速。通常，浏览器只能（从同一个域）下载不超过两个并行对象，如果一个对象是一段 JavaScript 代码，那么在该脚本下载完之前，其他页面组件的下载将会暂停。如果将 JavaScript 代码放在页面底部，（在大多数情况下）它将在最后下载，这时所有其他组件都已下载完。

十四、按需加载 JavaScript 文件

要按需加载 JavaScript，使用 import() 函数。

import() 函数：

function $import(src){

var scriptElem = document.createElement('script')

scriptElem.setAttribute('src',src)

scriptElem.setAttribute('type','text/javascript')

document.getElementsByTagName('head')[0].appendChild(scriptElem)

}

// import with a random query parameter to avoid caching

function $importNoCache(src){

var ms = new Date().getTime().toString()

var seed = "?" + ms

$import(src + seed)

}

十五、验证函数加载

也可以验证一个函数是否被加载，如果没有，加载 JavaScript 文件。

验证函数是否被加载：

if (myfunction){

// The function has been loaded

}

else{ // Function has not been loaded yet, so load the javascript.

$import('http://www.yourfastsite.com/myfile.js')

}

注意：可以使用 defer 属性，但不是所有浏览器（包括 Firefox）都支持它。

十六、优化 CSS 文件

如果经过适当优化和维护，CSS 文件不一定很大。例如，具有很多独立类的 CSS 文件会影响下载速度。与 JavaScript 文件一样，您需要优化 CSS 文件，使其包含所需的所有内容，同时保持合理的大小。另外，使用外部文件代替内联定义来适应浏览器的缓存机制。

十七、使用内容分布网络

内容分布网络（Content-distribution network，CDN）是另一种缩短下载时间的好方法。当您将静态图像放在 Internet 上的许多服务器上时，用户能够从离他们最近的服务器下载这些图像。此外，大多数 CDN 都在快速服务器上运行，因此无论服务器的加载速度如何，其响应速度都比小型的超载服务器快。

十八、对资产使用多个域来增加连接

CDN 的另一个优势是它们是独立的域。因为您的浏览器将并发连接的数量限制到一个单一的域，因此无论何时加载一个页面，都很容易占满所有线程。因此，到其他资产的连接被延迟了。然而，您的浏览器能够打开新线程或到其他域的连接，这样，从另一个域加载的任何资产都可以与其他所有资产同时加载。

十九、在合适的时候使用 Google Gears

使用 Google Gears（参见 参考资料）是避免用户反复下载同一内容的另一种好方法。Gears 允许用户离线访问 Web 应用程序，但是也允许将页面元素持久化到用户的计算机上。因此，频繁加载但未进行更新的内容可以存储在 Gears 数据库中，该数据库是一个 SQLite3 关系数据库管理系统。对同一内容的所有 next 请求都可以从数据库（而不是服务器）直接加载。

二十、使用 PNG 格式的图像

Graphic Interchange Format (GIF) 和 Joint Photographic Experts Group (JPEG) 图像格式都已过时了：Portable Network Graphic (PNG) 是未来流行的格式。当然，您可以说 GIF 和 JPEG 已经消亡，或者 PNG 没有任何缺陷，但是所有事物都有各自的优缺点，PNG 以最佳的文件大小提供了出色的质量。因此，如果进行选择的话，应该尽可能使用 PNG 图像。

二十一、保持 Ajax 调用简短、准确

当统称为 Asynchronous JavaScript + XML (Ajax) 的技术在两年前出现时，这些技术为处理页面请求和响应提供了一种革命性方法。然而，拨号用户可能从来没机会体验其真正的优势，因为在许多情形下，Ajax 需要在浏览器与服务器之间大量通信。因此，如果您能够保持 Ajax 调用简短和准确，可以避免用户花费无止尽的时间来等待元素刷新或响应。

二十二、进行一次较大的 Ajax 调用并在本地处理客户机数据

如果不能进行简短的 Ajax 调用，或者如果这些调用不能提供期望的结果，可以考虑一种替代方法：进行一次大的 Ajax 调用来获取所需的一切内容，然后让客户机在本地处理数据。通过这种方式，客户机只需等待一次（获取传入的数据），但是在此之后（当浏览器与服务器之间没有必要通信时），处理速度将更快。当然，还有大量 Ajax 优化技术，本教程无法一一列出。

二十三、在沙箱中测试代码

还有一个经常被遗忘的常用技巧。尽管清醒的 Web 开发人员通常会在启动应用程序之前对其进行测试，但是有时候测试会使他们不那么重视维护任务，或者新功能添加得太快，并且未经过充分考虑或测试。结果，余下的脚本减缓了应用程序的速度。如果您添加一项新功能，可以首先在沙箱里（完全脱离了应用程序的其余部分）进行测试，查看它作为单个函数的行为。通过这种方式，您可以反复检查，并分析性能和响应时间，无需考虑 Web 应用程序的其余部分。然后，当新功能的行为符合预期时，可以将其引入到应用程序的其余部分中，运行其他测试，保证功能本身的行为符合预期。

二十四、分析站点代码

在许多场景中，自我反省是一个不错的建议。幸运的是，在开发过程中，我们可以使用工具来帮助反省，并尽可能客观地进行实践。像 JSLint（参见 参考资源）这样的工具的价值是无法衡量的，尽管其站点宣称它 “可能令您备受挫折”，因为它向您提供了所有的潜在代码缺陷，这些缺陷不但使调试更加困难，而且可能导致更长的响应时间。

二十五、检查孤立的文件和丢失的图像

检查孤立的文件和丢失的图像是一种明智之举。大部分 Web 开发人员都会检查错误的文件引用，但是这里仍然需要说明一下。丢失的文件容易引起各种问题，因为它们会导致 “The image/page cannot be displayed” 之类的错误消息。但是在网页速度优化方面，它们具有更大的缺陷：当浏览器寻找丢失的或孤立的文件时，它会消耗资源，这不可避免地会导致页面处理速度变慢。因此，请检查孤立或丢失的文件，包括拼写错误的文件名。

在绝大过程中，想确定一个元素在网站当中的固定位置，绝对定位是实现这个方式的解决办法。在网页当中，绝对定位可精确的控制元素在网页当中的位置，我们可使用顶部、底部、左侧和右侧，附上一个像素值来控制元素所在的位置。

position:absolutetop:50pxright:50px

上面的CSS设置一个元素的位置从浏览器的顶部和右边保持50px。你也可以在div内使用绝对定位。

2、覆盖所有样式

写CSS的时候都应该知道，当你想给一个元素添加一个新的CSS样式，但这个样式之前已经被定义过了。此时我们可以采用！important来定义。

例如，如果我想在我的网站的特定部分的H3标题是红色而不是黄色，可以使用下面的CSS：

.section h3 {color:red !important}

3、居中

居中分很多情况，一般会分成文本居中和DIV的内容居中。

文本居中

文本居中使用text-align：center。如果想让文本在左右两侧，可以使用左侧或右侧。

DIV内容

DIV内容居中跟文本居中不一样。CSS可以这样定义：

#div1 { display: blockmargin: autowidth: anything under 100% }

把宽度设置为“100％以下”的原因是因为如果它是100％宽度，那么如果是全宽度，并且不需要居中。最好有一个固定的宽度，如60％或550像素等。

4、垂直对齐（对于一行文本）

要使菜单的高度和文本的行高一致，可以这么设置：

.nav li{line-height:50pxheight:50px}

5、悬停效果

这适用于按钮，文本链接，网站的部分，图标等等。如果你想做一个悬停效果，可以试试：

.entry h2{font-size:36pxcolor:#000font-weight:800} .entry h2:hover{color:#ffeb3b}

这个功能可以让你的h2标签的颜色从黑色变成黄色。

6、悬停效果过渡

对于悬停效果，如使用菜单或网站上的图像，我们肯定不希望颜色快速贴近结果，所以我们可以通过使用时间变化来达到过渡的效果。

.entry h2:hover{color:#ffeb3btransition: all 0.5s ease}

这就使得样式上的改变，可以是从黑色变黄色的过渡时间是0.5秒，而不是立即变成黄色。这使得悬停效果更加和谐而不会显得太突兀。

7、a标签的状态

我们在遇到a标签的时候，一定要给a标签做样式定义，否则特别容易造成用户在使用上的困惑。通过样式可以让用户知道这个链接是否被点击过，更利于用户体验。

a:link {color: blue} a:visited {color: red}

8、轻松调整图像大小以适应

说到这个样式，我之前不知道可以通过以下方式达到图片的自适应效果。作为一个新手，我相信这个效果肯定有很多人都想做，当然，我提供的方法也只是其中的一种：

img {max-width:100%height:auto}

这个样式意味着最大的图像可能是100％，并根据图像宽度自动计算高度。在某些情况下，您可能还必须指定宽度为100％。

9、父级元素和子元素

如果ni不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器：

h1 >strong {color:red}

特殊情况下你可能会想定义第N个子元素的样式，这样就可以用到下面这个样式：li:nth-child(n)

具体的使用方法可以去w3school上看。

10、将CSS应用于多个类或选择器

如果你想要在所有图片，博客部分和侧边栏上添加相同的边框。你不必写出相同的CSS样式重复3次。只需列出这些项目，用逗号分隔：

.blog,img,.sidebar {border: 1px solid #000}

1.内联样式表：在HTML文档头部 <head>区域使用<style>元素 来包含CSS。

2.内联引用： 在HTML元素中使用"style" 属性，直接对指定元素应用样式。

3.外部样式表：将样式单独写在CSS文件内，通过引入外部 CSS 文件来应用样式。这种方法常应用于大型开发中。