Menu
Woocommerce Menu

提高你前端水平的银河国际网址手机版,把性能看作设计的一部分

0 Comment


CSS进阶:提高你前端水平的 4 个技巧

2016/07/06 · CSS

本文由 伯乐在线 –
小谢
翻译。未经许可,禁止转载!
英文出处:Jonathan Z.
White。欢迎加入翻译组。

译者注:随着 Node.js 、react-native
等技术的不断出现,和互联网行业的创业的层出不穷,了解些前端知识,成为全栈攻城师,快速的产出原型,展示你的创意,对程序员,尤其是在创业的程序员来说,越来越重要,下面我们就跟随著名国外开发者网站上的热推文章《Leveling
up in CSS》,从提升你的CSS技巧开始。

银河国际网址手机版 1

CSS3硬件加速也有坑

2015/09/20 · CSS ·
硬件加速

原文出处: 张云龙(@前端农民工)   

常听人说:

移动端要想动画性能流畅,应该使用3d硬件加速

最近深入了解了一些浏览器内核的细节,感觉这里面其实有坑啊。。。

事情要从最近看的《WebKit技术内幕》说起,第二章介绍了网页的结构,其中提到了Webkit硬件加速的方式,会把需要渲染的元素放到特定的『Composited
Layer』中,在chrome的控制台可以这样开启:

银河国际网址手机版 2

选择『Show composited layer
borders』以后,就能看到有动画3d变换的元素会被一个黄色的边框圈起来,表示放到了一个新的『复合层(composited
layer)』中渲染,大概长这个样子:

银河国际网址手机版 3

蓝色的细线是浏览器渲染时候的『瓦片』,浏览器绘制页面的时候只会绘制可视区域一定范围内的瓦片,以节省性能开销,而黄色的边框框起来的,就代表了这个元素被放到特殊的复合层中渲染,跟主文档不在一个层中

然后我觉得这个视图挺有意思的,就拿来看了一下国内某项目,不看不知道,一看被吓尿:

银河国际网址手机版 4

这个项目什么时候搞成所有元素都用3d加速了?!

仔细排查了这些被框出来的元素,完全没有任何需要复合层渲染的迹象,我真是哔了狗了。。。我开始一个个删除元素,简化代码,很快就发现,原来罪魁祸首在这里:

银河国际网址手机版 5

头部的那个轮播动画元素的存在居然会导致下面所有相对和绝对定位的元素都被放到复合层中。。。

查了一些 资料:

层创建标准

什么情况下能使元素获得自己的层?虽然 Chrome
的启发式方法(heuristic)随着时间在不断发展进步,但是从目前来说,满足以下任意情况便会创建层:

  • 3D 或透视变换(perspective transform) CSS 属性
  • 使用加速视频解码的 元素
  • 拥有 3D (WebGL) 上下文或加速的 2D 上下文的 元素
  • 混合插件(如 Flash)
  • 对自己的 opacity 做 CSS 动画或使用一个动画 webkit 变换的元素
  • 拥有加速 CSS 过滤器的元素
  • 元素有一个包含复合层的后代节点(换句话说,就是一个元素拥有一个子元素,该子元素在自己的层里)
  • 元素有一个 z-index
    较低且包含一个复合层的兄弟元素(换句话说就是该元素在复合层上面渲染)

主要是最后一条,我觉得它的中文翻译不是很准确,原文其实是:

Element has a sibling with a lower z-index which has a compositing
layer (in other words the it’s rendered on top of a composited layer)

这句话的意思是,如果有一个元素,它的兄弟元素在复合层中渲染,而这个兄弟元素的z-index比较小,那么这个元素(不管是不是应用了硬件加速样式)也会被放到复合层中。

最可怕的是,浏览器有可能给复合层之后的所有相对或绝对定位的元素都创建一个复合层来渲染,于是就有了上面那个项目截图的那种效果。之前一直奇怪为什么这个页面滚动很卡,明明没有多少DOM,现在看来问题就在这里了!

于是乎我写了一个页面,让大家看看这东西到底有多大威力:

银河国际网址手机版 6

我在上面这个页面中放置了一个h1标题,应用了translate3d动画,使得它被放到composited
layer中渲染,然后在这个元素后面创建了2000个list,每个list中都有一个图片,一个标题和一个日期显示,其中图片和日期显示是绝对定位,父容器li是相对定位,然后,各位可以按照前述的说明打开chrome的『show
composited layer borders』选项看看这个页面的内容复合层分布:

