所在的位置: js >> js优势 >> Chrome发布Priori

Chrome发布Priori

年4月26日发布的Chrome,有哪些新特性呢?

文章来自:阿里巴巴前端标准化组

TL;TR

Chrome正式发布了PriorityHints,用于指定页面资源的加载优先级,即fetchpriority属性,帮助浏览器根据优先级优化加载顺序,从而优化页面加载体验。

Chrome开始在安卓端试用FederatedCredentialsManagementAPI,旨在不使用第三方Cookie的情况下,实现第三方登录,为全面禁用第三方Cookie做准备。

详细解读PriorityHints

Chrome正式发布了PriorityHints,用于指定页面资源的加载优先级,即fetchpriority属性,帮助浏览器根据优先级优化加载顺序,从而优化页面加载体验。

试用PriorityHints的时候,当时使用的属性名称是importance,正式发布的时候HTML属性名改成了fetchpriority,fetch的参数名改成了priority。命名确实变好了,重要性(importance)和优先级(priority)本来就不是同一个概念,这里用priority更加合适,特性的名称不正是PriorityHints嘛。同时,HTML属性名称在priority之前添加了fetch前缀,更加清楚表达了属性的含义,缺点是命名有点长,有点费流量。至于fetch的参数,不加前缀也是正确的,但是问题是两处名称不一致。我觉得命名确实变好了,但是不如两处都用priority,既保持一致,也节省字符。

改个命名有啥好聊的?那这里就有学问了!

从这个细节可以看出,Google的CodeReview机制非常严格,变量命名也不放过,花了不少心思。虽然我并不完全赞同这个命名,但是我非常欣赏CodeReview这种做法和态度。

浏览器全局API的命名当然应该慎重,因为这会影响整个Web生态系统。而我们自己在写代码的时候,也应该仔细思考一下命名,不能随便乱来,否则大概率是坑自己,也会坑队友。

但是,命名是一件挺难的事情,有句话是这样说的:

ThereareonlytwohardthingsinComputerScience:cacheinvalidationandnamingthings.

命名的问题按下不表,继续聊PriorityHints特性。

浏览器下载页面资源的顺序由众多因素所决定,比如资源的类型、位置及顺序、是否在可视窗口、是否指定defer、async、preload等。浏览器根据规则确定资源的优先级,从而确定下载顺序。

一般来讲,浏览器可以很好地决定资源下载顺序,但是由于缺乏对具体应用及具体页面的深入理解,浏览器下载资源的顺序很难是最优的。这时,如果我们就可以利用规则来调整资源的优先级,从而影响下载顺序,比如为页面统计/监控脚本指定async。不过这种方法有点隔山打牛的感觉,既复杂又不一定能达到效果。

PriorityHints则非常简单直接,通过fetchpriority属性指定资源的优先级,其取值为high、low、auto,其中auto为默认值,使用方式如下:

!--通过fetchpriority属性指定图片的优先级--imgsrc="/images/test.png"fetchpriority="high"/!--使用fetch的时指定优先级--scriptfetch("


转载请注明:http://www.aierlanlan.com/grrz/374.html