共计 2 篇文章

AMP入门(二)

AMP组件 AMP有5个原生组件和三十多个扩展组件,基本能够覆盖到我们平时开发中用到的绝大多数需求,本文介绍了APM组件部分,并选择常用的几个组件做了示例原生组件此类组件中有以下几种,详细文档请参考AMP组件部分amp-adamp-embedamp-imgamp-pixelamp-video我们详细介绍一下常用的amp-img与amp-video。amp-img在js运行的时候,由AMP来决定延迟加载或按某种顺序来加载amp-img,使用amp-img必须明确的指定资源的宽高,这样就不用完全加载出img也可以确定图片的缩放比,避免图片加载成功后触发页面的回流。如果amp-img中的资源加载失败,则元素中为空,除非为它指定一个后备方案fallback子元素。amp-img支持以下属性:src:与img的src类似,指向一个可缓存的图片url。srcset:与img的srcset一样,可以给img设置多个像素兼容的图片链接,比如:<img src=\"fallback. ...

AMP入门(一)

WHAT(AMP是什么)AMP(Accelerated Mobile Pages),GOOLE公司为了加速页面渲染的一个开源项目,是一种以更快的渲染速度来构建静态内容web页面的方式,详情请见AMP官网。WHY(为什么需要AMP)现在移动设备无处不在,我们在用移动设备浏览,分享世界的时间已经大于PC端了,但移动端的浏览体验和性能一直是我们关心的:比如加载速度,为了提升移动端的设备浏览体验,GOOGLE通过自定义元素和组件化的方式来优化web,使加载和渲染速度得到了很大的提升,加之于AMP CACHE让页面中资源更快的加载出来。 用户浏览体验方面:之前的页面都是点击跳转到第三方页面浏览,其中速度不可控(涉及到第三方的服务器性能,带宽, ...