银河国际网址手机版 7

就是这个鸟样子,很难想象,这样的页面滚动起来会卡成什么样。我用的是mac机器,快速拖动滚动条chrome已经非常吃力了,然后我写了一个简单的滚动条移动操作:

setInterval(‘document.body.scrollTop++’, 0);

然后用timeline抓一下页面性能:

银河国际网址手机版 8

一次『Composite
Layers』的计算居然要 96.206 ms !!这还是在我的mac系统上哦,手机上真的会卡出翔。

我在页面上放置了一个开关『为动画元素设置z-index』,这个checkbox点击之后,会用js给那个动画的h1元素加 position:relative 和 z-index: 1 ,这种做法的原理是人为提升动画元素的z-index,让浏览器知道这个元素的层排序,就不会很傻逼的把其他z-index比它高的元素也弄到复合层中了,看看这个效果:

银河国际网址手机版 9

仅仅给动画元素设置一个高一些的z-index,就能解决这种无厘头增加复合层的问题,略无语。。。搞定之后,再用滚动条移动函数抓一下页面性能:

完全恢复正常了有木有!

大家可以用支持『硬件加速』的『安卓』手机浏览器测试上述页面,给动画元素加z-index前后的性能差距非常明显。

不过也不是所有浏览器都有这个问题,我在mac上的Safari、firefox都没有明显差异,安卓手机上的QQ浏览器好像也正常,猎豹、UC、欧朋、webview等浏览器差距明显,更多测试就靠大家来发现吧。

最后总结一下:

使用3D硬件加速提升动画性能时,最好给元素增加一个z-index属性,人为干扰复合层的排序,可以有效减少chrome创建不必要的复合层,提升渲染性能,移动端优化效果尤为明显。

大家可以现在就排查一下这类问题,尤其是用了轮播、动画loading的页面,出现这问题很常见。另外推荐在追查性能问题的时候打开『show
composited layer borders』选项,如果页面有很多黄色的框肯定是不对的。

最后,再次推荐一下《Webkit技术内幕》这本书。浏览器内核之于前端工程师,就如同操作系统之于后端工程师,毕竟是我们程序运行的宿主环境,多了解一些,很多问题容易想通。

1 赞 1 收藏
评论

银河国际网址手机版 10

Web性能优化系列:把性能看作设计的一部分

2015/09/10 · CSS,
HTML5,
JavaScript ·
性能优化

本文由 伯乐在线 –
淘小米
翻译,黄利民
校稿。未经许可,禁止转载!
英文出处:brad
frost。欢迎加入翻译组。

一直以来,当我们每次提到网站性能时总是想到各种技术术语。例如 DNS
查找、Gzipping、minifying、far future expires headers、缓存、ETags
等等专业词汇被抛出后,结果很多非技术的人很难对这个产生兴趣。

现在是时候让我们不仅把性能仅作为技术的最佳实践,同时还应该作为设计的一方面。

CSS
在刚开始学习的时候看起来非常简单。毕竟,它仅仅就是些样式而已,事实上是这样吗?

但是,随着你的不断了解。很快,你会发现 CSS
没你想象的那么简单,它复杂且有深度。

做好这四件事情,能让你在大规模使用 CSS
的时候保证代码的健壮性:使用适当的语义,模块化,采用统一的命名规范,遵循单一功能原则。

我们都能感受到

经常有人问我是以什么为生的。每次当我提到我是做移动开发时,他们会立即跟我反映“Facebook
太烂了!”

为什么会有这么直接的发自内心的抱怨呢?他们不是对 Facebook
导航条的直观感觉,也并不执意时间轴设计的优雅性。由于 Facebook 的整个
Clusterfudge 系统所做的一切,导致其手机应用程序慢得跟坨屎一样。

(伯乐在线注:本文是一篇 2012
年左右的旧文)

银河国际网址手机版 11

现在的网页变得越来越臃肿。做网页的“玩具”也越来越多了,这同时也意味着存在着更多潜在的危害。Phil
Hawksworth 曾指出了一些荒诞的网站:

银河国际网址手机版 12

如果你的网页超过 15MB,且不是由BHTML5 编写的,那这是个愚蠢的网页。 ——
Christian Heilmann

