一、代码优化
1.减少reflow
浏览器要花时间、花精力去渲染，当发现页面某个部分发生了变化影响了布局，需要倒回去重新渲染，这个回退的过程叫 reflow（回流），怎样减少reflow?
比如：
1.1<img> 图片载入问题，这其实就是一个可以避免的 reflow —— 给图片设置宽度和高度就可以了。这样浏览器就知道了图片的占位面积，在载入图片前就预留好了位置。
1.2不要用tables布局的一个原因就是tables中某个元素一旦触发reflow就会导致table里所有的其它元素reflow。在适合用table的场合，可以设置table-layout为auto或fixed，这样可以让table一行一行的渲染，这种做法也是为了限制reflow的影响范围。
2.Css优化
2.1缩写css代码：font:italic small-caps bold 12px/22px "黑体"；
2.2横向排列css代码，这样将占css文件更少的空格和回车位空间；
2.3同属性提取共用css选择器。
2.4不用CSS表达式:CSS表达式非常强大，甚至可以使用CSS表达式实现 min-width 属性，隔行换色，模拟 :hover, :before, :after 等伪类，看起来能解决很多IE下的浏览器兼容性等问题，但是其带来的副作用超出我们的想象，这条CSS规则并不是只运行一次，为了确保有效性，CSS表达式会进行频繁的求值，
2.5不要用标签名限制 class 规则
这个估计被误用的更多，如div.info这样的写法，其实我们可以直接写为.info，从右到左解析的原因可以知道为什么其低效，如果直接使用class不能达到目的，一般情况下应该是class设计的有问题，CSS需要重构了
2.6不要用标签名限制 class 规则
这个应该是个常识，但很多同学都会误用，写出#test.info或者div#test这样的选择器，这个只能说是画蛇添足，id已经可以唯一而且最快的定位一个元素了。
2.7使用 link 代替 @import
@import 不属于 xhtml 标签，也不是 web 标准的一部分，它对于较早期的浏览器兼容也不高，并且对于网站的性能有某些负面的影响。所以，请避免使用 @import
3.js优化
3.1插入HTML
很多人喜欢在JavaScript中使用document.write来给页面生成内容。事实上这样的效率较低，如果需要直接插入HTML，可以找一个容器元素，比如指定一个div或者span，并设置他们的innerHTML来将自己的HTML代码插入到页面中。
3.2尽量减少DOM调用
在Web开发中，JavaScript的一个很重要的作用就是对DOM进行操作。可是对DOM的操作是非常昂贵的，因为这会导致浏览器执行回流 （reflow）操作。我们应该尽可能的减少DOM操作。
回流操作主要会发生在几种情况下：
* 改变窗体大小
* 更改字体
* 添加移除stylesheet块
* 内容改变哪怕是输入框输入文字
* CSS虚类被触发如 :hover
* 更改元素的className
* 当对DOM节点执行新增或者删除操作或内容更改时。
* 动态设置一个style样式时（比如element.style.width="10px"）。
* 当获取一个必须经过计算的尺寸值时，比如访问offsetWidth、clientHeight或者其他需要经过计算的CSS值
解决问题的关键，就是限制通过DOM操作所引发回流的次数:
1.在对当前DOM进行操作之前，尽可能多的做一些准备工作，保证N次创建，1次写入。
2.在对DOM操作之前，把要操作的元素，先从当前DOM结构中删除：
2.1. 通过removeChild()或者replaceChild()实现真正意义上的删除。
2.2. 设置该元素的display样式为“none”。
CSS部分
另外一个经常引起回流操作的情况是通过style属性对元素的外观进行修改，如element.style.backgroundColor = "blue";
每次修改元素的style属性，都肯定会触发回流操作，要解决这个问题可以：
3.1.使用更改className的方式替换style.xxx=xxx的方式。
3.2.使用style.cssText = '';一次写入样式。
3.3. 避免设置过多的行内样式
3.4. 添加的结构外元素尽量设置它们的位置为fixed或absolute
3.5. 避免使用表格来布局
3.6. 避免在CSS中使用JavaScript expressions(IE only)
1、不要使用过小的图片做背景平铺。这就是为何很多人都不用 1px 的原因，这才知晓。宽高 1px 的图片平铺出一个宽高 200px 的区域，需要 200*200=40, 000 次，占用资源。
2、无边框。推荐的写法是 border:none;，哈哈，我一直在用这个。 border:0; 只是定义边框宽度为零，但边框样式、颜色还是会被浏览器解析，占用资源。
3、慎用 * 通配符。所谓通配符，就是将 CSS 中的所有标签均初始化，不管用的不用的，过时的先进的，一视同仁，这样，大大的占用资源。要有选择的初始化标签。
4、CSS 的十六进制颜色代码缩写。习惯了缩写及小写，这才知道，原来不是推荐的写法，为的是减少解析所占用的资源。但同时会增加文件体积。孰优孰劣，有待仔细考证。
5、样式放头上，脚本放脚下。不内嵌，只外链。
6、坚决不用 CSS 表达式。
7、使用 引用样式表，而不是通过 @import 导入。
8、一般来说，PNG 比 GIF 要小，小得多。再者，GIF 中有多少颜色是被浪费的，很值得优化。
9、千万不要在 HTML 中缩放图片，一者不好看，二者占资源。
10、正文字体最好用偶数，12px、14px、16px，效果非常好。特例，15px。
11、block、ul、ol 等上下留出至少一倍行距，左侧至少两倍行距，右侧随意。
12、段落之间，至少要有一倍行距。
13、强行指定某些元素的 line-height，正文 1.6 倍于文字大小，标题 1.3 倍。
14、中文标点用全角。英文夹杂在中文中，左右空格，半角。
15、中文字体的粗体和斜体，远离较好，利民利己。
4.将获取的DOM数据缓存起来。这种方法，对获取那些会触发回流操作的属性（比如offsetWidth等）尤为重要。 5.当对HTMLCollection对象进行操作时，应该将访问的次数尽可能的降至最低，最简单的，你可以将length属性缓存在一个本地变量中，这样就能大幅度的提高循环的效率。
3.尽量选用局部变量而不是全局变量。
局部变量的访问速度要比全局变量的访问速度更快，因为全局变量其实是window对象的成员，而局部变量是放在函数的栈里的。
4.如果需要遍历数组，应该先缓存数组长度，将数组长度放入局部变量中，避免多次查询数组长度。
二、浏览器缓存
浏览器缓存可以减少HTTP请求，从而反过来提高网站的加载速度
三、异步脚本
还有一个可以提高网站页面速度的超棒选择就是异步加载脚本。如此一来网页负载就并不必依赖于这些异步脚本，网站访问者也不再需要不得不按捺下性子，等待所有的脚本加载完之后才能呈现页面。在异步模式中，脚本是在后台下载的。通常，我们会将第三方脚本作为异步脚本，因为下载这些脚本时常会让网站速度变得非常慢。
四、内容分发网络（CDN）
内容分发网络（CDN）是位于不同地理位置的服务器组成的网络。每个服务器都拥有所有网站的文件副本。要是有网站访问者请求文件和网页时，就可以直接从就近的网站服务器发送过来（也可以是从负载最小的服务器）。
五、图像和文件格式
图像对于任何网站都非常有价值，因为它能传达一些强有力的信息给网站的访问者。最常见的图像格式是GIF、JPEG、PNG等。每种格式都有其长处和局限。建议使用JPEG格式，而不是GIF和PNG图像，除非图像包含Alpha因子或者是透明的。
六、尽量减少HTTP请求
还有一种简单的优化网页速度的方法是，减少HTTP请求。当一个网站一下子收到太多的HTTP请求，它的访客就会有响应时间延迟的体验，这不仅增加了CPU使用率也增加了页面的加载时间。那么，又该如何减少HTTP请求？请见以下步骤。
1.1减少网站上的对象数量；
2.1最小化网站上的重定向数量；
3.1使用CSS Sprites技术（只要你需要的那部分图片内容）；
4.1结合JavaScripts和CSS。