页面加载对访问的影响
作者:一叶千鸟 来源:千鸟志 发布时间:2009-10-30 18:54:00
页面访问慢是网站公认的死穴,如果页面都没法访问,往后再精彩的体验都等于零。这个问题如果专业点说,叫做“加载”呈现效率。那么具体了讲,除常规的服务器处理速度、服务器端网络带宽、客户端网络带宽等“硬”问题外,有哪些是技术上没处理好的“软”问题?
举个例子,某页面浏览到一个地方卡住了,至少要等十几秒才出来内容。排查原因,浏览其他网站页面很快,说明客户端网络带宽没问题;浏览同个服务器上其他网站页面都很快,说明服务器的处理速度和网络带宽也没问题。分析代码可能有好几种情况,在YUI官方加速网站的最佳办法提到了13条方法,对于普通产品来说,个人认为有几条应该强化注意,其他(灰色)从性价比上来说则成本有点高。
Make Fewer HTTP Requests 更少的HTTP请求
Use a Content Delivery Network 使用CDN
Add an Expires Header 指定过期时间
Gzip Components 压缩结构
Put Stylesheets at the Top 样式表文件在顶部
Put Scripts at the Bottom 脚本在底部
Avoid CSS Expressions 不在css中使用表达式
Make JavaScript and CSS External 将Javascript和CSS文件分离到单独的文件
Reduce DNS Lookups 减少DNS查询
Minify JavaScript and CSS 精简Javascript和CSS
Avoid Redirects 避免重定向
Remove Duplicate Scripts 去掉多余的脚本
Configure ETags 配置实体标签
Make Ajax Cacheable 可缓存的AJAX
当所有假设都理想化之后,是否所有问题都解决了?答案是不一定。因为并不是加载越快就越好,快慢先后都应该有讲究,分别从加载速度、加载优先级两个角度举例探讨。
加载速度
我曾经碰到种情况,因为页面呈现过快反而影响用户体验。页面跳转交互一闪就过去了,但首屏内容没怎么变化,结果我不知道页面是否真进行了跳转。过快的交互感觉不是流畅,而是迷茫。此问题常见于博客系统,各位同行可以仔细观察。比如淘宝UED博客,下图左为首页首屏,右为网志页首屏。
http://ued.taobao.com/blog 截图于2009年10月28日
UCDChina官方博客也有类似问题,其症结在于前后页面布局不当。按理说,不同层级页面所突出的核心内容应该不同,所以首屏也应该有明显差异才对。我设计自己博客首页、列表页、网志页布局时,就特别注意了它们之间的传达关键点差异。下图上为首页首屏,左为列表页首屏,右为网志页首屏。
http://blog.rexsong.com 截图于2009年10月28日
从以上例子可以得出结论,加载速度并不是孤立存在可能影响用户体验的因素,而在整个设计方案体系中起推动作用。事实上,用户对加载速度的要求也不是特别高,最关键是稳定,不低于用户期望。慢一点没关系,只要能给用户“说法”,比如动态加载提示,用户反而会觉得“过程”很受用。
另外从技术原理上来看,60%到80%的优化很容易,但再往后的每一点进步,都得付出相应的成本和资源。因此,不纵观全局、不考虑客观条件追求极致优化的做法不可取。


猜你喜欢
- 很多人认为python中的字典是无序的,因为它是按照hash来存储的,但是python中有个模块collections(英文,收集、集合),
- 写在之前命名空间,又名 namesapce,是在很多的编程语言中都会出现的术语,估计很多人都知道这个词,但是让你真的来说这是个什么,估计就歇
- 使用cv2.imread(),cv2.imshow(),cv2.imwrite()读取、显示和保存图像一、读入图像使用函数cv2.imrea
- Python实现OCR识别:pytesseractPython常用pytesseract进行图片上的文字识别,即OCR识别,完整的代码比较简
- 如下所示:Numpy中reshape的使用方法为:numpy.reshape(a, newshape, order='C')
- MySQL设置查询缓存的用意:把查询到的结果缓存起来,下次再执行相同查询时就可以直接从结果集中取;这样就比重新查一遍要快的多。查询缓存的最终
- 网站搬家的时候碰到的这个问题,因为数据一直是使用PhpMyAdmin工具来进行备份和恢复的,但是随着网站的数据越来越多,所以数据库也是越来越
- 1.认为FindControl方法寻找的范围是给定Control的后代控件。 <form id="form1" r
- 前言前面写过一篇用Python制作PPT的博客,感兴趣的可以参考用Python制作PPT这篇是关于用Python进行数据可视化的,准备作为一
- 1.问题背景Python之所以强大,不仅是因为该语言本身的特点,也是因为它拥有众多无所不能的第三方库。强大的软件库允许开发者专注于业务,避免
- 游戏介绍在游戏中,魔术师要每位观众心里想一个三位数abc (a、b、c分别是百位、十位和个位数字),然后魔术师让观众心中记下acb、bac、
- 这是我以前发表在经典论坛的帖子,现在转贴回来。仿淘宝网站的导航效果。此方法有几个优点:根据字数自适应项目长度不同的项目使用不同的颜色来区分无
- 项目介绍采用广度优先搜索方法获取一个网站上的所有外链。首先,我们进入一个网页,获取网页的所有内链和外链,再分别进入内链中,获取该内链的所有内
- 相信大家在微信上一定被上面的这段话刷过屏,群发消息应该算是微信上流传最广的找到删除好友的方法了。但群发消息不仅仅会把通讯录里面所有的好友骚扰
- 在处理numpy数组,有这个需求,故写下此文:使用np.argwhere和np.all来查找索引。要使用np.delete删除它们。示例1i
- 前言写过 CLI 常驻进程的老司机肯定遇到过这么一个问题:在需要更新程序的时候,我要怎样才能安全关闭老进程?你可能会想到 NGIN
- 在开始聊我在阿里四个月的网页推广设计之前,我想先来说说我对平面设计和网页设计的认识。它们之间的交集。1.它们都是集艺术创作、电脑技术和数字技
- 一、MySQL删除外键格式:alter table 表名 drop foreign key 外键名;表名就是有外键存在的那个表。外键名可以通
- Broadcast广播是numpy对不同形状(shape)的数组进行数值计算的方式,对数组的算术运算通常在相应的元素上进行。如果两个数组a和
- 实验环境 Pytorch 1.7.0torchvision 0.8.2Python 3.8CUDA10.2 + cuDNN v7.