慢点更好-为何排序比速度更重要?

众所周知:如今的网页为了吸引用户,无所不用其极,夹杂着大量拖累网站的工具。一个好的用户体验,需要高清晰度的图片、视频、图形以及字体;并且现在社会化分享(例如:jiathis社会化分享按钮和代码)、市场跟踪(如Google分析,百度统计)和第三方项目如雨后春笋,大量增加;JavaScript开始承担以前客户端才有的复杂处理。作为前端开发,显然需要做些什么来应对这些会影响体验的冲击。我们第一反应应该是以web性能为标准做优化,让网站更快。速度优化确实是个很好的开始,但这是不够的。虽然说从平均页面加载时间上看现在的互联网上页面基本上是静态的(以国外的网络速度为背景理解这句话),但是,现在面临的挑战是,越来越多的用户跑到移动端。是该想想其他的方法和路数了。

有个简单的道理想必大家都认可的,就是感知要胜过加载时间,说开了就是,用户对页面加载的实际感知要比真是的网页加载速度更重要,要满足用户的这种期望是个非常复杂的过程,这就是为什么只是傻傻地关注web性能是不足够的。

根据用户浏览时候的上下文为网页制定排序策略是应过对这种期望的最佳方式。排序(Sequencing)是近些年前端优化技术领域新诞生的一个概念,其基本理念是:每个页面的使命不是快,而是契合用户。使用“排序”,元素会以特定的顺序在特定时间显示,以便更好地促使用户参与进来,下面具体看看为何我们要从“速度控”转变成“排序信徒”。

无视就会错失

快可能会迷失方向而导致错失机会

我们不是第一个提出:快不总是代表好。Nielsen Norman这个组织年初发布了一项关于用户界面设计的研究,提出了:

Users might overlook things that change too fast—and even when they do notice, changeable screen elements are harder to understand in a limited timeframe.

如果事情来得太快,用户可能会忽略——即使他们注意到好像发生了什么变化,屏幕上变化的元素是很难再很短的时间内理解的。

//zxx: 例如,我们执行某一Ajax操作成功,需要刷新页面时候,会有提示“删除成功,页面重新加载中…”,如果直接就触发刷新,网络反应慢还好;如果网速以及服务器给力,刷新会很快,以至于则提示一闪而过,用户可能没看清而不知道刚刚发生了什么,此时可以故意慢一下,1~2秒的定时器,然后再自动刷新(同时支持手动刷新)。

一个网站如果短时间内一下子提供太多的选择会忽视很多关键点,因为用户如果被一大堆选择干扰,是不可能专注某一特性、完成某一目标或者知道该干嘛的。并且当用户在没有提示或要求的情况下要求做些改动,其多半不知道该寻找什么,或者该如何继续与网站互动。只有当用户已经做了行动、等待结果时候(如呈现搜索结果,数据提交等),速度是相当受益的。排序的要点在于:访问者需要很多很赞的功能,但是,如果这些功能偏离了预期路线,让用户原本可以称赞你站点的机会变成默哀,则你的网站首先应当着眼于目标转换,而不仅仅是速度。通过降低页面某些元素的呈现速度,让你用户与最重要的内容充分互动来降低挫败感,提高参与度。通过排序,你可以考虑优先让那些元素出现,以及什么时候渲染出来,以此满足访问者当时的需求同时带来更好的访问流量。

夺目,华而不实,以及凌乱

这种呈现组织实际上大家应该都见过。今年比较流行的滚屏加载、时差滚动网站实际上就是“排序”的很好的例子。每一屏都有希望用户关注的功能,如何无干扰呈现给用户,策略就是“慢”,而不是我们一味追求的“快”。当滚动到对应屏幕,或对应位置的时候,动画或者交互才开始呈现,使得用户意思可以关注一件事情,而不会错失希望用户感知的重要信息。如果大家有兴趣,可以围观下我和同事们做的QQ国际版首页,当你滚动鼠标的时候,你就会发现,我们做了很多“排序”以及细节处理,让用户注意到我们希望其关注的内容上。

快可能很……糟糕

你想让你的网站留下深刻的印象,浮夸不总是有效的。当一个顾客走进一家商店,他是不会被大大的「欢迎光临本店,请注册!」这样的标语给轰炸的,理由很简单:这样的中断可能会让顾客离开。那为什么网站要这么做呢?说不定,注册量什么并不是你最大最优先要转换的东西,那为何还要为了这么个小目标,创造这么糟糕的体验呢?人眼一次只能专注于一个项目,人脑一次只能专注于一件事情。确保用户与你最先互动的是你网站有用的、引人入胜的内容,而不是分散的周围的芝麻蒜皮。排序的要点在于:合适的顺序产生更快的性能,但重要的是,它允许用户以正确的逻辑顺序和消费消息和网站互动。通过降低非优先项目,可以加速和促进最佳内容面向用户。这能让用户对你提供的内容保持兴趣和好奇心,可以提高页面的页面访问量、站点停留时间以及转换率。

