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

推荐订阅源

宝玉的分享
宝玉的分享
I
InfoQ
博客园 - 三生石上(FineUI控件)
Apple Machine Learning Research
Apple Machine Learning Research
博客园 - 【当耐特】
T
The Blog of Author Tim Ferriss
N
Netflix TechBlog - Medium
GbyAI
GbyAI
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
B
Blog RSS Feed
Blog — PlanetScale
Blog — PlanetScale
酷 壳 – CoolShell
酷 壳 – CoolShell
WordPress大学
WordPress大学
L
LINUX DO - 热门话题
Security Latest
Security Latest
月光博客
月光博客
U
Unit 42
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
T
Threat Research - Cisco Blogs
The GitHub Blog
The GitHub Blog
Simon Willison's Weblog
Simon Willison's Weblog
Help Net Security
Help Net Security
人人都是产品经理
人人都是产品经理
Engineering at Meta
Engineering at Meta
罗磊的独立博客
Attack and Defense Labs
Attack and Defense Labs
MongoDB | Blog
MongoDB | Blog
Microsoft Azure Blog
Microsoft Azure Blog
S
Securelist
P
Proofpoint News Feed
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
A
About on SuperTechFans
PCI Perspectives
PCI Perspectives
S
Security Affairs
Schneier on Security
Schneier on Security
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org
L
LangChain Blog
Exploit-DB.com RSS Feed
Exploit-DB.com RSS Feed
H
Hacker News: Front Page
C
Cyber Attacks, Cyber Crime and Cyber Security
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
Security Archives - TechRepublic
Security Archives - TechRepublic
P
Privacy & Cybersecurity Law Blog
W
WeLiveSecurity
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
K
Kaspersky official blog
Google Online Security Blog
Google Online Security Blog
Hacker News - Newest:
Hacker News - Newest: "LLM"
V
Vulnerabilities – Threatpost
Recorded Future
Recorded Future

