您的位置：首页 > 网站推广 > 经验心得  >  mip完整dome mip完整例子

mip完整dome mip完整例子

 更新时间：2016年12月21日 21:00  点击：1926
本次一聚教程网为大家带来的是mip完整dome，让大家初步的了解mip加速是怎么实现的，下面请看详细的介绍。

完整DOME如下：

为防止js自动生成，所以使用了截图的形式。

1.jpg

本次为大家带来的是MIP加速原理介绍，将为您详细阐释MIP页面的加速原理，下面请看详细内容。

经过精心设计的JavaScript

为了去除臃肿的客户端脚本，MIP文件不允许自定义JavaScript；对一些强依赖JavaScript的功能（如：广告、统计和交互），MIP提供与MIP runtime兼容的封装好的组件来实现。

JavaScript 引用原则：

  • 目前MIP不允许用户自定义JavaScript，需要用MIP 组件的形式引进来，从而确保安全性和性能表现

  • 可以引用mip-iframe来引入实现部分富交互的功能，这样，即使开发时使用最影响性能的document.write，也不会影响主页面的渲染

  • MIP组件是开源的，允许开发者自定义功能组件，项目也将持续提供多样的组件，以适应不同的需求

所有静态资源需要标明尺寸

在页面开发时，资源常常不会被设定宽高，特别是使用广告或者通过调用 `document.write() 注入的时候。由于资源大小不能确定，页面经常要进行反复重新的绘制；

现在，MIP要求将所有的资源（广告、图片、音频和视频）标明尺寸。当资源真正加载时，所有资源大小可以被立即推断出并迅速的用于计算页面布局，加载中的资源将无缝呈现，不必因为页面频繁更新布局而影响到用户的阅读体验。

不允许任何机制阻止页面渲染

开发者的任何自定义脚本，都需要用MIP的tag反馈给MIP，例如mip-ad、mip-iframe等，这些方式不会阻塞页面的layout和渲染。

控制外部资源加载

MIP runtime会控制外部资源的额加载来确保其高效性，从而使用户想阅读的内容尽快出现在屏幕中。

封装交互功能

MIP提倡网页能给用户直接简单的体验，但这并不意味着MIP限制了页面的生动和有趣。MIP runtime提供了高度优化的被封装的JavaScript，开发者无需投入过多精力去实现复杂的交互功能。

只允许inline的css

css的加载，会阻止页面的渲染，css内联可以减少客户端的开销。

只允许GPU加速的动画

MIP只允许用transforms和opacity来完成动画效果，当动画能在GPU上执行时，仅触发渲染层合并。

MIP 缓存

MIP另一个重要的意义在于能够帮站长加速网页，百度将会把MIP网页缓存到百度CDN中。只要符合MIP标准，都可以使用MIP缓存。

开放且持续更新

MIP是一个开源项目，所有的标准并非一成不变。我们会持续不断进行优化，期待您的共同参与！

MIP的全称是Mobile Instant Pages，中文名字为移动网页加速器, 是一套应用于移动网页的开放性技术标准。通过提供MIP-HTML规范、MIP-JS运行环境以及MIP-Cache页面缓存系统，实现移动网页加速。

MIP主要由三部分组织成：

  • MIP HTML
  • MIP JS
  • MIP Cache

MIP HTML 基于HTML中的基础标签制定了全新的规范，通过对一部分基础标签的使用限制或功能扩展，使HTML能够展现更加丰富的内容；MIP JS 可以保证 MIP HTML 页面的快速渲染；MIP Cache 用于实现MIP页面的高速缓存，从而进一步提高页面性能。

1. MIP HTML

MIP HTML 基于HTML基础规范进行了扩展，下面是一段简单的MIP HTML代码示例： 

<!DOCTYPE html> 
<html mip> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> 
<link rel="stylesheet" type="text/css" href="https://mipcache.bdstatic.com/static/v1/mip.css"> 
<link rel="canonical" href="https://www.mipengine.org/"> 
<!-- noscript 标签是为了在不支持script的环境下快速的展现 mip 页面，推荐使用 --> 
<noscript> 
<style mip-officialrelease> 
body { 
-webkit-animation:none; 
-moz-animation:none; 
-ms-animation:none; 
animation:none
} 
</style> 
</noscript> 
</head> 
<body>Hello World!</body> 
<script src="https://mipcache.bdstatic.com/static/v1/mip.js"></script> 
</html>

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

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

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

2. MIP JS

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

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

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

3. MIP Cache

MIP Cache 是一套基于代理的 CDN(Content Delivery Network) 缓存系统，可用于缓存所有被百度相关页面引用或者从百度相关服务点出的MIP页面。用户在访问 MIP 页面的时候，请求首先会发到 CDN 服务器，如果页面存在，则从 CDN 返回，如果 CDN 上不存在，则会请求第三方服务器。同时 MIP Cache 服务器会将页面缓存到 CDN 上。

在使用 MIP Cache 时，MIP 页面所需要的所有静态文件和外部资源都会被缓存到 CDN 上（视频除外），并且页面中的资源链接会被转换成相对地址，很大程度上提升了页面渲染速度。每一个 MIP 页面都会绑定一个验证系统，在页面进行渲染时，这种验证器可以直接在浏览器控制台中输出页面的错误；并且随着代码逻辑的变化，能够展示其对页面性能以及用户体验的影响。

最近发现不少新站长都还不知道301跳转是什么意思，本次一聚教程网为大家带来了讲解，并且介绍了一些关于301跳转的常见问题，下面请看详细的介绍。

问：什么是301跳转？

答：页面永久性移走，通常叫做301跳转，也叫301重定向、301转向，指的是当用户点击一个网址时，通过技术手段跳转到指定的一个网站，一般在更换域名或路径时使用。

 

问：301跳转方法是什么？

注意：静态网页不可以做301转向

由于静态网页不可以做301转向，您可以使用JS或者其他脚本来解决转向问题。

PHP转向版本

header("HTTP/1.1 301 Moved Permanently");

header("Location: http://你的网址/");

exit();

ASP转向版本

Response.Status="301 Moved Permanently"

Response.AddHeader "Location","http://你的网址/"

Response.End

 

问：我设置了301跳转，多久可以生效？

答：目前百度无法承诺301跳转的生效时间，因为站长感受到的生效时间会受多因素影响，比如Baiduspider再次抓取这个页面发现其设置了301的时间、网页的重要程度以及自身质量等。

 

问：301跳转生效后，原网页是否会被删除？

答：不会，会与跳转后的新网页同时存在。

 

问：原网页新网页都存在，相当于两个内容重复的页面，排名怎么处理？

答：通常百度会认为跳转后的新网页更加重要，原网页是被放弃的网页，会让新网页继承原网页属性，在搜索结果中会优先展现新网页。

 

问：将老域名跳转到新域名，是仅首页301就可以了？还是必须所有页面301?

答：必须所有页面301至新域名的相应页面。

 

问：原域名所有页面都跳转至新域页首页会有什么影响？

答：新域名首页将会替换旧域名首页，新域名首页仅继承旧域名首页的属性，不会产生1+1>2的效果。旧域名在短时间内仍然可查。但随着时间推移，旧域名由于质量下降最终会被清除出数据库。

[!--infotagslink--]

相关文章

  • 关于JavaScript中name的意义冲突示例介绍

    在昨天的《Javascript权威指南》学习笔记之十：ECMAScript 5 增强的对象模型一文中，对于一段代码的调试出现了一个奇怪现象，现将源代码贴在下面： 复制代码 代码如下: <script type="text/javascript"> function Person(){}...2014-05-31

  • C#学习笔记- 随机函数Random()的用法详解

    下面小编就为大家带来一篇C#学习笔记- 随机函数Random()的用法详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2020-06-25

  • javascript自定义的addClass()方法

    复制代码 代码如下: //element:需要添加新样式的元素，value：新的样式 function addClass(element, value ){ if (!element.className){ element.className = value; }else { newClassName = element.className; newClas...2014-05-31

  • Linux下PHP安装curl扩展支持https例子

    安装curl扩展支持https是非常的重要现在许多的网站都使用了https了，下面我们来看一篇关于PHP安装curl扩展支持https例子吧。 问题： 线上运行的lamp服务器，默认yu...2016-11-25

  • JavaScript中的this关键字使用方法总结

    在javascritp中，不一定只有对象方法的上下文中才有this， 全局函数调用和其他的几种不同的上下文中也有this指代。 它可以是全局对象、当前对象或者任意对象，这完全取决于函数的调用方式。JavaScript 中函数的调用有以下...2015-03-15

  • JavaScript中逗号运算符介绍及使用示例

    有一道js面试题，题目是这样的：下列代码的执行结果是什么，为什么？ 复制代码 代码如下: var i, j, k; for (i=0, j=0; i<10, j<6; i++, j++) { k = i+j; } document.write(k); 答案是显示10，这道题主要考察JavaScript的逗...2015-03-15

  • javascript的事件触发器介绍的实现

    事件触发器从字面意思上可以很好的理解，就是用来触发事件的，但是有些没有用过的朋友可能就会迷惑了，事件不是通常都由用户在页面上的实际操作来触发的吗？这个观点不完全正确，因为有些事件必须由程序来实现，如自定义事件，jQue...2014-06-07

  • ActiveX控件与Javascript之间的交互示例

    1、ActiveX向Javascript传参 复制代码 代码如下: <script language="javascript" for="objectname" event="fun1(arg)"> fun2(arg); </script> objectname为ActiveX控件名，通过<object>标签里的id属性设定,如下； 复制...2014-06-07

  • JavaScript获取浏览器信息的方法

    Window有navigator对象让我们得知浏览器的全部信息.我们可以利用一系列的API函数得知浏览器的信息.JavaScript代码如下:function message(){ txt = "<p>浏览器代码名: " + navigator.appCodeName + "</p>";txt+= "<p>...2015-11-24

  • 详解JavaScript操作HTML DOM的基本方式

    通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。 HTML DOM (文档对象模型) 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 HTML DOM 模型被构造为对象的树： 通过可编程的对象模型，Java...2015-10-23

  • 跟我学习javascript的最新标准ES6

    虽然ES6都还没真正发布，但已经有用ES6重写的程序了，各种关于ES789的提议已经开始了，这你敢信。潮流不是我等大众所能追赶的。潮流虽然太快，但我们不停下学习的步伐，就不会被潮流丢下的，下面来领略下ES6中新特性，一堵新生代JS...2015-11-24

  • PHP用DOM方式处理HTML之《Simple HTML DOM》

    近经常需要采集一些网上的数据，发现一个PHP处理HTML的利器 simple html dom,看了一下文档，使用非常方便，关键是能够用CSS选择器来访问DOM树，和jquery相似，实在是难得的利器...2016-11-25

  • JavaScript操作URL的相关内容集锦

    ---恢复内容开始---1.location.href.....（1）self.loction.href="http://www.cnblogs.com/url" window.location.href="http://www.cnblogs.com/url" 以上两个用法相同均为在当前页面打开URL页面 （2）this.locati...2015-10-30

  • javascript实现tab切换的四种方法

    tab切换在网页中很常见，故最近总结了4种实现方法。 首先，写出tab的框架，加上最简单的样式，代码如下： <!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style> *{ pa...2015-11-08

  • 基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式

    前言在面向对象的编程范式中，封装都是必不可少的一个概念，而在诸如 Java，C++等传统的面向对象的语言中， 私有成员是实现封装的一个重要途径。但在 JavaScript 中，确没有在语法特性上对私有成员提供支持， 这也使得开发人员使...2015-10-30

  • javascript实现数独解法

    生生把写过的java版改成javascript版，第一次写，很不专业，见谅。唉，我是有多闲。复制代码 代码如下: var Sudoku = { init: function (str) { this.blank = []; this.fixed = []; this.cell =...2015-03-15

  • javascript中slice(),splice(),split(),substring(),substr()使用方法

    1.slice（）；Array和String对象都有在Array中 slice(i,[j])i为开始截取的索引值,负数代表从末尾算起的索引值，-1为倒数第一个元素 j为结束的索引值，缺省时则获取从i到末尾的所有元素参数返回： 返回索引值从i到j的数组，原数组...2015-03-15

  • jQuery 中的 DOM 操作

    在DOM操作中，常常需要动态创建HTML内容，使文档在浏览器里的呈现效果发生变化，并且达到各种各样的人机交互目的....2016-04-27

  • javascript中的document.open()方法使用介绍

    document.open()方法打开一个新的文档，并用document.write()方法编写文档的内容，然后用document.close()方法关闭文档操作，使其内容显示出来。 例如： 复制代码 代码如下: <script type="text/javascript"> window.onloa...2013-10-13

  • javascript如何实现暂停功能

    本文实例讲述了JS实现的自定义网页拖动类。分享给大家供大家参考，具体如下： Javascript本身没有暂停功能（sleep不能使用）同时 vbscript也不能使用doEvents，故编写此函数实现此功能。 javascript作为弱对象语言，一个函数也...2015-11-08