千里之堤毁于蚁穴

想起了一个例子,手机APP都有个评分,对于APP而言,这个评分很重要。很多软件的做法是,用户刚试玩不久,就弹出让你评分的提示。这就跟上面逛商店被“注册”标语轰炸例子本质类似。而好的APP是在用户成功完成某项交易之后,弹出恭喜提示,然后让用户帮忙举手之劳评个分。哪个好,显然不言而喻。后者不会干扰用户正常使用APP的使用逻辑,降低评分优先级,但最后评分数目和分数确要比前者高很多。

再举个大家能够体验的例子。大家手机上使用京东或者淘宝APP时候,商品详情页,默认展示的都是简单却重要的信息,更详细的商品信息(宣传、参数、使用说明及注意事项)是需要额外拉一次(上拉查看图文详情)才呈现。这种“排序”好处在于:1. 省流量;2. 更高的性能与速度; 3. 没有过多信息干扰,能更准确互动。

如今,总是关注速度而不是元素

web性能优化已经有一定的水准,包括压缩(gzip)、最小化(mini), 合并等。但是,性能优化集中在页面加载上,而从未考虑过个体元素是如何吸引或分散访问者的。例如,社会化媒体的整合(如facebook的like的按钮)对鼓励用户产生品牌的积极情绪是很重要的。但是,如果它们阻止了你页面核心内容的装载,它们就会产生相反的效果。排序的要点在于:当流动受阻时候速度是没有价值的。但是,通过排序,资产可以延迟,或是降级到页面的底部,或者直接不加载——以确保你网站交互的正确性。但是,对于第三方资源,你是没有控制全。社会化媒体分享按钮放在顶部似乎是个不错的选择,但是,为了保证不会有因加载嗝屁而沮丧的用户,提高页面整体内容的专注度,最好在页面完全加载完毕后再去请求与呈现。

上面问题不知大家是否有所体会,我个人是有很多的。经常看外文时候,如果遇到有facebook分享按钮,呵呵,麻烦就来了,尤其这个按钮在顶部的时候。要知道墙内和墙外的世界是不一样的,当对facebook的请求在慢慢试图爬墙的时候,页面只是空白,只见浏览器标签页上菊花旋转,实际上,页面内容可能已经load进来了。但是,对于大多数用户而言,访问与流量中断了,重要的内容没有看到。网站使用Google服务的时候,也会经常遇到这样的问题。类似这种情况,你本身页面性能优化一级棒,其实也是徒劳的;个体元素“排序”要比纯粹加载性能要实用不知千百倍。

前事不忘后事之师
一个典型的Web页面可以有很多的元素,而这些元素有特定的优先级以及逻辑顺序。然而,大多数时候,很少会想到按照逻辑呈现。相反,这些元素的顺序是在设计时由UI设计决定的,而不是基于正确的前后优先顺序。同样的,通常是无意的,为了网站发展,关键吸引点被埋没了,一些营销活动或计划会雀占鸠巢。幸运的是,应用程序可以在事后使用排序做一些小的调整。想了解更多关于排序的好处?可以围观这个,最佳应用程序排序策略概要

时间: 2024-10-03 09:08:57

慢点更好-为何排序比速度更重要?的相关文章

JQuery动画插件Velocity.js发布:更快的动画切换速度

5月3日,Julian在其GitHub上发布了Velocity.js.Velocity.js是一款动画切换的jQuery插件,它重新实现了jQuery的$.animate()方法从而加快动画切换的速度.Velocity.js只有7k的大小,它不仅包含了$.animate()的所有功能,并且还包含了颜色切换.转换(transform).循环.缓动.CSS切换.Scroll功能,它是jQuery. jQuery UI.CSS变换 在动画方面的最佳组合.Velocity.js支持IE8+.Chrome

mysql order by排序查询速度问题

SELECT * FROM `assets_message` LEFT JOIN purchase_message ON assets_message.purchase_id = purchase_message.purchase_id WHERE `purchase_type` = 'oassets'AND purchase_message.assets_type = '002' ORDER BY purchase_message.purchase_id,assets_id SELECT *

