web app 的技术参考 -- 来自 【百度移动建站指南】

优化页面性能

---

　　考虑到移动设备和移动互联网的特点，在进行移动网站的页面开发设计时，一个总的原则是考虑用户访问的效率，降低页面加载时间。

 下面的内容来自百度，然后我自己做了笔记。另外可参考这个系列的文章。

减少访问请求数

• 从设计实现层面简化页面，不要放太多的图片、复杂的表达、动画、视频等等。

这个好理解，二进制数据太占流量。

 

• 资源合并及压缩：比如将背景图片、导航图片等等作为一张图片，这样只需一次请求，而不是多次。

资源合并，只用一次请求，解决问题。 压缩，是将文件大小降低，比如css，js去空白。

至于压缩，涉及到的内容较为复杂一些：参考《用 HTTP 压缩加快 Web 数据的发送》《配置Tomcat,Apache的gzip压缩(HTTP压缩)来提高浏览网站速度》《【HTTP】Fiddler（一） - Fiddler简介》

 

• 静态资源（Css、Js、Image）懒加载

参考一下这篇文章《让我们再聊聊浏览器资源加载优化》

 

• 异步执行inline脚本

不懂，网上东西也不多，后续跟进。

• 避免重复的资源请求

最常见的就是，jQuery引用了好几次。

• 缩小cooike

为什么呢？宽带占得过多，还是很消耗资源？

• 设置连接方式为keep-alive

《谈HTTP的KeepAlive》

• 减少DNS查询

《优化网站设计（九）：减少DNS查找的次数》

• 移动端可见区域是有限的，采用延迟加载方式

和上面“静态资源（Css、Js、Image）懒加载”有什么区别

• 开启服务器压缩（gzip方式）

上面已经说过，有点多余了

 

 

 

优化图片处理

1. 图片走CDN
2. 少用动态gif图
3. 图片不适宜过多及过大
4. 零碎图片使用css Sprite技术一次性下载
5. 避免使用bmp图片
6. 图片压缩

1. 要钱。 2.3.5.6 可以在后台用插件控制图片上传的规格

 

 

优化HTML

1. 减少HTML标签，减少不必要的嵌套
2. 废弃table标签
3. 减少DOM深度
4. 压缩HTML，去掉注释，空格换行等信息

　　想起了阮老师的《也许，DOM 不是答案》

 

 

优化JS

1. 使用临时变量或者数组存储document.images及document.forms等集合数据
2. 慎用with语法
3. 使用AJAX缓存
4. 避免eval及Function语法
5. 避免使用inlineScript
6. 异步、底部加载js
7. 合并压缩js
8. 字符串连接使用数组的join方式

这些知识不熟！！！