如何限制iframe内网页打开新窗口_浅谈百度Mip规范与谷歌AMP网页规范

本文,我们简单介绍下百度Mip规范与谷歌AMP网页规范,供您参考使用。

百度Mip网页加速技术

4492e79d7876cc8ef25a5db8f16e66c3.png

MIP移动端网页加速技术

什么是mip网站页面改造?

Mip是Mobile Instant Pages的英文单词缩写,翻译过来就是移动端网页加速。它是百度公司推出的一套应用于移动端网页开发的开放性技术标准。Mip技术通过提供mip-HTML规范、mip-js运行环境以及mip-Cache页面缓存系统,来实现移动端网站网页加速,提升移动端网站渲染能力。

MIP 主要由三部分组织成:

MIP-HTML:基于 HTML 中的基础标签制定了全新的规范,通过对一部分基础标签的使用限制或功能扩展,使 HTML 能够展现更加丰富的内容。

MIP-JS:可以保证 MIP-HTML 页面的快速渲染。

MIP-Cache:用于实现 MIP 页面的高速缓存,从而进一步提高页面性能。

MIP-HTML

MIP-HTML 规范中有两类标签,一类是 HTML 常规标签,另一类是 MIP 标签。MIP 标签也被称作 MIP-HTML 组件,使用它们来替代 HTML 常规标签可以大幅提升页面性能。

例如:标签,它使得图片只在需要时才进行加载,减少了页面渲染时间,节省了用户的流量。

阅读 MIP-HTML 规范 了解更多信息。

MIP-JS

MIP-JS 用于管理资源的加载,并支持上述 MIP 标签的使用,从而确保页面的快速渲染,提高页面各方面的性能。

MIP-JS 最显著的优势是能够异步加载所有外部资源,整个页面渲染过程不会被页面中的某些元素阻塞,从而实现页面渲染速度的提升。

此外,MIP-JS 还涵盖了所有 iframe 的沙盒、在资源加载前提前计算页面元素布局、禁用缓慢 CSS 选择器等技术性能。

MIP-Cache

MIP-Cache 是一套基于代理的 CDN(Content Delivery Network) 缓存系统,可用于缓存所有被百度相关页面引用或者从百度相关服务点出的 MIP 页面。

用户在访问 MIP 页面的时候,请求首先会发到 CDN 服务器,如果页面存在,则从 CDN 返回,如果 CDN 上不存在,则会请求第三方服务器。同时 MIP-Cache 服务器会将页面缓存到 CDN 上。在使用 MIP-Cache 时,MIP 页面所需要的所有静态文件和外部资源都会被缓存到 CDN 上(视频除外),并且页面中的资源链接会被转换成相对地址,很大程度上提升了页面渲染速度。每一个 MIP 页面都会绑定一个验证系统,在页面进行渲染时,这种验证器可以直接在浏览器控制台中输出页面的错误。并且随着代码逻辑的变化,能够展示其对页面性能以及用户体验的影响。

mip技术有何必要性?

2018年移动端网民数量已达到5.6亿,随着网络速度的不断提升以及移动设备质量不断提高,用户在浏览网页中更愿意浏览那些网站瞬间打开的页面。而网民的浏览习惯及点击率则直接影响到搜索引擎给予网站的排名以及网站的转化率。在此背景下,百度推出了mip技术标准,为广大网站开发人员提供了一项移动端加速解决方案。

mip是如何提供网站加载速度的?又有何优势呢?

01bd65eea6170a1c33b93480e4d1f4a8.png

SEO,这是要考量的一部分

Mip页面改造技术使将原来的移动端网站根据mip技术标准进行网页重新编写改造,完成后的网页代码更加简洁规范。网站改造完成,在百度验证通过后,网站将直接放置在百度快照缓存服务器上,同时mip地址也将使用百度缓存服务器域名,提高域名解析速度,同时提升网站安全性。更快的网站加载速度,更好的网站安全措施,就意味着更好的收录及用户体验,对于网站seo排名优化效果不言而喻。

谷歌AMP技术

3f1bab9dc28d5d96d0b69b4cebe81fd8.png

Google AMP

什么是AMP规范?

通过 AMP 可以构建快速渲染的静态内容网页。 AMP 实例由三个不同部分组成:

AMP HTML

AMP JS

Google AMP Cache

AMP HTML 是为确保可靠性能而具有某些限制的 HTML, 它进行了一些扩展,可以构建超出基本 HTML 的丰富内容。 AMP JS 库可确保快速渲染 AMP HTML 页面。 Google AMP Cache(可选)提供 AMP HTML 页面。

AMP HTML

AMP HTML 本质上是使用自定义 AMP 属性扩展的 HTML。

尽管 AMP HTML 页面中的大多数标记都是常规 HTML 标记,但部分 HTML 标记替换为了 AMP 特定标记(另请参阅AMP 规范中的 HTML 标记)。 利用这些自定义元素(称为 AMP HTML 组件) 可以轻松高效地实现常见的模式。

例如,amp-img 标记可提供完整的 srcset 支持,即使在尚不支持该标记的浏览器中也是如此。

了解如何创建您的第一个 AMP HTML 页面。

AMP JS

AMP JS 库可实现所有 AMP 的最佳性能做法,

管理资源加载,并为您提供上面提到的自定义标记, 所有这些都是为了确保快速渲染您的页面。

重大优化之一就是使来自外部资源的所有内容保持异步,让页面中的任何内容都能毫无阻碍地渲染。

其他性能技术还包括:将所有 iframe 沙盒化、加载资源之前对页面上每个元素的布局进行预先计算,以及禁用性能缓慢的 CSS 选择器。

如需详细了解优化和相关限制,请阅读 AMP HTML 规范.

Google AMP Cache

Google AMP Cache 是一种基于代理的内容交付网络,用于交付所有有效的 AMP 文档。

它可提取 AMP HTML 页面,对页面进行缓存,并自动改进页面性能。 使用 Google AMP Cache 时,文档、所有 JS 文件及所有图像都从使用 HTTP 2.0 的同一来源加载,从而可实现最高效率。

此外,Google AMP Cache 还带有内置验证系统,可确认页面能够正常工作,并且不依赖于外部资源。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值