总结: Sort 排序算法

排序总结 面试经验 硅谷某前沿小Startup面试时,问到的一个题目就是写一个快速排序算法.进而面试官问到了各种算法的算法复杂度,进而又问了Merge Sort 与 QuickSort 的优劣. 对排序算法的全面理解,体现了计算机学生的功底. 现在来讲Merge Sort 与Quick Sort 是最流行的算法,以下我们来一步一步地分析: SORT分类 在计算机科学所使用的排序算法通常被分類為: 計算的時間複雜度(最差.平均.和最好表現),依據串列(list)的大小(n).一般而言,好的表現是O

排序算法汇总总结_Java实现

一.插入排序 直接插入排序(Insertion Sort)的算法描述是一种简单直观的排序算法.它的工作原理是通过构建有序序列,对于未排序数据,在已排序序列中从后向前扫描,找到相应位置并插入.插入排序在实现上,通常采用in-place排序(即只需用到O(1)的额外空间的排序),因而在从后向前扫描过程中,需要反复把已排序元素逐步向后挪位,为最新元素提供插入空间. 代码实现: public class Inseretion_Sort {     public static void main(Stri

一线开发者在Reddit上讨论深度学习框架:PyTorch和TensorFlow到底哪个更好?

本文标签:   机器学习 TensorFlow Google深度学习框架 分布式机器学习 PyTorch   近日,Reddit用户 cjmcmurtrie 发了一个主题为「PyTorch vs. TensorFlow」的讨论帖,想要了解这两大流行的框架之间各自有什么优势. 原帖地址:https://redd.it/5w3q74 帖子一楼写道: 我还没有从 Torch7 迁移到 TensorFlow.我玩过 TensorFlow,但我发现 Torch7 更加直观(也许是我玩得不够?).我也尝试了

比较模型下的排序算法总结P2

归并排序(merge sort): 思想:如果只有一个元素,排序结束.否则递归地将前半部分和后半部分归并排序,再将排序得到后的两部分合并到一起.合并的方法是:取排序后的前半和后半看作两个输入数组A和B,一个临时输出数组C,以及三个计数器Ap,Bp,Cp并将其初始对应数组的开始端.A[Ap]和B[Bp]的较小者被拷贝到C的下一个位置,相关计数器向前推进一步.当两个输入数组有一个用完的时候,将另一个数组中剩余部分拷贝到C中.最后将数组C元素拷贝回原数组对应的位置. 先看合并算法的代码: void m

【Unity3D自学记录】可视化对照十多种排序算法(C#版)

在这篇文章中.我会向大家展示一些排序算法的可视化过程.我还写了一个工具.大家可对照查看某两种排序算法. 下载源代码 – 75.7 KB 下载演示样例 – 27.1 KB 引言 首先,我觉得是最重要的是要理解什么是"排序算法".依据维基百科.排序算法(Sorting algorithm)是一种能将一串数据按照特定排序方式进行排列的一种算法. 最经常使用到的排序方式是数值顺序以及字典顺序.有效的排序算法在一些算法(比如搜索算法与合并算法)中是重要的,如此这些算法才干得到正确解答.排序算法也

深入排序算法的多语言实现

深入浅出排序算法的多语言实现 作者:白宁超 2015年10月8日20:08:11 摘要:十一假期于实验室无趣,逐研究起数据结构之排序.起初觉得就那么几种排序,两三天就搞定了,后来随着研究的深入,发觉里面有不少东西.本文介绍常用的排序算法,主要从以下几个方面:算法的介绍.算法思想.算法步骤.算法优缺点.算法实现.运行结果.算法优化等.最后对本文进行总结.本文为作者原创,程序经测试无误.部分资料引用论文和网络材料以及博客,后续参见参考文献.(本文原创,转载注明出处) 1 排序的基本概念 排序: 所谓

Lua中table内建排序与C/C++/Java/php/等内排序算法的排序效率比较

Lua这类脚本语言在处理业务逻辑作为配置文件的时候方便省事 但是在大量需要 运算的地方就显得略微不足   按照 Lua内建排序算法 对比C/C++ PHP Java等的快速排序算法进行一下比较. 快速排序算法是基于冒泡排序,优化而来,时间复杂度T(n)=O(nLog2n)  ,可见内部采用了二分策略 . 发现在LuaIDE LDT下直接运行效率要比 通过C++加载运行Lua脚本效率高的多  拿500W个数据排序 来说  ,脚本如下 同样的排序脚本Lua解释器的内置排序算法在LDT下,运行速度比通