优化页面性能
考虑到移动设备和移动互联网的特点,在进行移动网站的页面开发设计时,一个总的原则是考虑用户访问的效率,降低页面加载时间。
下面的内容来自百度,然后我自己做了笔记。另外可参考这个系列的文章。
减少访问请求数
- 从设计实现层面简化页面,不要放太多的图片、复杂的表达、动画、视频等等。
这个好理解,二进制数据太占流量。
- 资源合并及压缩:比如将背景图片、导航图片等等作为一张图片,这样只需一次请求,而不是多次。
资源合并,只用一次请求,解决问题。 压缩,是将文件大小降低,比如css,js去空白。
至于压缩,涉及到的内容较为复杂一些:参考《用 HTTP 压缩加快 Web 数据的发送》《配置Tomcat,Apache的gzip压缩(HTTP压缩)来提高浏览网站速度》《【HTTP】Fiddler(一) - Fiddler简介》
- 静态资源(Css、Js、Image)懒加载
参考一下这篇文章《让我们再聊聊浏览器资源加载优化》
- 异步执行inline脚本
不懂,网上东西也不多,后续跟进。
- 避免重复的资源请求
最常见的就是,jQuery引用了好几次。
- 缩小cooike
为什么呢?宽带占得过多,还是很消耗资源?
- 设置连接方式为keep-alive
- 减少DNS查询
- 移动端可见区域是有限的,采用延迟加载方式
和上面“静态资源(Css、Js、Image)懒加载”有什么区别
- 开启服务器压缩(gzip方式)
上面已经说过,有点多余了
优化图片处理
- 图片走CDN
- 少用动态gif图
- 图片不适宜过多及过大
- 零碎图片使用css Sprite技术一次性下载
- 避免使用bmp图片
- 图片压缩
1. 要钱。 2.3.5.6 可以在后台用插件控制图片上传的规格
优化HTML
- 减少HTML标签,减少不必要的嵌套
- 废弃table标签
- 减少DOM深度
- 压缩HTML,去掉注释,空格换行等信息
想起了阮老师的《也许,DOM 不是答案》
优化JS
- 使用临时变量或者数组存储document.images及document.forms等集合数据
- 慎用with语法
- 使用AJAX缓存
- 避免eval及Function语法
- 避免使用inlineScript
- 异步、底部加载js
- 合并压缩js
- 字符串连接使用数组的join方式
这些知识不熟!!!