页面优化的方式有哪些？

常规优化

1. javascript 外联文件引用放在 html 文档底部
2. css 外联文件引用在 html 文档头部
3. http 静态资源尽可能用多个子域名：充分利用现代浏览器的多线程并发下载能力。浏览器的多线程下载能力
4. 服务器端提供 html 文档和 http 静态资源时，尽可能开启 gzip 压缩
5. 尽可能减小 HTTP Requests 的数量
6. js/css 的 minify
7. 大量使用 CSS Sprites：这样作能够大大地减小CSS背景图片的HTTP请求次数；
8. 首屏不须要展现的较大尺寸图片，请使用 LazyLoad
9. 避免404错误：请求一个外联 js 失败时得到的404错误，不但会堵塞并行的下载，并且浏览器会尝试分析404响应的内容，来辨识它是不是有用的Javascript代码；
10. 减小 cookies 的大小：尽可能减小 cookies 的体积对减小用户得到响应的时间十分重要；
    • 去除没必要要的 cookie ；
    • 尽可能减小 cookie 的大小；
    • 留心将 cookie 设置在适当的域名下，避免影响到其余网站；
    • 设置适当的过时时间。一个较早的过时时间或者不设置过时时间会更快地删除 cookie，从而减小响应时间。
11. 避免使用 javascript 来定位布局
12. 图片压缩优化
13. 不要使用frameset，少使用iframe: 搜索引擎不友好、 即便内容为空，加载也须要时间、会阻止页面加载。禁止使用iframe引入外部资源，不包括allyes广告，不包括about:blank的空页面。

中高级优化

1. combo handler 的引入：
   经过combo handler模块，来合并相同URL下的Javascript和CSS文件，从而减小文件请求数
   咱们移动端首页就作了优化

   http://res.suning.cn/project/mvs/RES/common/script/??module/iscroll-lite/5.1.3/iscroll-lite.js,module/alertBox/2.0.0/alertBox.js,module/swipe/1.1.0/swipe.js

2. 引入script元素作延迟解析异步渲染，如在移动端应用普遍的artemplate
3. 添加Expire或Cache-Control:应用于不常常变化的组件，包括脚本、样式表、Flash组件、图片
4. 避免重定向：在重定向完毕而且HTML下载完毕以前，是没有任何东西显示给用户的
5. js代码优化
   • 代码逻辑分层
   • 避免全局变量
   • 便于多人协做开发
   • 各部分代码模块化，能够按需加载
   • 保持全局变量的清洁
   • 可进行单元测试

6. 减小 DOM Elements 的数量：针对一个展示元素，尽可能减小其包含的DOM结点

移动端页面优化

移动页面的速度跟三个因素有关，分别是：移动网络带宽速度，设备性能（CPU，GPU，浏览器），页面自己。
所以移动页面优化尤为特殊性。除了以上的处理方式，还有一些优化手段

1. 预加载
   • 显性加载
   参考天猫首页，在页面加载完毕以前，有一个缓冲的动画过程。它一方面能增长页面的趣味性，另外一方面能让后续页面体验更流畅
   • 隐性加载 ：主要是图片的懒加载
2. 按需加载
3. 能用css3实现的效果就不要用图片
4. 使用icon-font代替图片

5. 尽可能避免DataURI

   DataURI要比简单的外链资源慢6倍，生成的代码文件相对图片文件体积没有减小反而增大，并且浏览器在对这种base64解码过程当中须要消耗内存和cpu，这个在移动端坏处特别明显。

6. 点击事件优化

   在移动端请适当使用touchstart，touchend，touch等事件代替延迟比较大的click事件。
7. 使用成熟的前端手势库

8. 动画优化

   • 尽可能使用css3动画
   • 适当使用canvas动画
   • 合理使用requestAnimationFrame (android版本4.3以上)

9. 高频事件优化

   相似touchmove，scroll这类的事件可致使屡次渲染，对于这种事件能够经过如下手段进行优化：

• 使用requestAnimationFrame监听帧变化，使得在正确的时间进行渲染
• 增长响应变化的时间间隔，减小重绘次数：移动端的搜索结果页的lazyload插件就是这么干的

参考连接

1. http://www.cnblogs.com/and/p/3390676.html

2. http://blog.csdn.net/j_shocker/article/details/46912601

3. http://tgideas.qq.com/webplat/info/news_version3/804/808/811/m579/201412/293834.shtml