石家庄做网站:Chrome Dev Summit展示了一些超速技术

我的博客已经有一段时间了。本周我参加了在旧金山举行的Chrome开发者峰会。今年发布了很多公告,包括更多关于web.dev和新的PageSpeed Insights的公告,但似乎已经特别证明了一些“速度改进技术”。

Chrome Dev Summit的所有演示都很丰富,其中许多都在' web.dev '中有详细解释。在这里,我想仔细研究两天内举行的会议,并仔细跟进加速内容。

改进V8发动机

用于视频“AV1”的下一代编解码器和图像格式“WebP”

f:id:masahirotanaka:20181119132034 p:plain:w 400

该网站的大部分容量都被图像,字体和JavaScript占用。如何减少这些文件大小对于提高网站速度非常重要。

例如,动画GIF效率非常低,不推荐使用。只需将动画GIF转换为电影(mp4格式),例如,6.8 MB就可以压缩到420 KB。此外,如果您使用AV1编解码器作为电影的压缩格式,即使与x264相比,您也可以实现40%到50%的压缩。(目前仅在Chrome中支持 AV1 )

同样,使用WebP作为图像格式会将文件大小减少约30%(Edge / Chrome / Firefox中提供WebP )。在这种情况下,为了与不兼容的浏览器结合,<picture>我们使用如下标记。在旧浏览器中,<img>解释标记的内容。

<画面>
    <source type =“image / webp”src =“image.webp”>
    <img src =“image.jpg”></ picture>

Web字体是阅读时间变长的原因之一。作为对策,出现了名为font-display的CSS属性。font-display: swap如果指定,将显示系统的字体,直到加载自定义字体。

@ font-face {
  / * ...... * /
  font-display:swap;}

Firefox / Chrome / Safari目前支持 font-display属性。

胡迪尼

f:id:masahirotanaka:20181119132402g:plain:w300(来自电影)

这是一种使用JavaScript扩展CSS功能的机制。Worklet,CSS Paint API,Layout API,Typed OM等。

例如,CSS油漆API和使用,到目前为止CSS是不能在(例如,对象具有比圆角之外的边界)来表示图纸,JavaScript的可被吸入。

可以从该网站查看Houdini的实施状态。似乎开发不仅在Chrome中,而且在Safari和Firefox中也在进行。

本机延迟加载

您可以使用lazyload属性指示浏览器确定是否延迟加载图像等资源的时间。它可以应用于图像和IFRAME。

例如,

<img src =“image.jpg”lazyload =“on”>

然后,浏览器在实际需要显示该内容之前不会加载图像。默认值为“auto”,用于确定浏览器是否进行延迟加载。简而言之,对于内置此功能的浏览器,似乎延迟加载在没有任何操作的情况下无需许可即可生效。

f:id:masahirotanaka:20181119133217 g:平原(来自电影)

预加载

预加载允许您预加载图像和脚本等资源。例如,这使得在后续页面上预先获取必要的资产变得容易,并且加快了页面显示速度。

要设置预加载,请<link>使用标记。使用新添加的rel="preload"属性,描述如下。

<link rel =“preload”href =“image.png”as =“image”><link rel =“preload”href =“script.js”as =“script”>

此功能是铬 / Safari浏览器中/边(部分支持)可以使用。您可以在不使用Service Worker的情况下轻松预取内容。

Web打包API和门户

例如,通过AMP(Acceledated Mobile Pages)的机制,我们现在可以提高从Google搜索结果到下一页的转换速度。但是,由于此机制需要在Google 域上显示转换目标页面,因此URL会显示两次或导致安全问题。

使用所谓的Web包装机制,以确保网站的有效性,浏览器是预取的内容,你就能缓存。事实上,在CloudFlare的演示,Web包已经建立的机制称为AMP包装程序使用“CloudFlare的工人(技术在边缘服务器在V8的单位经营)”。

作为另一种机制,引入了类似于IFRAME的称为“ 门户 ”的机制。这是<portal>通过使用标记“tag” 来实现的,这是一种允许您像在IFRAME中一样在页面中嵌入其他网站的机制。与IFRAME不同,转换到该内容时,会显示变形动画。这允许您表达屏幕转换,如网站之间的本机应用程序。在一个具体的演示中,介绍了一个基于“ 邻居年轻跳跃 ”和“ 哈特纳 ”的卡通观众。

 (使用Portal的示例)

加速改进的例子

介绍了上述措施实际应用于网站的一些案例。在这里,我们将介绍主要网站的改进示例,例如Pinterest,Spotify,Starbucks以及由Google开发的名为Squoosh的工具,用于演示目的。

Pinterest的

我从头开始重建移动网络(似乎工作只用了3个月)。结果,启动速度增加了4倍(至5.6秒,之前为21.2秒)。此外,使用ServiceWorker进行预取,大约需要23秒才能将其缩短为3.9秒。

作为一个更具体的数字,似乎JavaScript的大小可以从650 kb减少到200 kb。绩效预算的可视化对于减少工作非常重要。具体而言,我们引入了一种使用持续集成自动测量绩效预算的机制,并将其纳入开发流程。

通过这些努力,用户的体验得到了改善,新用户的注册被称为通过移动网络排名第一。

Spotify的

一年前(2017年)Spotify没有移动网络版本,为了听音乐,它处于需要下载本机应用程序的状态。然而,在巴西等新兴国家,移动终端的规格较低,终端的容量有限,因此下载应用程序的障碍很大。即使您只想听一首歌,似乎有很多反应您不想下载任何应用程序MB。在进行A / B测试时,我看到了用户的反应。

作为第一个实验,在下载应用程序之前,我们引入了一种机制,允许您通过Web只收听一首歌曲。然后,第一天的再生率提高了25%。因此,作为下一个实验,我分为两种包含移动网络播放器和另一个网站的网站,并确认了用户的反应。然后,在整合移动网络播放器时,第一天的复兴率提高了54%。

对于Spotify的移动Web支持,已完成Media Session API和PWA合规性,但向浏览器添加内容保护功能也很重要。

星巴克

2017年PWA版本发布。使用Workbox和IndexedDB加速,速度比以前翻了一倍。此外,使用凭据管理API,登录机制是顺利的。

该应用程序基于React。此外,桌面Web站点符合PWA,实际上25%的Web订单是从桌面完成的。

Squoosh

Chrome Chrome Developer Advocate团队是图像压缩网站的中心,该网站是通过充分利用PWA,Web Assembly,WebWorkers等开发的。它发布在GitHub上,不仅适用于Chrome,也适用于Edge / Safari / Firefox。

C / C ++库是一种压缩编解码器,已使用Emscripten转换为WebAssembly。此外,具有高CPU成本的压缩功能与使用WebWorkers的UI线程分离,因此即使在图像压缩期间也可以平滑地执行绘制。该网站是一个完整的PWA实施,它也适用于移动和平板电脑。

最后

直到去年,但我认为,是否将“PWA”的渗透是如何为主题的中央,此时的镀铬中开发高峰论坛2018,特别是实现了PWA(和本地相提并论的演出经验是PWA的精华)知识和技术为诺如哎呀我认为,如果没有详尽的介绍。

令人印象深刻的是,浏览器的增强功能不会降低速度。在另一方面,例如,胡迪尼是CSS3?如果是的长青SVG · WebGL的 · 帆布无论我如何的隔离,更巨头的浏览器或不比做运行时降低了整体性能,如这个问题也诞生了。

石家庄做网站:Chrome Dev Summit展示了一些超速技术

合作伙伴

网站备案:豫ICP备15023476号-1 唯特科技