惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
Stack Overflow Blog
Stack Overflow Blog
云风的 BLOG
云风的 BLOG
G
Google Developers Blog
J
Java Code Geeks
C
Check Point Blog
Last Week in AI
Last Week in AI
Microsoft Azure Blog
Microsoft Azure Blog
Blog — PlanetScale
Blog — PlanetScale
月光博客
月光博客
Vercel News
Vercel News
The GitHub Blog
The GitHub Blog
L
LangChain Blog
有赞技术团队
有赞技术团队
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
博客园 - 司徒正美
IT之家
IT之家
Martin Fowler
Martin Fowler
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
T
Tailwind CSS Blog
U
Unit 42
Jina AI
Jina AI
Microsoft Security Blog
Microsoft Security Blog
I
InfoQ

张鑫旭-鑫空间-鑫生活

1分钟速度了解text-align match-parent声明 « 张鑫旭-鑫空间-鑫生活 光标的形状也能设置了,就是CSS caret-shape属性 « 张鑫旭-鑫空间-鑫生活 pretext与文字四面环绕效果的实现 « 张鑫旭-鑫空间-鑫生活 JSON.rawJSON方法的作用是什么? « 张鑫旭-鑫空间-鑫生活 如何使用CSS判断鼠标从哪个方向进入元素? « 张鑫旭-鑫空间-鑫生活 借助mediabunny纯JS实现视频水印、剪裁、合成等功能 « 张鑫旭-鑫空间-鑫生活 务必谨慎使用JS WeakRef弱引用 « 张鑫旭-鑫空间-鑫生活 CSS六边形头像的实现与蜂巢布局 « 张鑫旭-鑫空间-鑫生活 CSS corner-shape与背景底纹技术 « 张鑫旭-鑫空间-鑫生活 浅学WebTransport API:下一代Web双向通信技术 « 张鑫旭-鑫空间-鑫生活 HTML dialog元素新支持了closedBy属性 « 张鑫旭-鑫空间-鑫生活 HTML interestfor属性与悬停popover交互效果 « 张鑫旭-鑫空间-鑫生活 CSS3模拟window7炫酷界面效果展示 « 张鑫旭-鑫空间-鑫生活 图片旋转+剪裁js插件(兼容各浏览器) « 张鑫旭-鑫空间-鑫生活 纯js无图片无外链CSS图片幻灯片播放插件 « 张鑫旭-鑫空间-鑫生活 CSS border三角、圆角图形生成技术简介 « 张鑫旭-鑫空间-鑫生活 CSS “渐进增强”在web制作中常见应用举例 « 张鑫旭-鑫空间-鑫生活 让IE6/IE7/IE8浏览器支持CSS3属性 « 张鑫旭-鑫空间-鑫生活 jQuery – 高亮动态显示页面HTML代码插件 « 张鑫旭-鑫空间-鑫生活 翻译 – 逐渐消失的Flash网站 « 张鑫旭-鑫空间-鑫生活 CSS reset的重新审视 – 避免样式重置 « 张鑫旭-鑫空间-鑫生活 新浪微博插入话题后部分文字选中的js实现 « 张鑫旭-鑫空间-鑫生活 JavaScript实现http地址自动检测并添加URL链接 « 张鑫旭-鑫空间-鑫生活 CSS实现兼容性的渐变背景(gradient)效果 « 张鑫旭-鑫空间-鑫生活 CSS content内容生成技术以及应用 « 张鑫旭-鑫空间-鑫生活 CSS gradient渐变之webkit核心浏览器下的使用 « 张鑫旭-鑫空间-鑫生活 CSS渐变之CSS3 gradient在Firefox3.6下的使用 « 张鑫旭-鑫空间-鑫生活 区分IE8/IE7/IE6及其他浏览器-CSS “\9″hack « 张鑫旭-鑫空间-鑫生活 CSS实现跨浏览器兼容性的盒阴影效果 « 张鑫旭-鑫空间-鑫生活 CSS3&HTML5各浏览器支持情况一览表 « 张鑫旭-鑫空间-鑫生活
翻译:慢点更好-为何排序比速度更重要? « 张鑫旭-鑫空间-鑫...
张鑫旭,zhangxinxu · 2014-12-07 · via 张鑫旭-鑫空间-鑫生活

众所周知:如今的网页为了吸引用户,无所不用其极,夹杂着大量拖累网站的工具。一个好的用户体验,需要高清晰度的图片、视频、图形以及字体;并且现在社会化分享(例如: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设计决定的,而不是基于正确的前后优先顺序。同样的,通常是无意的,为了网站发展,关键吸引点被埋没了,一些营销活动或计划会雀占鸠巢。幸运的是,应用程序可以在事后使用排序做一些小的调整。想了解更多关于排序的好处?可以围观这个,最佳应用程序排序策略概要