您的位置:奥门新浦京网址 > Wed前段 > JS原生Date类型方法的一些冷知识,图片资源

JS原生Date类型方法的一些冷知识,图片资源

发布时间:2019-10-24 03:06编辑:Wed前段浏览(92)

    JS原生Date类型方法的一些冷知识

    2015/09/07 · JavaScript · Date

    原文出处: chitanda   

    一个多月没更新了- -偷懒中。这个东西其实很早之前就在整理了,不过后来发现自己不少地方没弄明白,然后就一直卡那边了(其实就是不想写吧),想了下反正是给自己熟悉js的原生API而已,所以也没必要太钻牛角尖,也不一定要多完整,因此就当是Date()函数的一个冷门知识点小补充吧。这篇文章主要讲Date()的字符串与时间戳转换以及用户时间本地化,可能内容上比较乱(不然也不会卡我一个月时间了),见谅

    ps:由于 Date() 是js原生函数,不同浏览器的解析器对其实现方式并不同,所以返回值也会有所区别。本文测试未特别申明浏览器的情况下,均是指 win7 x64+chrome 44.0.2403.155 (正式版本) m (32 位) 版本

    SVG 线条动画入门

    2016/12/29 · HTML5 · SVG, 动画

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

    通常我们说的 Web 动画,包含了三大类。

    • CSS3 动画
    • javascript 动画(canvas)
    • html 动画(SVG)

    个人认为 3 种动画各有优劣,实际应用中根据掌握情况作出取舍,本文讨论的是我认为 SVG 中在实际项目中非常有应用价值 SVG 线条动画。

    图片资源 Base64 化在 H5 页面里有用武之地吗

    2016/12/15 · HTML5 · Base64

    原文出处: 凹凸实验室   

    奥门新浦京网址 1

    将图片资源转至base64格式后可直接放入页面作为首屏直出,也可以放入css文件中,减少请求,以加快首屏的呈现速度。
    不过图片base64化,将带来一个臃肿的html或css文件,是否会影响页面的渲染性能,浏览器又支持如何呢?

    Date()与new Date()的区别

    Date() 直接返回当前时间字符串,不管参数是number还是任何string

    JavaScript

    Date(); Date('sssss'); Date(1000); //Fri Aug 21 2015 15:46:21 GMT+0800 (中国标准时间)

    1
    2
    3
    4
    Date();
    Date('sssss');
    Date(1000);
    //Fri Aug 21 2015 15:46:21 GMT+0800 (中国标准时间)

    而 new Date() 则是会根据参数来返回对应的值,无参数的时候,返回当前时间的字符串形式;有参数的时候返回参数所对应时间的字符串。 new Date() 对参数不管是格式还是内容都要求,且只返回字符串,

    JavaScript

    new Date(); //Fri Aug 21 2015 15:51:55 GMT+0800 (中国标准时间) new Date(1293879600000); new Date('2011-01-01T11:00:00') new Date('2011/01/01 11:00:00') new Date(2011,0,1,11,0,0) new Date('jan 01 2011,11 11:00:00') new Date('Sat Jan 01 2011 11:00:00') //Sat Jan 01 2011 11:00:00 GMT+0800 (中国标准时间) new Date('sss'); new Date('2011/01/01T11:00:00'); new Date('2011-01-01-11:00:00') new Date('1293879600000'); //Invalid Date new Date('2011-01-01T11:00:00')-new Date('1992/02/11 12:00:12') //596069988000

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    new Date();
    //Fri Aug 21 2015 15:51:55 GMT+0800 (中国标准时间)
     
    new Date(1293879600000);
    new Date('2011-01-01T11:00:00')
    new Date('2011/01/01 11:00:00')
    new Date(2011,0,1,11,0,0)
    new Date('jan 01 2011,11 11:00:00')
    new Date('Sat Jan 01 2011 11:00:00')
    //Sat Jan 01 2011 11:00:00 GMT+0800 (中国标准时间)
     
    new Date('sss');
    new Date('2011/01/01T11:00:00');
    new Date('2011-01-01-11:00:00')
    new Date('1293879600000');
    //Invalid Date
     
    new Date('2011-01-01T11:00:00')-new Date('1992/02/11 12:00:12')
    //596069988000

    从上面几个测试结果可以很容易发现

    1. new Date() 在参数正常的情况只会返回当前时间的字符串(且是当前时区的时间)
    2. new Date() 在解析一个具体的时间的时候,对参数有较严格的格式要求,格式不正确的时候会直接返回Invalid Date,比如将 number 类的时间戳转换成 string 类的时候也会导致解析出错
    3. 虽然 new Date() 的返回值是字符串,然而两个 new Date() 的结果字符串是可以直接相减的,结果为相差的毫秒数。

    那么, new Date() 能接受的参数格式到底是什么标准呢?(相对于严格要求的多参数传值方法。非严格的单参数(数字日期表示格式)更常用且更容易出错,所以下文只考虑单参数数字时间字符串转换的情况)

    表示格式)更常用且更容易出错,所以下文只考虑单参数数字时间字符串转换的情况)


    举个栗子

    SVG 线条动画,在一些特定的场合下可以解决使用 CSS 无法完成的动画。尤其是在进度条方面,看看最近项目里的一个小需求,一个这种形状的进度条:

    奥门新浦京网址 2

    把里面的进度条单独拿出来,也就是需要实现这样一个效果:

    奥门新浦京网址 3

    脑洞大开一下,使用 CSS3 如何实现这样一个进度条呢。

    CSS3 是可以做到的,就是很麻烦。但是如果采用 SVG 的话,迎刃而解。

    See the Pen 不规则进度条 by Chokcoco (@Chokcoco) on CodePen.

    我们假定你在阅读本文的时候有了一定的 SVG 基础,上面代码看看就懂了,好了,本文到此结束。

    奥门新浦京网址 4

    好吧,还是一步一步解释,上面进度条的主要 SVG 代码如下:

    <svg version="1.1" xmlns="" xmlns:xlink="" xml:space="preserve" class="circle-load-rect-svg" width="300" height="200" viewbox="0 0 600 400"> <polyline points="5 5, 575 5, 575 200, 5 200" class="g-rect-path"/> <polyline points="5 5, 575 5, 575 200, 5 200" class="g-rect-fill"/> </svg>

    1
    2
    3
    4
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" class="circle-load-rect-svg" width="300" height="200" viewbox="0 0 600 400">
      <polyline points="5 5, 575 5, 575 200, 5 200" class="g-rect-path"/>
      <polyline points="5 5, 575 5, 575 200, 5 200" class="g-rect-fill"/>
    </svg>

    如何统计?

    通过Navigation Timing记录的关键时间点来统计页面完成所用的时间,并通过Chrome开发工具来跟踪细节

    JavaScript

    var timing = window.performance.timing timing.domLoading //浏览器开始解析 HTML 文档第一批收到的字节 timing.domInteractive // 浏览器完成解析并且所有 HTML 和 DOM 构建完毕timing.domContentLoadedEventStart //DOM 解析完成后,网页内资源加载开始的时间 timing.domContentLoadedEventEnd //DOM 解析完成后,网页内资源加载完成的时间(如 JS 脚本加载执行完毕) timing.domComplete //网页上所有资源(图片等) 下载完成,且准备就绪的时间

    1
    2
    3
    4
    5
    var timing = window.performance.timing
    timing.domLoading //浏览器开始解析 HTML 文档第一批收到的字节
    timing.domInteractive // 浏览器完成解析并且所有 HTML 和 DOM 构建完毕timing.domContentLoadedEventStart //DOM 解析完成后,网页内资源加载开始的时间
    timing.domContentLoadedEventEnd //DOM 解析完成后,网页内资源加载完成的时间(如 JS 脚本加载执行完毕)
    timing.domComplete //网页上所有资源(图片等) 下载完成,且准备就绪的时间

    以上定义来自chrome官方文档,在其它环境下也许会有差异,从测试结果看,下面的build时间在android+微信环境中一直是0,对此可能是因为渲染机制差别,此处不做深入测试。除osx+chrome之外环境的数据仅作参考。

    JavaScript

    build = timing.domComplete - timing.domContentLoadedEventStart //间隔记录网页内资源加载和呈现时间。 complete = timing.domComplete - timing.domLoading //页面接收到数据开始到呈现完毕的总时间。

    1
    2
    build = timing.domComplete - timing.domContentLoadedEventStart //间隔记录网页内资源加载和呈现时间。
    complete = timing.domComplete - timing.domLoading //页面接收到数据开始到呈现完毕的总时间。

    new Date()解析所支持的参数格式标准

    SVG 为何

    可缩放矢量图形,即SVG,是W3C XML的分枝语言之一,用于标记可缩放的矢量图形。(摘自MDN奥门新浦京网址,)

    上面代码中,先谈谈 svg 标签:

    • version: 表示 `` 的版本,目前只有 1.0,1.1 两种
    • xmlnshttp://www.w3.org/2000/svg 固定值
    • xmlns:xlinkhttp://www.w3.org/1999/xlink 固定值
    • xml:spacepreserve 固定值,上述三个值固定,表示命名空间,当数据单独存在svg文件内时,这3个值不能省略
    • class:就是我们熟悉的 class
    • width | height: 定义 svg 画布的大小
    • viewbox: 定义了画布上可以显示的区域,当 viewBox 的大小和 svg 不同时,viewBox 在屏幕上的显示会缩放至 svg 同等大小(暂时可以不用理解)

    有了 svg 标签,我们就可以愉快的在内部添加 SVG 图形了,上面,我在 svg 中定义了两个 polyline 标签。

    场景1,内嵌至css文件中

    时间戳格式

    这个是最简单的也是最不容易出错的。当然唯一的缺点大概就是对开发者不直观,无法一眼看出具体日期。
    需要注意的以下两点:

    1. js内的时间戳指的是当前时间到1970年1月1日00:00:00 UTC对应的毫秒数,和unix时间戳不是一个概念,后者表示秒数,差了1000倍
    2. class="crayon-syntax crayon-syntax-inline crayon-theme-github crayon-theme-github-inline crayon-font-monaco" style="font-size: 13px !important; line-height: 15px !important;font-size: 13px !important;"> class="crayon-pre crayon-code" style="font-size: 13px !important; line-height: 15px !important;font-size: 13px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"> class="crayon-r">new class="crayon-r">Date( class="crayon-v">timestamp class="crayon-sy">) 中的时间戳必须是number格式, class="crayon-syntax crayon-syntax-inline crayon-theme-github crayon-theme-github-inline crayon-font-monaco" style="font-size: 13px !important; line-height: 15px !important;font-size: 13px !important;"> class="crayon-pre crayon-code" style="font-size: 13px !important; line-height: 15px !important;font-size: 13px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"> class="crayon-t">string 会返回Invalid Date。所以比如new Date('11111111')这种写法是错的

    SVG 基本形状

    polyline:是SVG的一个基本形状,用来创建一系列直线连接多个点。

    其实,polyline 是一个比较不常用的形状,比较常用的是pathrectcircle 等。这里我使用polyline 的原因是需要使用 stroke-linejoin 和 stroke-linecap 属性,在线段连接处创建圆滑过渡角。

    SVG 中定义了一些基本形状,在继续下文之前,建议点进去先了解一些基本图形的标签及写法:

    奥门新浦京网址 5

    1、原生引入图片链接做背景图

    一张大小为50kbjpg格式图片,应用到9×15=135个dom做背景图,模拟雪碧图的模式,多个节点引用同一张图片做背景,(示例)如图。
    奥门新浦京网址 6
    测试环境:Mac OS X EI Capitan 10.xx + Chrome 48.xx
    其它辅助测试机器: iPhone 6 plus iOS 9.xx; 魅族Note Android 4.xx

    实际使用过程中,其它版本和机型的Android手机还有待测试

    关闭缓存状态下,build:150ms | complete: 200ms(总时间受网络状态等因素影响,数据做比较用)
    奥门新浦京网址 7

    开启缓存状态下,build: 7ms | complete: 59ms(包括以下稳定状态下多次测试的平均值,截图为最接近平均值的状态,默认数据来自Mac+Chrome[48.XX版本])

    奥门新浦京网址 8

    测试环境 build(单位:ms) complete(单位:ms)
    OS X+Chrome 7 59
    iOS+微信 45 90
    OS X+Safari 50 100
    Android+微信 0 120

    时间数字字符串格式

    不大清楚这种该怎么描述,就是类似YYYY/MM/DD HH:mm:SS这种。下文以dateString代指。
    new Date(dateString)所支持的字符串格式需要满足RFC2822标准或者ISO 8601标准
    这两种标准对应的格式分别如下:

    1. RFC2822 标准日期字符串
    JavaScript
    
    YYYY/MM/DD HH:MM:SS ± timezon(时区用4位数字表示) // eg 1992/02/12
    12:23:22+0800
    
    <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-5b8f6c187675a314957670-1">
    1
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6c187675a314957670-2">
    2
    </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-5b8f6c187675a314957670-1" class="crayon-line">
    YYYY/MM/DD HH:MM:SS ± timezon(时区用4位数字表示)
    </div>
    <div id="crayon-5b8f6c187675a314957670-2" class="crayon-line crayon-striped-line">
    // eg 1992/02/12 12:23:22+0800
    </div>
    </div></td>
    </tr>
    </tbody>
    </table>
    
    >  RFC2822还有别的格式,不过上面这个是比较常用的(另外这标准太难啃了,实在没耐心啃完,所以也就没太深入)。RFC2822标准本身还有其他的非数字日期表达方式,不过不在这个话题讨论范围内了,略过
    
    1. ISO 8601标准日期字符串
    JavaScript
    
    YYYY-MM-DDThh:mm:ss ± timezone(时区用HH:MM表示) 1997-07-16T08:20:30Z
    //
    “Z”表示UTC标准时区,即"00:00",所以这里表示零时区的`1997年7月16日08时20分30秒`
    //转换成位于东八区的北京时间则为`1997年7月17日16时20分30秒`
    1997-07-16T19:20:30+01:00 //
    表示东一区的1997年7月16日19时20秒30分,转换成UTC标准时间的话是1997-07-16T18:20:30Z
    
    <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-5b8f6c187675d765819674-1">
    1
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6c187675d765819674-2">
    2
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6c187675d765819674-3">
    3
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6c187675d765819674-4">
    4
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6c187675d765819674-5">
    5
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6c187675d765819674-6">
    6
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6c187675d765819674-7">
    7
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6c187675d765819674-8">
    8
    </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-5b8f6c187675d765819674-1" class="crayon-line">
     YYYY-MM-DDThh:mm:ss ± timezone(时区用HH:MM表示)
    </div>
    <div id="crayon-5b8f6c187675d765819674-2" class="crayon-line crayon-striped-line">
     
    </div>
    <div id="crayon-5b8f6c187675d765819674-3" class="crayon-line">
     1997-07-16T08:20:30Z
    </div>
    <div id="crayon-5b8f6c187675d765819674-4" class="crayon-line crayon-striped-line">
     // “Z”表示UTC标准时区,即&quot;00:00&quot;,所以这里表示零时区的`1997年7月16日08时20分30秒`
    </div>
    <div id="crayon-5b8f6c187675d765819674-5" class="crayon-line">
     //转换成位于东八区的北京时间则为`1997年7月17日16时20分30秒`
    </div>
    <div id="crayon-5b8f6c187675d765819674-6" class="crayon-line crayon-striped-line">
     
    </div>
    <div id="crayon-5b8f6c187675d765819674-7" class="crayon-line">
     1997-07-16T19:20:30+01:00
    </div>
    <div id="crayon-5b8f6c187675d765819674-8" class="crayon-line crayon-striped-line">
     // 表示东一区的1997年7月16日19时20秒30分,转换成UTC标准时间的话是1997-07-16T18:20:30Z
    </div>
    </div></td>
    </tr>
    </tbody>
    </table>
    
    1. 日期和时间中间的T不可以被省略,一省略就出错。
    2. 虽然在chrome浏览器上时区也可以用+0100这种RFC2822的形式来表示,然而IE上不支持这种混搭写法,所以用ISO8601标准形式表示的时候时区要用+HH:MM

    单单从格式上来说,两者的区别主要在于分隔符的不同。不过需要注意的是,ISO 8601标准的兼容性比RFC2822差得多(比如IE8和iOS均不支持前者。我知道IE8很多人会无视,不过iOS也有这个坑的话,各位或多或少会谨慎点了吧?),所以一般情况下建议用RFC 2822格式的。
    不过需要注意的是,在未指定时区的前提下,对于只精确到day的日期字符串,RFC 2822返回结果是以当前时区的零点为准,而ISO8601返回结果则会以UTC时间的零点为标准进行解析。
    例如:

    JavaScript

    //RFC2822: new Date('1992/02/13') //Thu Feb 13 1992 00:00:00 GMT+0800 (中国标准时间) //ISO8601: new Date('1992-02-13') //Thu Feb 13 1992 08:00:00 GMT+0800 (中国标准时间)

    1
    2
    3
    4
    //RFC2822:
    new Date('1992/02/13') //Thu Feb 13 1992 00:00:00 GMT+0800 (中国标准时间)
    //ISO8601:
    new Date('1992-02-13') //Thu Feb 13 1992 08:00:00 GMT+0800 (中国标准时间)

     

    然而上面这个只是ES5的标准而已,在ES6里这两种形式都会变成当前时区的零点为基准1
    *不管你们崩溃没,反正我是已经想死了*
    关于跨浏览器的dataString解析情况,还可以参考这个页面:
    JavaScript and Dates, What a Mess!

    所以对于时间字符串对象,个人意见是要么用RFC2822形式,要么自己写个解析函数然后随便你传啥格式进来。


    SVG 线条动画

    好,终于到本文的重点了。

    奥门新浦京网址 9

    上面,我们给两个 polyline 都设置了 class,SVG 图形的一个好处就是部分属性样式可以使用 CSS 的方式书写,更重要的是可以配合 CSS 动画一起使用。

    上面,主要的 CSS 代码:

    .g-rect-path{ fill: none; stroke-width:10; stroke:#d3dce6; stroke-linejoin:round; stroke-linecap:round; } .g-rect-fill{ fill: none; stroke-width:10; stroke:#ff7700; stroke-linejoin:round; stroke-linecap:round; stroke-dasharray: 0, 1370; stroke-dashoffset: 0; animation: lineMove 2s ease-out infinite; } @keyframes lineMove { 0%{ stroke-dasharray: 0, 1350; } 100%{ stroke-dasharray: 1350, 1350; } }

    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
    27
    .g-rect-path{
        fill: none;
        stroke-width:10;
        stroke:#d3dce6;
        stroke-linejoin:round;
        stroke-linecap:round;
    }
     
    .g-rect-fill{
        fill: none;
        stroke-width:10;
        stroke:#ff7700;
        stroke-linejoin:round;
        stroke-linecap:round;
        stroke-dasharray: 0, 1370;
        stroke-dashoffset: 0;
        animation: lineMove 2s ease-out infinite;
    }
     
    @keyframes lineMove {
        0%{
            stroke-dasharray: 0, 1350;
        }
        100%{
            stroke-dasharray: 1350, 1350;
        }
    }

    这尼玛是什么 CSS?怎么除了 animation 全都不认识? 奥门新浦京网址 10

    莫慌,其实很多和 CSS 对比一下非常好理解,只是换了个名字:

    • fill:类比 css 中的 background-color,给 svg 图形填充颜色;
    • stroke-width:类比 css 中的 border-width,给 svg 图形设定边框宽度;
    • stroke:类比 css 中的 border-color,给 svg 图形设定边框颜色;
    • stroke-linejoin | stroke-linecap:上文稍微提到过,设定线段连接处的样式;
    • stroke-dasharray:值是一组数组,没数量上限,每个数字交替表示划线与间隔的宽度;
    • stroke-dashoffset:则是虚线的偏移量

    重点讲讲能够实现线条动画的关键属性 stroke-dasharray 。

    属性 stroke-dasharray 可控制用来描边的点划线的图案范式。

    它是一个和数列,数与数之间用逗号或者空白隔开,指定短划线和缺口的长度。如果提供了奇数个值,则这个值的数列重复一次,从而变成偶数个值。因此,5,3,2等同于5,3,2,5,3,2

    解释很苍白,直接看例子:

    See the Pen stroke-dasharray by Chokcoco (@Chokcoco) on CodePen.

    上面,填充进度条,使用了下面这个动画 :

    @keyframes lineMove { 0%{ stroke-dasharray: 0, 1350; } 100%{ stroke-dasharray: 1350, 1350; } }

    1
    2
    3
    4
    5
    6
    7
    8
    @keyframes lineMove {
        0%{
            stroke-dasharray: 0, 1350;
        }
        100%{
            stroke-dasharray: 1350, 1350;
        }
    }

    stroke-dasharray: 0, 1350;,表示线框短划线和缺口的长度分别为 0 和 1350,所以一开始整个图形都是被缺口占据,所以在视觉效果上长度为 0。

    然后过渡到 stroke-dasharray: 1350, 1350,表示线框短划线和缺口的长度分别为 1350 和 1350,因为整个图形的长度就是 1350,所以整个进度条会被慢慢填充满。

    掌握了这个技巧后,就可以使用 stroke-dasharray 和 stroke-dashoffset 制作很多不错的交互场景:

    2、引入base64格式图片做背景图

    将上面50kb大小的jpg图片转换为base64格式,加在css文件中。

    关闭缓存状态下,build:80ms | complete: 280ms

    奥门新浦京网址 11
    开启缓存状态下,build: 160ms | complete: 210ms

    奥门新浦京网址 12

    测试环境 build(单位:ms) complete(单位:ms)
    OS X+chrome 160 210
    iOS+微信 35 100
    OS X+Safari 9 90
    Android+微信 12 150

    时间格式化函数的效率

    这里的时间格式化值得是将时间字符串转换成毫秒数的过程。js原生的时间格式化函数有Date.parseDate.prototype.valueOfDate.prototype.getTimeNumber(Date)+Date(还有个Date.UTC方法,然而对参数要求严格,不能直接解析日期字符串,所以略过)
    这5个函数从功能上来说一模一样,但是具体的效率如何呢?我写了个检测页面,诸位也可以自己测试下。
    点击预览

    SVG 线条动画实现按钮交互

    奥门新浦京网址 13

    See the Pen svg线条动画实现按钮交互 by Chokcoco (@Chokcoco) on CodePen.

    3、调整图片体积

    调整上面图片的(压缩品质)体积,base64化后,对应的css文件大小也跟着改变

    图片大小 10kb 20kb 45kb 100kb 180kb
    对应css文件大小 27kb 42kb 76kb 150kb 260kb
    Rendering时间 30ms 46ms 81ms 156ms 258ms

    奥门新浦京网址 14

    本文由奥门新浦京网址发布于Wed前段,转载请注明出处:JS原生Date类型方法的一些冷知识,图片资源

    关键词: