search

mipengine / mip2

MIP (移动网页加速器)通过优化网页JS、控制资源加载顺序，达到加速网页的效果。
https://www.mipengine.org/
MIT License
184 stars 49 forks source link

MIP 与 AMP 的差异对比及可改进部分讨论 #288

Closed ccksfh closed 5 years ago

ccksfh commented 6 years ago

背景

AMP 发展到现在，在加速技术、组件建设方面做了很多事情，而 MIP 在很多方面都落后于 AMP（当然，MIP2 中出现了不少有别于 AMP 的一些升级），还停留在一开始启动这个移动网页加速项目的时期，这个 issue 旨在列出一些 AMP 中表现优异而 MIP 没有的规范/技术/组件等，MIP 将以此为目标，不断完善自己，向 AMP 看齐。

欢迎大家关注，请自由地在此 issue 下跟帖提出自己的意见或补全这份 diff，并积极地参与到其中。

ccksfh commented 6 years ago

组件

common attributes Layout System

内置组件 Of AMP

只有 amp-img，amp-layout，amp-pixel(统计) 三个

其中 amp-layout 用于创建 layout 容器，来包裹其他元素(any element)

官方组件

前言：

  1. AMP 中 social 和 media 类的组件，涉及到很多国外的社交平台或播放器平台，此处略过，主要是关注通用组件
  2. checked 状态表示 MIP 也有对应组件的实现，或有替代方案，但是其中功能有待完善的；没有列举的组件可能 MIP 已有对应实现
  3. 部分组件下详细部分均为对该组件的解释补充，或该 amp 组件与 mip 对应组件相比，比较有用/存疑的一些 extra 属性
  4. 对于哪些组件是 prerenderAllowed，MIP 文档似乎都没有特别说明

组件列表

Layout
Media
Dynamic Content
Ads & Analytics
Presentation
ccksfh commented 6 years ago

Core

AMP Boilerplate Code 样板代码

<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

简化：

<!-- 8s 后由 visibility -> visible -->
<style amp-boilerplate>
   body {
     animation: -amp-start 8s steps(1, end) 0s 1 normal both
   }
   @keyframes -amp-start {
     from { visibility: hidden }
     to { visibility: visible }
   }
 </style>

amp.js ready 后移除animation， 设置为 visibility: visible

AMP.BaseElement 组件生命周期

生命周期比 MIP.CustomElement 多很多

如：preconnectCallback、createPlaceholderCallback 等等 https://github.com/ampproject/amphtml/blob/master/contributing/building-an-amp-extension.md#baseelement-callbacks

事件通信

AMP Target 支持：

ccksfh commented 6 years ago

校验

页面校验

组件校验规则

统一通过 *.protoascii 编写规则 https://github.com/ampproject/amphtml/blob/master/contributing/component-validator-rules.md

ccksfh commented 6 years ago

基础建设

社区建设

其他

PWA

MIP 在官网没有体现

AMP for email

使用 AMPHTML 编写邮件，结合 GMail

对跨域/CORS 有独立章节详细教学

lighthouse / best practise

non-AMP page 通过 link 指向对应 AMP page

SEO

使用结构化数据让主流搜索引擎(google、bing、yahoo 等)更懂你的页面 <script type="application/ld+json"></script>

利于 SEO （我们的搜索引擎是否支持？）

ccksfh commented 6 years ago

加速规范