金沙国际官网_金沙国际平台登录

因为这个金沙国际官网_金沙国际平台登录网站与很多的大型澳门赌场都有合作,金沙国际官网_金沙国际平台登录尽职尽责,高效执行,保持好奇心,不断学习,追求卓越,点击进入金沙国际官网_金沙国际平台登录马上体验吧,所以现在也正式地开始了营业。

您的位置:金沙国际官网 > web前端 > 金沙国际官网秋月何时了,无线页面动画优化实

金沙国际官网秋月何时了,无线页面动画优化实

发布时间:2019-11-06 08:19编辑:web前端浏览(176)

    秋月何时了,CSS3 border-radius知多少?

    2015/11/02 · CSS · border-radius

    原文出处: 张鑫旭   

    CSS魔法堂:”那不是bug,是你不懂我!” by inline-block

    2016/05/10 · CSS · inline-block

    本文作者: 伯乐在线 - ^-^肥仔John 。未经作者许可,禁止转载!
    欢迎加入伯乐在线 专栏作者。

    无线页面动画优化实例

    2016/04/20 · CSS · 无线

    原文出处: 大额_skylar(@大额大额哼歌等日落)   

    无线页面本就分秒必争,更不用说当我们在无线页面中使用动画的时候。不管是css动画还是canvas动画,我们都需要时刻小心着,并且有必要掌握页面性能的基本分析方法。

    既然我们的目标是优化,那么就与浏览器的一些渲染和执行机制有关,更好的迎合浏览器的行为方式,才可以让我们的动画流畅而优美。

    没错,浏览器是老大,全听它的。

    金沙国际官网 1

     

    一、秋月何时了

    这两个月产出有点少,为什么呢?大家都学过「产出守恒定律」,文章产少了,是因为产了其他很屌的东西:
    金沙国际官网 2

    早就知道女朋友是技术学习的第一阻碍力,现在发现小朋友才是技术学习的Boss级阻碍力。

    对了,今天是万圣节,我有必要扮鬼让大家开心一下:
    金沙国际官网 3

    告诉大家一个秘密,我每天早上就是这么帅醒的。

    不过在我们国家,万圣节显得冷冷清清凄凄惨惨戚戚,但是,第11区的人民就热闹多了:
    金沙国际官网 4

    不知道大家的万圣节是怎么过的,尤其今年恰逢周末。想想我年轻的时候,这样的节日不是加班,就是宅在家里。如果你也是这样,别桑心,没人给你扮鬼,咱们可以自己扮鬼开心下嘛。比如说:单身鬼,穷鬼等等。哟,你突然发现自己……根本就不用扮,直接本色出演就可以了!那……真是太恭喜你了,原来你每天都在过万圣节!金沙国际官网 5 那更应该开心啦! 金沙国际官网 6

    今天10月末,过了今天,秋天也算是走到头了,但是,对于前端的学习,路还漫长,今天就说说CSS3 border-radius更深入的一些tips. 本文属于进阶知识点,所以,下面内容不会啰嗦一些基础知识,适合有一定是要经验的小伙伴。

    前言

    每当来个需要既要水平排版又要设置固定高宽时,我就会想起display:inline-block,还有为了支持IE5.5/6/7的hack*display:inline;*zoom:1;。然后发现盒子间无端端多了个不可选的空白符,于是想尽办法修复这个bug。

    直到一天拜读了@一丝姐、@HAX等高人的秘笈后才顿悟,原来我错了。那不是bug,是我不懂而已。

    一、设备刷新率(帧率)

    我们想让页面变快,想让动画流畅,我们需要先了解一下是什么在影响着我们的感知。

    页面运行在设备的浏览器中,现在市面上的移动设备的刷新频率大多是60次/秒(帧率)。所以给浏览器渲染每一帧的画面的时间应该是(1s/60=16.67ms)。

    但实际上,浏览器并不是把功夫全花在为我们渲染页面上,他还需要做一些额外的工作,比如渲染队列的管理和不同线程的切换等等。所以,单纯的浏览器渲染工作留给我们的时间大约也就是10ms左右,当我们在每一帧所做的渲染操作大于这个时间的时候,比较直观的表现就是页面卡顿,动画卡顿。

    当我们使用css animation完成动画时,这一点看起来没有那么重要,因为浏览器会为我们handle一些事情。但是当我们需要使用js比如canvas来实现流畅的逐帧动画时,需要牢记这个有限的时间,它很重要。

    二、border-radius私有前缀拜拜金沙国际官网 7

    还有个把月就2016年了,00后都已经登上历史舞台了,大家都懂我说的意思,浏览器个把年前就把私有前缀给去掉了,现在完全没必要还傻傻使用-webkit-border-radius-moz-border-radius,至少我是早就不使用了,你随意~

    先行者——IE5.5中的inline-block

    当我们为支持IE5.5/6/7而添加这段hack时*display:inline;*zoom:1,总以为从IE8开始才支持display:inline-block属性值。其实从IE5.5开始已经支持了,只是IE5.5/6/7支持的是IE的自定义标准,而从IE8开始则是支持CSS2.1标准而已。

    The inline-block value is supported starting with Internet Explorer 5.5. You can use this value to give an object a layout without specifying the object’s height or width.

    XHTML

    <style type="text/css"> .bk1{ background: #06F; } .bk2{ background: #F60; } .item{ width: 100px; height: 100px; display:inline-block; } </style> <div class="bk1 item"></div> <div class="bk2 item"></div> <span class="bk1 item"></span> <span class="bk2 item"></span>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <style type="text/css">
    .bk1{
      background: #06F;
    }
    .bk2{
      background: #F60;
    }
    .item{
      width: 100px;
      height: 100px;
      display:inline-block;
    }
    </style>
    <div class="bk1 item"></div>
    <div class="bk2 item"></div>
    <span class="bk1 item"></span>
    <span class="bk2 item"></span>

    金沙国际官网 8

    经过CSS2.1洗礼的我们对上述内容不禁会发出两个疑问:

    1. 为啥block-level element设置了display:inline-block后还是垂直方向排列呢?
    2. 为啥inline-level element设置了display:inline-block后之间没有诡异的间隙呢?

    还记得杨过是如何变成神雕大侠的吗?不就是被断右臂后发现左手才是真爱吗:)
    好了,其实我的意思是抛弃过去对display:inline-block的认知,重新来理解IE5.5/6/7下的它才是硬道理啦。

    对于问题1,首先上面的引用很直白地告诉我们——display:inline-block能触发hasLayout,然后就没了。所以block-level element依然是block-level element,不会一夜成了inline-level element的。结论:display:inline-block仅会触发hasLayout,而元素本该怎么排版还是怎么排版。关于hasLayout的内容可参考《CSS魔法堂:hasLayout原来是这样!》

    对于问题2,我们先看看是否真的没有间隙吧!

    XHTML

    <style type="text/css"> .bk1{ background: #06F; } .bk2{ background: #F60; } .item{ width: 100px; height: 100px; display:inline-block; } </style> <span class="bk1 item"></span> <span class="bk2 item"></span> <br/><br/> <span class="bk1 item">bk1</span> <span class="bk2 item"></span>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <style type="text/css">
    .bk1{
      background: #06F;
    }
    .bk2{
      background: #F60;
    }
    .item{
      width: 100px;
      height: 100px;
      display:inline-block;
    }
    </style>
    <span class="bk1 item"></span>
    <span class="bk2 item"></span>
    <br/><br/>
    <span class="bk1 item">bk1</span>
    <span class="bk2 item"></span>

    金沙国际官网 9

    见鬼了,在前一个盒子内添加些文本就出现间隙了?其实这真的和display:inline-block无关的,大家就放过他吧!来上呈堂证供!

    XHTML

    <style type="text/css"> .bk1{ background: #06F; } .bk2{ background: #F60; } <span class="bk1">no line break</span> <span class="bk2"> has line break </span>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <style type="text/css">
    .bk1{
      background: #06F;
    }
    .bk2{
      background: #F60;
    }
    <span class="bk1">no line break</span>
      
      
    <span class="bk2">
    has line break
    </span>

    金沙国际官网 10

    可以看到蓝色块k和红色块h间存在一个空格,而红色块k后也存在一个空格。可是代码中我们看到蓝红色块间有4个&#x20HTML实体,为啥只有一个空格呢?而红色块中仅仅换了行而已,怎么就有个空格呢?

    先抛结论:上面两端代码均是white space、white space collasping再作祟。

    二、浏览器的页面渲染流水线

    我们的代码是如何一步步的渲染成页面的呢?

    金沙国际官网 11

    • JavaScript。一般来说,我们使用JavaScript来实现一些页面逻辑,但偶尔我们也可能会使用JavaScript来实现一些视觉变化的效果。比如用jQuery的animate函数做一个动画、或者往页面里添加一些DOM元素等。当然,现在更可能的是使用CSS Animations, Transitions和Web Animation API。
    • 计算样式(Style)。这个过程是通过样式文件中的CSS选择器,对每个DOM元素匹配对应的CSS样式。
    • 布局(Layout)。上一步确定了每个DOM元素的样式规则,这一步就是具体计算每个DOM元素最终在屏幕上显示的大小和位置。web页面中元素的布局是相对的,因此一个元素的布局发生变化,会联动地引发其他元素的布局发生变化。因此对于浏览器来说,布局过程是经常发生的。
    • 绘制(Paint)。绘制,本质上就是填充像素的过程。包括绘制文字、颜色、图像、边框和阴影等,也就是一个DOM元素所有的可视效果。一般来说,这个绘制过程是在多个层上完成的。
    • 渲染层合并(Composite)。由上一步可知,对页面中DOM元素的绘制是在多个层上进行的。在每个层上完成绘制过程之后,浏览器会将所有层按照合理的顺序合并成一个图层,然后显示在屏幕上。对于有位置重叠的元素的页面,这个过程尤其重要,因为一旦图层的合并顺序出错,将会导致元素显示异常。

    看起来每个页面都会经历这样的几个过程,然而我们其实可以使用一些技巧,帮助浏览器跳过某些步骤,而缩短他的工作时间。

    1.五个步骤都消耗了时间

    当我们在js中改变了某个DOM元素的layout时,那么浏览器就会检查页面中的哪些元素需要重新布局,然后对页面激发一个reflow过程以完成页面的重新布局。被reflow的元素,接下来就一定会再次经过Paint和Composite这两个过程,以渲染出最新的页面。

     

    2.跳过layout这一步

    当我们只修改了一个DOM元素的paint only属性的时候,比如background-image/color/box-shadow等。这个时候不会触发layout,浏览器在完成样式的计算之后就会跳过layout的过程,就只Paint和Composite了。

     

    3.跳过layout和paint这两步

    如果你修改一个非样式且非绘制的CSS属性,那么浏览器会在完成样式计算之后,跳过布局和绘制的过程,直接Composite。

    我们尝试下使用transform动画来尽可能的达到这种效果。

     

    三、border-radius百分比值

    border-radius支持百分比值,例如border-radius:50%. 如果大家看早些年CSS3 border-radius的文档或者文章,会发现,根本就没有提过百分比值这一茬。究其原因,是因为百分比值的支持是后来才支持的,跟数值不是一起出来的。比方说某些老版本的Android机子,border-radius:50%它就不认识。

    不过,事情已经过去很多年了,现在大家可以不用在意这些细节了。

    OK,大家都知道这个百分比是相对单位,但是,不同属性的百分比值相对的内容是不一样的,对吧,比方说translate是自身,width/height是父级,background-position需要尺寸差计算等。那这里border-radius的百分比值相对的属性是?

    我们炒个板栗知道了:

    CSS

    .radius-test1 { width: 100px; height: 100px; border: 50px solid #cd0000; border-radius: 50%; }

    1
    .radius-test1 { width: 100px; height: 100px; border: 50px solid #cd0000; border-radius: 50%; }

    JavaScript

    <div class="radius-test1></div>

    1
    &lt;div class="radius-test1&gt;&lt;/div&gt;

    金沙国际官网 12

    哦哦哦哦,我知道了,是相对于元素占据尺寸的百分比(类似jQuery outerWidth()/outerHeight()方法代表尺寸),也就是包含边框,padding后的尺寸。而不是单纯地相对于width/height值。

    于是乎,我们要实现一个正方形元素的圆角效果(例如网站头像),一个50%就可以搞定,而无需去计算。

    金沙国际官网 13

    border-radius还有一个大值特性,也就是值很大的时候,只会使用能够渲染的圆角大小渲染。因此,要实现一个正方形元素的圆角效果(例如网站头像),我们还可以使用一个很大的原教旨,同样是不需要计算的。例如,下面240*240像素图片,我设置圆角大小300px,跟上面效果一样。
    金沙国际官网 14

    咦?貌似大数值border-radius值好像和50%没什么区别啊?因为上面的图片是正方形,实际上两者区别不小,我们把上面红圈圈例子的height改成200px看看两者对应效果:

    CSS

    .radius-test2 { width: 100px; height: 200px; border: 50px solid #cd0000; border-radius: 50%; }

    1
    .radius-test2 { width: 100px; height: 200px; border: 50px solid #cd0000; border-radius: 50%; }

    CSS

    .radius-test3 { width: 100px; height: 200px; border: 50px solid #cd0000; border-radius: 300px; }

    1
    .radius-test3 { width: 100px; height: 200px; border: 50px solid #cd0000; border-radius: 300px; }

    XHTML

    <div class="radius-test2"></div><br>

    1
    <div class="radius-test2"></div><br>

    金沙国际官网 15

    XHTML

    <div class="radius-test3></div>

    1
    <div class="radius-test3></div>

    金沙国际官网 16

    此时,差别就很明显了。上面的长得像马桶盖子, 而后面长得像操场跑道。

    金沙国际官网 17

    为什么呢?50%成为“马桶盖子”还好理解,宽度和高度分别50%圆角化;但是后面明明圆角300像素,比占据高度需要的圆角大小值要高出不少,为什么还是直的呢?哈哈,实际上就是因为太大了,所以才会变成的“操场跑道”。

    没错,因为值大了,要弄清此问题,有必要深入下。不行了,上年纪了,困了,去洗澡睡觉了明天继续。

    White space不仅是空格符那么简单

    初看之下以为就是空格键,其实white space是一组空白字符和换行符组成。查看unicode字符集我们会发现有一大堆空白字符(如NO-BREAK SPACE等),但HTML只把ASCII space( )ASCII tab( )ASCII form feed(&#x000C)Zero-width space(​)纳入white space囊中,另外还将line break(换行符)carriage return( )line feed( )和它俩的组合纳入white space中。

    三、使用transform实现动画

    我们可能经常需要做一些动画,比如在做某些揭秘或者新手引导的效果时,会需要做一些将内容移入移出的操作。

    当然可能第一个想到的就是 css transition 只要过渡一下 left 值或者 bottom 的值就可以了。效果或许很快就会实现,但是当我们在一个页面频繁的做着这样的移入移出操作时,细心地我们放在手机中(6P)看一看,动画并不会很流畅,尤其是在某些低端机型上。

    我们换用 transform 来实现相同的效果:

    transition: left 2s ease-in-out; ---> transition: transform 2s ease-in-out; left: xxx; ---> transform: translate3d(xxx, yyy, zzz);

    1
    2
    transition: left 2s ease-in-out;  ---> transition: transform 2s ease-in-out;  
    left: xxx; ---> transform: translate3d(xxx, yyy, zzz);

    原因在于:

    • 简单的说页面的绘制并不是在单层的画面里完成的,这其中有渲染层合成层等概念。对 opacity 和 transform 应用了 CSS 动画的渲染层、有 3D 或者 perspective transform 的 CSS 属性的渲染层等满足一些条件的渲染层被称为合成层;
    • 合成层有自己的渲染上下文,并且交由 GPU 处理,比 CPU 要快;
    • 当页面需要重绘时,合成层的元素只会重绘自己层内的元素,而非整个页面;

    优化过后再放在设备里查看,可以感受到效果明显的提升。其实这里就做到了上面提到的,节省了layout和paint。

    四、border-radius单值表现深入

    由于我们平时使用border-radius绝大多数情况是都单值,例如border-radius: 300px,于是,久而久之可那会忽略这样一个事实,那就是border-radius单值实际上是一种简写。就跟padding:300pxborder-width:300px是一样的,是各个方位等值时候的一种简化书写形式。但是,和一般的可简写CSS属性相比,border-radius要比看上去的复杂的多,表面上是琅琊山伯爵,实际上是当年大梁的贵族少年。

    我们将border-radius: 300px还原成其整容前的模样,结果是:

    CSS

    border-radius: 300px 300px 300px 300px/300px 300px 300px 300px;

    1
    border-radius: 300px 300px 300px 300px/300px 300px 300px 300px;

    我勒个擦,一副把七大姑八大婆都跳出来的即视感,这么这个多~~

    金沙国际官网 18

    虽然看上去都是300px, 长得好像一样,实际上,表示的含义各不相同,翻译成普通话就是:

    CSS

    border-radius: 左上角水平圆角半径大小 右上角水平圆角半径大小 右下角水平圆角半径大小 左下角水平圆角半径大小/左上角垂直圆角半径大小 右上角垂直圆角半径大小 右下角垂直圆角半径大小 左下角垂直圆角半径大小;

    1
    border-radius: 左上角水平圆角半径大小 右上角水平圆角半径大小 右下角水平圆角半径大小 左下角水平圆角半径大小/左上角垂直圆角半径大小 右上角垂直圆角半径大小 右下角垂直圆角半径大小 左下角垂直圆角半径大小;

    也就是斜杠前的是水平方向,斜杠后面的是垂直方向。

    虽然border-radiusborder-width/border-color等都是border打头的,但是,两者缩写与方位的表示确实不一样的。传统的边框属性border四个值分别表示上边框,右边框,下边框,左边框。但是,border-radius指的则是角落,所以,我们眼睛的关注点,需要移动下,从边框到角落(如下图所示)(每个方位都如此逆时针移动)。

    金沙国际官网 19

    都是最多4个值,1~3个缩写的规则也是一样的(一个是边,一个是角),不赘述。

    那上面提到的“水平/垂直”又是什么鬼呢?

    对于正圆,我们基本上很少提“水平半径”和“垂直半径”,因为,半径都是一样长。但是,对于标准椭圆,那就不一样了,因为存在最长半径和最小半径。在web中,圆角的水平半径指的就是椭圆的水平半径,垂直半径就是椭圆下图所示的垂直半径:
    金沙国际官网 20

    一个水平半径和一个垂直半径所夹起的那1/4段圆弧就是我们平时看的的圆角呈现,如下变色显示:

    金沙国际官网 21

    demo
    一例胜千图,为了方便大家感受下八大婆的具体行为,我特意紧承上面的例子,制作了个可操作的实时圆角和代码的例子。

    您可以狠狠地点击这里:CSS3 border-radius圆角各个属性值作用demo

    金沙国际官网 22

    OK, 为了演示水平垂直半径,我们现在先重置0,然后让水平1和垂直1都是300像素,如下图所示:
    金沙国际官网 23

    大家会看到,左上角出现了圆弧,那这个圆弧是怎么来的呢?我们画个圈圈辅助下~

    金沙国际官网 24

    金沙国际官网 25

    大家发现没,原本设置的是300像素*300像素,结果最后显示的却是200像素*200像素半径下的圆弧效果,这显然不符合认知啊!!

    实际上是这样的,CSS3圆角除了大值特性,还有一个等比例特性,就是水平半径和垂直半径的比例是恒定不变的。

    回到上面例子,由于我们的元素占据宽度200像素,高度300像素。所以,根据大值特性,水平方向的300像素只能按照200像素半径渲染;再根据等比例特性,虽然垂直方向理论上的最大半径是300像素,但是受制于当初设定的300px*300px1:1比例,垂直方向最终渲染的半径大小也是200像素。于是,我们最后得到的只是一个200像素*200像素的圆弧。

    第三节末尾所提到的“反而因为值设大了”就是指的这个。

    可能有人会疑问,那该如何设置才能实现等同于border-radius:50%的效果呢。哈哈,如果你理解了上面的内容,其实就很简单了,最关键的一点就是比例关系。我们的元素占据的尺寸是200像素*300像素。所以,只要让水平半径和垂直半径保持2:3的比例就可以了,然后,可以利用“大值特性”设一个你认为安全的值就可以了。

    比方说2倍尺寸border-radius: 400px/600px, 如下代码和效果:

    CSS

    .radius-test4 { width: 100px; height: 200px; border: 50px solid #cd0000; border-radius: 400px/600px; }

    1
    .radius-test4 { width: 100px; height: 200px; border: 50px solid #cd0000; border-radius: 400px/600px; }

    XHTML

    <div class="radius-test4"></div>

    1
    <div class="radius-test4"></div>

    金沙国际官网 26

    是不是搞明白原理之后,之前晕头转向的表现是不是分分钟就理解了哈!

    inter-word space——White space的用途之一

    西文是以空格来分隔单词的,而汉字间则无需空格分隔,但为了统一西文、东亚和CJK的排版,于是抽象出一个名为inter-word space的概念用于分隔词义单元,white space则作为inter-word space的值域,而定义域就是语言信息。如西文以ASCII SPACE作为inter-word space,而泰文则以Zero-width space作为inter-word space,汉语则没有inter-word space,所以word-spacing属性不影响汉字间的距离,本来无一物何处惹尘埃呢。字形、单词间的水平距离

    四、从css到canvas,使用requestAnimationFrame

    现在css的动画越来越好用,也能满足越来越多的需求。但在某些复杂的需求中我们可能还是要求助于js。

    比如说我这里实现的一个半圆的动画:[半圆progress] [Source Code]。看起来使用css动画就完全可以满足我的需求,但是当需求变化的时候,我们也只能拥抱变化了。

     

    **使用requestAnimationFrame**

    [圆弧progress][Source Code] 这里用canvas实现了自定义弧度圆弧的增长动画。

    这里我们借助这个动画效果看一下是如何使用canvas和requestAnimationFrame来实现流畅的逐帧动画的。

    window.requestAnimationFrame 是一个专门为动画而生的 web API 。它通知浏览器在页面重绘前执行你的回调函数。通常来说被调用的频率是每秒60次。

    假设我们的页面上有一个动画效果,如果我们想保证每一帧的顺利绘制,那么我们就需要requestAnimationFrame来保证我们的绘制时机了。

    很多框架和示例代码都是用setTimeoutsetInterval来实现页面中的动画效果,比如jQuery中的animation。这种实现方式的问题是,你在setTimeoutsetInterval中指定的回调函数的执行时机是无法保证的。它将在这一帧动画的_某个时间点_被执行,很可能是在帧结束的时候。这就意味这我们可能失去这一帧的信息。

    金沙国际官网 27

     

    **requestAnimationFrame的其他高能用法**

    根据requestAnimationFrame的特性,其实我们还可以在很多别的想不到的地方来一显身手。

    • 动画:也是它的主要用途,它将我们动画的执行时机和执行频率交由浏览器决定,以得到更好的性能;
    • 函数节流:requestAnimationFrame 的执行频率(一帧)是16.67ms,利用这一个特征就可以做到函数节流,避免高频事件在一帧内做多余的无用功的函数执行,例:
    JavaScript
    
    var $box = $('#J_Test'), $point = $box.find('b');
    $box.on('mouseenter',function(e){ requestAnimationFrame(function(){
    $point.css({ top : e.pageY, left : e.pageX }) }); });
    
    <table>
    <colgroup>
    <col style="width: 50%" />
    <col style="width: 50%" />
    </colgroup>
    <tbody>
    <tr class="odd">
    <td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
    <div class="crayon-num" data-line="crayon-5b8f6d19187bb345735832-1">
    1
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d19187bb345735832-2">
    2
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6d19187bb345735832-3">
    3
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d19187bb345735832-4">
    4
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6d19187bb345735832-5">
    5
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d19187bb345735832-6">
    6
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6d19187bb345735832-7">
    7
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d19187bb345735832-8">
    8
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6d19187bb345735832-9">
    9
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d19187bb345735832-10">
    10
    </div>
    </div></td>
    <td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
    <div id="crayon-5b8f6d19187bb345735832-1" class="crayon-line">
    var $box = $('#J_Test'),
    </div>
    <div id="crayon-5b8f6d19187bb345735832-2" class="crayon-line crayon-striped-line">
          $point = $box.find('b');
    </div>
    <div id="crayon-5b8f6d19187bb345735832-3" class="crayon-line">
    $box.on('mouseenter',function(e){
    </div>
    <div id="crayon-5b8f6d19187bb345735832-4" class="crayon-line crayon-striped-line">
      requestAnimationFrame(function(){
    </div>
    <div id="crayon-5b8f6d19187bb345735832-5" class="crayon-line">
          $point.css({
    </div>
    <div id="crayon-5b8f6d19187bb345735832-6" class="crayon-line crayon-striped-line">
              top : e.pageY,
    </div>
    <div id="crayon-5b8f6d19187bb345735832-7" class="crayon-line">
              left : e.pageX
    </div>
    <div id="crayon-5b8f6d19187bb345735832-8" class="crayon-line crayon-striped-line">
          })
    </div>
    <div id="crayon-5b8f6d19187bb345735832-9" class="crayon-line">
      });
    </div>
    <div id="crayon-5b8f6d19187bb345735832-10" class="crayon-line crayon-striped-line">
    });
    </div>
    </div></td>
    </tr>
    </tbody>
    </table>
    
    • 分帧初始化:同样利用一帧的执行时间将模块的初始化或渲染函数分散到不同的帧中来执行,这样每个模块都有16.67ms的执行时间,而不是一股脑的堆在那里等着执行;
    JavaScript
    
    var rAF = window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame || function(c) { setTimeout(c, 1
    / 60 * 1000); }; function render() {
    self.$container.html(itemHtml);
    self.$container.find('.J_LazyLoad').lazyload(); } rAF(render);
    
    <table>
    <colgroup>
    <col style="width: 50%" />
    <col style="width: 50%" />
    </colgroup>
    <tbody>
    <tr class="odd">
    <td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
    <div class="crayon-num" data-line="crayon-5b8f6d19187bf045103677-1">
    1
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d19187bf045103677-2">
    2
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6d19187bf045103677-3">
    3
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d19187bf045103677-4">
    4
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6d19187bf045103677-5">
    5
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d19187bf045103677-6">
    6
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6d19187bf045103677-7">
    7
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d19187bf045103677-8">
    8
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6d19187bf045103677-9">
    9
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d19187bf045103677-10">
    10
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6d19187bf045103677-11">
    11
    </div>
    </div></td>
    <td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
    <div id="crayon-5b8f6d19187bf045103677-1" class="crayon-line">
    var rAF = window.requestAnimationFrame ||  window.webkitRequestAnimationFrame || 
    </div>
    <div id="crayon-5b8f6d19187bf045103677-2" class="crayon-line crayon-striped-line">
            function(c) {
    </div>
    <div id="crayon-5b8f6d19187bf045103677-3" class="crayon-line">
                setTimeout(c, 1 / 60 * 1000);
    </div>
    <div id="crayon-5b8f6d19187bf045103677-4" class="crayon-line crayon-striped-line">
            };
    </div>
    <div id="crayon-5b8f6d19187bf045103677-5" class="crayon-line">
     
    </div>
    <div id="crayon-5b8f6d19187bf045103677-6" class="crayon-line crayon-striped-line">
        function render() {
    </div>
    <div id="crayon-5b8f6d19187bf045103677-7" class="crayon-line">
           self.$container.html(itemHtml);
    </div>
    <div id="crayon-5b8f6d19187bf045103677-8" class="crayon-line crayon-striped-line">
           self.$container.find('.J_LazyLoad').lazyload();
    </div>
    <div id="crayon-5b8f6d19187bf045103677-9" class="crayon-line">
        }
    </div>
    <div id="crayon-5b8f6d19187bf045103677-10" class="crayon-line crayon-striped-line">
     
    </div>
    <div id="crayon-5b8f6d19187bf045103677-11" class="crayon-line">
        rAF(render);
    </div>
    </div></td>
    </tr>
    </tbody>
    </table>
    

    五、border-radius与图形构建

    border-radius支持的可变值足有八个(在本文戏称为八大婆,简称八婆),基本上,每一个值的变化,都会呈现不同的图形,例如,下面这样,我东拖拖,西拖拖,拖出了个英文字母D:

    金沙国际官网 28

    或者我们可以只留一个方向或2侧的边框,可以拉出一些惊喜的效果,如下gif截图:
    金沙国际官网 29

    诸如很多的,就看你的脑洞和技术了。

    本身CSS的border属性就可以构建三角,梯形等等,现在,再配合多变的border-radius,我们可以发挥的空间就更大了。但是,要想用得得心应手,还是需要深入理解border-radius的各个表现。

    one-div上就有些图标就是利用了border-radius实现的,大家有兴趣可以瞅瞅,看看人家怎么巧妙使用border-radius的,目的在于学习理解border-radius,倒不是效果本身。知其根本自然上层信手拈来。

    White space collapsing的玩法

    兼容性问题又来了,因为各浏览器的实现均不尽相同。

    XHTML

    <style type="text/css"> span{background:#F60;} </style> <div><span> before</span></div> <div><span> before</span></div> <div><span>after </span></div> <div><span>after </span></div> <div><span>after </span></div> <div><span>one two</span></div> <div><span>one two</span></div> <div><span> </span></div>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <style type="text/css">
      span{background:#F60;}
    </style>
    <div><span>
     
    before</span></div>
    <div><span>
     
    before</span></div>
    <div><span>after
     
    </span></div>
    <div><span>after
     
    </span></div>
    <div><span>after
    </span></div>
    <div><span>one
    two</span></div>
    <div><span>one
    two</span></div>
    <div><span> &#x000C;
    </span></div>

    ** chrome43 **

    1. 对于起始标签与第一个non-white-space字符间的white-space字符串,以carriage return( )作为white-space合并单元的起始符,最后保留各合并单元的合并结果。
    2. 结束标签与最后一个non-white-space字符间的white-space字符串,以carriage return( )作为white-space合并单元的结束符,最后保留各合并单元的合并结果。
    3. 词义单元间的white-space字符串,以carriage return( )作为white-space合并单元的分界符,最后保留各合并单元的合并结果。
    4. 标签内仅包含white-space字符串,那么这些white-space字符串将被忽略。

    金沙国际官网 30
    ** FF5.0 **

    1. 对于起始标签与第一个non-white-space字符间和结束标签与最后一个non-white-space字符间的white-space字符串将被忽略。
    2. 词义单元间的white-space字符串,以carriage return( )作为white-space合并单元的分界符,最后保留各合并单元的合并结果。
    3. 标签内仅包含white-space字符串,那么这些white-space字符串将被忽略。

    金沙国际官网 31
    ** IE8+ **

    1. 对于起始标签与第一个non-white-space字符间和结束标签与最后一个non-white-space字符间的white-space字符串将被忽略。
    2. 词义单元间的white-space字符串,合并为1个(ASCII space)字符。
    3. 标签内仅包含white-space字符串,那么这些white-space字符串将被忽略。

    金沙国际官网 32

    ** IE5.5/6/7 **

    1. 对于起始标签与第一个non-white-space字符间的white-space字符串将被忽略。
    2. 结束标签与最后一个non-white-space字符间的white-space字符串,合并为1个(ASCII space)字符。
    3. 词义单元间的white-space字符串,合并为1个(ASCII space)字符。
    4. 标签内仅包含white-space字符串,那么这些white-space字符串将被忽略。

    金沙国际官网 33
    合并单元:合并单元包含0到N个white-space字符串,最终合并为0到1个white-space字符
    SGML描述B.3.1 Line breaks

    specifies that a line break immediately following a start tag must be ignored, as must a line break immediately before an end tag. This applies to all HTML elements without exception.

    XHTML

    <A>My favorite Website</A> <A> My favorite Website </A>

    1
    2
    3
    4
    <A>My favorite Website</A>
    <A>
    My favorite Website
    </A>

    望文生义翻译法:标签与正文间的line breaks要被忽略掉!也就是上下两种HTML格式的渲染效果应该一致。实际上除了IE5.5/6/7外其他浏览器均遵守之一规定的。也许你会说上面的实验不是已经证明chrome43不遵守这个法则吗?其实

    XHTML

    <A> My favorite Website </A>

    1
    2
    3
    <A>
    My favorite Website
    </A>

    HTML格式等价于<A>#x000A;My favorite Website#x000A;</A>而不是<A>#x000D;#x000A;My favorite Website#x000D;#x000A;</A>。现在大家都清楚了吧:)

    绕到这里我想大家都有点晕了,到底这个跟问题2有啥关系呢?先不要着急嘛,我们先记住两点:

    1. IE5.5/6/7中”结束标签与最后一个non-white-space字符间的white-space字符串,合并为1个(ASCII space)字符”;
    2. IE5.5/6/7中仅字符(串)可以作为词义单元,而IE8+中inline-level element也作为词义单元。
    XHTML
    
    &lt;span class="bk1 item"&gt;&lt;/span&gt; &lt;span class="bk2
    item"&gt;&lt;/span&gt; &lt;br/&gt;&lt;br/&gt; &lt;span class="bk1
    item"&gt;bk1&lt;/span&gt; &lt;span class="bk2 item"&gt;&lt;/span&gt;
    
    <table>
    <colgroup>
    <col style="width: 50%" />
    <col style="width: 50%" />
    </colgroup>
    <tbody>
    <tr class="odd">
    <td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
    <div class="crayon-num" data-line="crayon-5b8f6d17e73c7306787940-1">
    1
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d17e73c7306787940-2">
    2
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6d17e73c7306787940-3">
    3
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d17e73c7306787940-4">
    4
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6d17e73c7306787940-5">
    5
    </div>
    </div></td>
    <td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
    <div id="crayon-5b8f6d17e73c7306787940-1" class="crayon-line">
    &lt;span class=&quot;bk1 item&quot;&gt;&lt;/span&gt;
    </div>
    <div id="crayon-5b8f6d17e73c7306787940-2" class="crayon-line crayon-striped-line">
    &lt;span class=&quot;bk2 item&quot;&gt;&lt;/span&gt;
    </div>
    <div id="crayon-5b8f6d17e73c7306787940-3" class="crayon-line">
    &lt;br/&gt;&lt;br/&gt;
    </div>
    <div id="crayon-5b8f6d17e73c7306787940-4" class="crayon-line crayon-striped-line">
    &lt;span class=&quot;bk1 item&quot;&gt;bk1&lt;/span&gt;
    </div>
    <div id="crayon-5b8f6d17e73c7306787940-5" class="crayon-line">
    &lt;span class=&quot;bk2 item&quot;&gt;&lt;/span&gt;
    </div>
    </div></td>
    </tr>
    </tbody>
    </table>
    
    
    IE5.5/6/7下等价于  
    
    
    XHTML
    
    &lt;span&gt; &lt;/span&gt; &lt;br/&gt;&lt;br/&gt; &lt;span&gt;bk1
    &lt;/span&gt;
    
    <table>
    <colgroup>
    <col style="width: 50%" />
    <col style="width: 50%" />
    </colgroup>
    <tbody>
    <tr class="odd">
    <td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
    <div class="crayon-num" data-line="crayon-5b8f6d17e73ca280682483-1">
    1
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d17e73ca280682483-2">
    2
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6d17e73ca280682483-3">
    3
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d17e73ca280682483-4">
    4
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6d17e73ca280682483-5">
    5
    </div>
    </div></td>
    <td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
    <div id="crayon-5b8f6d17e73ca280682483-1" class="crayon-line">
    &lt;span&gt;
    </div>
    <div id="crayon-5b8f6d17e73ca280682483-2" class="crayon-line crayon-striped-line">
    &lt;/span&gt;
    </div>
    <div id="crayon-5b8f6d17e73ca280682483-3" class="crayon-line">
    &lt;br/&gt;&lt;br/&gt;
    </div>
    <div id="crayon-5b8f6d17e73ca280682483-4" class="crayon-line crayon-striped-line">
    &lt;span&gt;bk1
    </div>
    <div id="crayon-5b8f6d17e73ca280682483-5" class="crayon-line">
    &lt;/span&gt;
    </div>
    </div></td>
    </tr>
    </tbody>
    </table>
    
    
    对比一下上面的规则,空隙自然就有了。  
    IE8+下等价于  
    
    
    XHTML
    
    &lt;span&gt;&nbsp; &nbsp;&lt;/span&gt; &lt;br/&gt;&lt;br/&gt;
    &lt;span&gt;&nbsp; &nbsp;&lt;/span&gt;
    
    <table>
    <colgroup>
    <col style="width: 50%" />
    <col style="width: 50%" />
    </colgroup>
    <tbody>
    <tr class="odd">
    <td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
    <div class="crayon-num" data-line="crayon-5b8f6d17e73cd347104087-1">
    1
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d17e73cd347104087-2">
    2
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6d17e73cd347104087-3">
    3
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d17e73cd347104087-4">
    4
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6d17e73cd347104087-5">
    5
    </div>
    </div></td>
    <td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
    <div id="crayon-5b8f6d17e73cd347104087-1" class="crayon-line">
    &lt;span&gt;&amp;nbsp;
    </div>
    <div id="crayon-5b8f6d17e73cd347104087-2" class="crayon-line crayon-striped-line">
    &amp;nbsp;&lt;/span&gt;
    </div>
    <div id="crayon-5b8f6d17e73cd347104087-3" class="crayon-line">
    &lt;br/&gt;&lt;br/&gt;
    </div>
    <div id="crayon-5b8f6d17e73cd347104087-4" class="crayon-line crayon-striped-line">
    &lt;span&gt;&amp;nbsp;
    </div>
    <div id="crayon-5b8f6d17e73cd347104087-5" class="crayon-line">
    &amp;nbsp;&lt;/span&gt;
    </div>
    </div></td>
    </tr>
    </tbody>
    </table>
    
    
    inline-level
    element整体作为词义单元,从外部看根本不用管里面具体字符串是什么。
    

    五、分析你的无线页面

    我们还是借助这个例子,[圆弧progress][Source Code] 简单的看下如何分析无线页面的性能。

    这里的实现思路是这样的:

    1 - 确定圆弧的起始弧度(0.75PI)和终止弧度(根据当前分值占上限分值的比例计算,最大为2.25PI); 2 - 随着时间的增长逐帧绘制终点位置 requestAnimationFrame(draw); 3 - 根据每一帧的终点位置的 cos 和 sin 值得到跟随的圆圈坐标并绘制;

    1
    2
    3
    1 - 确定圆弧的起始弧度(0.75PI)和终止弧度(根据当前分值占上限分值的比例计算,最大为2.25PI);
    2 - 随着时间的增长逐帧绘制终点位置 requestAnimationFrame(draw);
    3 - 根据每一帧的终点位置的 cos 和 sin 值得到跟随的圆圈坐标并绘制;

    但当然,实现完成只是走了第一步,我们来借助Chrome Timeline来分析一下这个简单的页面。

    金沙国际官网 34

     

    1. 看一下帧率,在进度动画进行的时候,看起来帧率不错,没有产生掉帧的现象,说明每一帧的耗时都还ok,我的动画基本不会卡顿;
    2. 在函数的执行和调用那一栏中,可能有问题的部分右上角会被标红,还可以查看可能存在问题的细节;这里提示我页面强制重排了,仔细观察下面的 Bottom-up tab 中可以定位到具体的代码。

    使用Timeline就可以看到页面的几种指标,帧率,js执行等等。就可以针对出现问题的帧下手优化。

    在分析页面性能的时候,严重推荐阅读:[] .timeline的详细使用说明,它真的很强大,能帮助我们分析到页面的各个方面的问题。

    1 赞 1 收藏 评论

    金沙国际官网 35

    本文由金沙国际官网发布于web前端,转载请注明出处:金沙国际官网秋月何时了,无线页面动画优化实

    关键词:

上一篇:研究首屏时间,CSS代码重构与优化之路

下一篇:没有了