张鑫旭-鑫空间-鑫生活

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各浏览器支持情况一览表 « 张鑫旭-鑫空间-鑫生活 翻译 – CSS Sprites:实用技术还是生厌之物? « 张鑫旭-鑫空间-鑫生活 纯CSS实现易拉罐3D滚动效果 « 张鑫旭-鑫空间-鑫生活 纯CSS实现侧边栏/分栏高度自动相等 « 张鑫旭-鑫空间-鑫生活 CSS+JavaScript实现页面不同布局的切换 « 张鑫旭-鑫空间-鑫生活 JavaScript实现最简单的拖拽效果 « 张鑫旭-鑫空间-鑫生活 自己写的无图片版jQuery zxxbox弹出框插件 « 张鑫旭-鑫空间-鑫生活 中国古代道家思想与网页重构的思考 « 张鑫旭-鑫空间-鑫生活 让所有浏览器支持HTML5 video视频标签 « 张鑫旭-鑫空间-鑫生活 纯CSS实现各类气球泡泡对话框效果 « 张鑫旭-鑫空间-鑫生活 JS HEX十六进制与RGB, HSL颜色的相互转换 « 张鑫旭-鑫空间-鑫生活 CSS实现兼容性的渐变、高光等文字效果 « 张鑫旭-鑫空间-鑫生活 去除冗余 – 精简您的CSS样式代码 « 张鑫旭-鑫空间-鑫生活 对overflow与zoom”清除浮动”的一些认识 « 张鑫旭-鑫空间-鑫生活 jQuery Pagination Ajax分页插件中文详解 « 张鑫旭-鑫空间-鑫生活 absolute绝对定位的非绝对定位用法 « 张鑫旭-鑫空间-鑫生活 网页布局思想浅议-淘宝新版首页为实例 « 张鑫旭-鑫空间-鑫生活 回流与重绘:CSS性能让JavaScript变慢? « 张鑫旭-鑫空间-鑫生活 CSS float浮动的深入研究、详解及拓展(二) « 张鑫旭-鑫空间-鑫生活 CSS float浮动的深入研究、详解及拓展(一) « 张鑫旭-鑫空间-鑫生活 60个极富创造性的震撼的电影海报设计 « 张鑫旭-鑫空间-鑫生活 jQuery Lightbox(balupton版)图片展示插件讲解 « 张鑫旭-鑫空间-鑫生活 博客内嵌flash音乐播放器代码、下载与使用 « 张鑫旭-鑫空间-鑫生活 CSS3 animate实现图片墙3D翻转效果 « 张鑫旭-鑫空间-鑫生活 图片旋转效果的一些研究、jQuery插件及实例 « 张鑫旭-鑫空间-鑫生活 CSS3 border-image详解、应用及jQuery插件 « 张鑫旭-鑫空间-鑫生活 jQuery-两款不同原理的圆角插件讲解 « 张鑫旭-鑫空间-鑫生活 页面可用性之outline轮廓外框的一些研究 « 张鑫旭-鑫空间-鑫生活 CSS3 transition实现超酷图片墙动画效果 « 张鑫旭-鑫空间-鑫生活 HTML CSS列表元素ul,ol,dl的研究与应用 « 张鑫旭-鑫空间-鑫生活 jQuery图片文本滚动切换插件jCarousel中文翻译与详解 « 张鑫旭-鑫空间-鑫生活 酷酷的jQuery鼠标悬停图片放大切换显示效果 « 张鑫旭-鑫空间-鑫生活 IE6下z-index犯癫不起作用bug的初步研究 « 张鑫旭-鑫空间-鑫生活 checkbox复选框的一些深入研究与理解 « 张鑫旭-鑫空间-鑫生活 jQuery之使用slideToggle实现垂直下拉菜单 « 张鑫旭-鑫空间-鑫生活 jQuery-innerfade内部列表自动淡入淡出插件 « 张鑫旭-鑫空间-鑫生活 jQuery-火焰灯效果导航菜单 « 张鑫旭-鑫空间-鑫生活 IE下css bug集合-翻译自haslayout.net « 张鑫旭-鑫空间-鑫生活 翻译-IE7/8@font-face嵌入字体与文字平滑 « 张鑫旭-鑫空间-鑫生活 jQuery-马化腾产品设计与用户体验的一些技术实现 « 张鑫旭-鑫空间-鑫生活 像素的世界及其在web开发制作中的应用 « 张鑫旭-鑫空间-鑫生活 css行高line-height的一些深入理解及应用 « 张鑫旭-鑫空间-鑫生活 CSS实现圆角六色渐变自适应按钮详解 « 张鑫旭-鑫空间-鑫生活 我熟知的三种三栏网页宽度自适应布局方法 « 张鑫旭-鑫空间-鑫生活 jQuery照片图像剪裁插件Jcrop中文翻译详解 « 张鑫旭-鑫空间-鑫生活 Ajax Upload多文件上传插件翻译及中文演示 « 张鑫旭-鑫空间-鑫生活 告别图片—使用字符实现兼容性的圆角尖角效果beta版 « 张鑫旭-鑫空间-鑫生活 大小不固定的图片、多行文字的水平垂直居中 « 张鑫旭-鑫空间-鑫生活 jQuery boxy弹出层对话框插件中文演示及讲解 « 张鑫旭-鑫空间-鑫生活 JavaScript实现新浪微博文字放大显示动画效果 « 张鑫旭-鑫空间-鑫生活 翻译:让网络更快一些——最小化浏览器中的回流(reflow) « 张鑫旭-鑫空间-鑫生活 jQuery之addClasas与removeClass使用实例 « 张鑫旭-鑫空间-鑫生活 关于Google圆角高光高宽自适应按钮及其拓展 « 张鑫旭-鑫空间-鑫生活 JavaScript实现图片幻灯片滚动播放动画效果 « 张鑫旭-鑫空间-鑫生活 jQuery-鼠标经过显示大图并跟随鼠标效果插件 « 张鑫旭-鑫空间-鑫生活 关于gif图片(或png8)杂边锯齿的问题 « 张鑫旭-鑫空间-鑫生活 对html与body的一些研究与理解 « 张鑫旭-鑫空间-鑫生活 鲜为人知的一个解决兼容性问题的利器——小数 « 张鑫旭-鑫空间-鑫生活 搜狐白社会似iphone短信对话框效果的优化 « 张鑫旭-鑫空间-鑫生活 关于文字内容溢出用点点点(…)省略号表示 « 张鑫旭-鑫空间-鑫生活 jquery之append与insertBefore使用实例 « 张鑫旭-鑫空间-鑫生活 jQuery之图片关联伸缩效果 « 张鑫旭-鑫空间-鑫生活 jquery之图片左右切换动画效果 « 张鑫旭-鑫空间-鑫生活 jQuery之replace字符串替换实现不同尺寸图片切换 « 张鑫旭-鑫空间-鑫生活 jQuery-实现图片的放大镜显示效果 « 张鑫旭-鑫空间-鑫生活 jQuery-单击文字或图片内容放大显示效果插件 « 张鑫旭-鑫空间-鑫生活 reflection.js-实现图片投影倒影效果js插件 « 张鑫旭-鑫空间-鑫生活 jQuery-很酷的弹出层效果js插件 « 张鑫旭-鑫空间-鑫生活 复选框单选框与文字对齐问题的研究与解决 « 张鑫旭-鑫空间-鑫生活 css margin的相关属性,问题及应用 « 张鑫旭-鑫空间-鑫生活 IE6下png背景不透明问题的综合拓展 « 张鑫旭-鑫空间-鑫生活
翻译:慢点更好-为何排序比速度更重要? « 张鑫旭-鑫空间-鑫生活
张鑫旭,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设计决定的,而不是基于正确的前后优先顺序。同样的,通常是无意的,为了网站发展,关键吸引点被埋没了,一些营销活动或计划会雀占鸠巢。幸运的是,应用程序可以在事后使用排序做一些小的调整。想了解更多关于排序的好处?可以围观这个,最佳应用程序排序策略概要