虽然这些网站有可能会被人注意到(尽管有很多网站存在一些争议),但是大部分访客永远都不可能访问这些网站。如果一个网页加载超过
5
秒,那么74%的手机端用户会选择关闭这个网页。这意味着你有5秒钟的时间让他们获得他们想要的东西,不然他们就会选择离开。

使用适当的语义

在 HTML 和 CSS
编程中有语义标注的概念。语义是指单词的含义和他们间的关系。在 HTML
编程中,意味着你需要使用一个合适的标签名字来标记。下面是一个经典的例子。

XHTML

<!– bad –> <div class=”footer”></div> <!– good
–> <footer></footer>

1
2
3
4
<!– bad –>
<div class=”footer”></div>
<!– good –>
<footer></footer>

富有语义的 HTML 是非常简单明确的。另一方面,富有语义的 CSS
则是更抽象和主观的。编写富有语义的 CSS
意味着在选择类型的时候,类名要传达出结构和功能信息。类名要很容易被理解。确保它们不要太具体、太特殊。这样,你就可以复用它了。

银河国际网址手机版 13

为了阐述什么是一个良好的类名,请看这个简化了的 Medium 网站的 CSS 例子。

XHTML

<div class=”stream”> <div class=”streamItem”> <article
class=”postArticle”> <div class=”postArticle-content”> <!–
content –> </div> </article> </div> </div>

1
2
3
4
5
6
7
8
9
<div class="stream">
  <div class="streamItem">
    <article class="postArticle">
      <div class="postArticle-content">
        <!– content –>
      </div>
    </article>
  </div>
</div>

通过这些代码,你可以立即识别出它们的结构、功能和含义。父节点的类名是
stream ,内容是一个文章列表。它的子节点的类名是 streamItem
,内容是文章列表中的一篇具体的文章。这使我们很容易的了解到父节点和子节点之间的关系。并且,这些类可以在每一个有文章功能的页面中使用。

你可以像阅读一本书一样读 HTML 和
CSS。它会给你讲一个故事。通过故事你可以了解故事中的每一个角色和他们之间的关系。语义丰富的
CSS 代码容易理解,更便于维护。

若果你想进一步了解语义相关的内容,看看
《怎么富有语义的为类命名》、《CSS
命名不简单》

《富有语义和容易识别(的代码命名)》,再看
《关于 HTML
命名和前端架构》。

好的性能就是好的设计

好的性能之路,并不是从技术人员或者技术堆栈开始的(尽管我并不是说这些东西不重要)。好的性能是从大家一起参与并使产品快速开发出来开始的。以下这几点是需要考虑的:

  • 项目书中应包括性能设计——工作陈述、项目建议及设计简介中应该多次明确的提出将性能作为首要目标。“这个项目的目标是开发一个惊艳的、灵活的、闪电般体验的…”
  • 尽快将设计稿放到浏览器中体验效果——把网站设计排版挂在墙上看起来也许还可以(?),但是以这种方式来衡量在最终实际运行环境中的效果,太不靠谱了。当我们打开
    The Post-PSD
    Era 这个页面时,我们可以看出页面性能以设计为导向远远比传统瀑布流过程要快得多。
  • 在实际设备中做测试——Stephanie
    Rieger 说过,通过缩小的窗口或者模拟器中来衡量设计效果是不太实际的。在开发阶段的早期,就要通过实际设备进行测试,因为你可以在实际设备中看到在你的设计中接入的每个元素所产生的真正的效果。
  • 团队协作——开发人员应该在早期项目设计的过程中就参与进来,同时应该指出对于设计模型和排版中潜在的性能问题。重要的是,这个过程不是为了达成一个非对即错的一致意见,而是为了能够真正的科学协作。
  • 培训——在设计过程中,许多人并不知道他们的设计决策对性能所产生的后果。要让他们知道,如果页面中包含5种字体,对性能是有很大的伤害的。当他们想要在页面中加入大量大图时,需要让他们三思。需要验证想法的时候,可以在
    Codepen上制作一个快速原型,然后坐下来用一个用3G连接的真实设备做体验。

终极性能就是尊重。尊重用户的时间,他们将更有可能带着良好的体验离开。良好的性能就是好的设计。是时候这样做了。

1 赞 收藏
评论

标签:,

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图