百度MIP移动页面加速——不只是CDN

MIP 是用 CDN 做加速的么?准确答案是:是,但不只是。
MIP 全称 Mobile Instant Pages,移动网页加速器,是百度提出的页面加速解决方案。MIP 从前端渲染和页面网络传输两方面进行优化,杜绝页面渲染中的阻塞问题,提升页面展现速度。

页面渲染耗时与 MIP 加速原则

页面渲染耗时主要分为以下三类:DNS 解析耗时,网络传输耗时,浏览器渲染重绘耗时
MIP 加速的基本原理就是减少各个步骤的耗时:

为减少 DNS 解析,MIP-Cache 将静态文件以相对路径储存在百度 CDN 中;
为减少网络传输耗时,MIP-JS 控制静态资源的按需加载,MIP-Cache 系统优先从 CDN 读取文件;
为减少浏览器渲染重绘耗时,MIP-HTML 对<img>,<video>等造成浏览器重绘的标签进行了封装控制。 下文将对 MIP 的三大组成部分 MIP-HTML, MIP-JS, MIP-Cache 进行详细介绍。

MIP-HTML 组件加速原理

MIP-HTML 规范中有两类标签,一类是 HTML 常规标签,另一类是 MIP 标签(MIP-HTML 组件)。在 MIP 规范中,类似<img>等会引起浏览器重绘的标签应被替换成<mip-img>, 利用懒加载和按需加载提高页面的渲染速度。

MIP-HTML 除了对浏览器原生标签的封装,还有一类自定义交互组件。比如图片轮播组件,表单组件,分享组件等。这些组件依赖 MIP-JS 和自身脚本即可运行,不需要引用第三方库。引用 MIP 自定义组件的而好处在于,页面开发时无需引入 jquery,bootstrap 等体积庞大的库,减少页面发送的网络请求及传输时间,加快网页的传输和渲染。

MIP-JS 加速原理

MIP-JS 是 MIP 的运行环境,接管了 MIP 页的生命周期,脚本加载及页面渲染。具体来说,MIP-JS 包括基础类引入(AMD),内置组件加载(mip-img),外置组件管理(组件 css 插入)以及组件布局管理(解决布局兼容性问题)。

MIP-JS 选择使用精简的基础类,尽量减少网络传输时间;内置优秀的组件,在不阻塞浏览器渲染的前提下提供最好的交互体验;提供组件布局管理,预先为组件设定宽高,避免组件加载后的浏览器重布局。

MIP-Cache 缓存加速原理

MIP-Cache 通过 CDN(Content Delivery Network) 服务器缓存静态 MIP 页面。当用户访问 MIP 页面时,请求首先会发到 CDN 服务器,如果页面存在,则从 CDN 直接返回静态页面;如果页面不存在,则会请求第三方服务器。返回的页面的同时加入 MIP-Cache。

在使用 MIP-Cache 时,MIP 页面引用的所有静态文件和外部资源都会被替换成相对地址,缓存到 CDN 上。尽可能减少了 DNS 解析时间和网络请求时间。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/535939.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JAVA知识基础(二):基本语法

本篇主要介绍JAVA的运算符、循环结构以及条件结构。 1、JAVA运算符 计算机的最基本用途之一就是执行数学运算&#xff0c;作为一门计算机语言的Java也提供了一套丰富的运算符来操纵变量。 JAVA运算符可以大致概括为几类&#xff1a;算术运算符、关系运算符、位运算符、逻辑运…

JAVA知识基础(三):修饰符

JAVA中根据修饰对象的不同可以分为类修饰符、方法修饰符、变量修饰符三类&#xff0c;其中每种修饰符又可以单独分成两类&#xff1a;访问修饰符和非访问修饰符。为了便于理解&#xff0c;本文以访问和非访问的角度展开。 1、访问修饰符 访问修饰符有四个&#xff1a;public、…

百度推出新技术 MIP,网页加载更快,广告呢?

MIP 项目在 2016 年年初正式发布&#xff0c;帮助移动页面加速&#xff08;原理&#xff09;。内测数据表明&#xff0c;MIP 页面在 1s 内加载完成。现在已经有十多家网站加入 MIP 项目&#xff0c;有更多的网站正在加入中。在MIP收到的反馈中&#xff0c;大部分都提到了广告的…

JAVA知识基础(四):深入理解static关键字

1、static存在的主要意义 static的主要意义是在于创建独立于具体对象的域变量或者方法。以致于即使没有创建对象&#xff0c;也能使用属性和调用方法&#xff01; static关键字还有一个比较关键的作用就是 用来形成静态代码块以优化程序性能。static块可以置于类中的任何地方…

MIP改造常见问题二十问

在MIP推出后&#xff0c;我们收到了很多站长的疑问和顾虑。我们将所有疑问和顾虑归纳为以下二十个问题&#xff0c;希望对大家理解 MIP 有帮助。 1、MIP 化后对其他搜索引擎抓取收录以及 SEO 的影响如何&#xff1f; 答&#xff1a;在原页面 MIP 化&#xff0c;不会影响其它搜…

Nginx(零):背景

我们今天开始对Nginx的学习&#xff0c;本来是打算第一篇就是基础知识介绍的&#xff0c;但是我感觉在学习一个新知识之前总应该知道&#xff0c;我们为什么要学习它&#xff0c;学习它的意义何在吧&#xff01;所以我加了背景这一篇作为Nginx开始学习的标志。 1、Nginx的诞生…

Nginx(一):概念基础

上一篇我们介绍了Nginx的背景&#xff0c;现在我们就要开始正式对Nginx的学习了。本篇我们将对Nginx的基本定义进行介绍&#xff0c;了解Nginx到底是什么。然后我们会介绍Nginx最基本的三个概念&#xff1a;反向代理、负载均衡、动静分离。 1、Nginx是什么 Nginx(“engine x”…

MIP 官方发布 v1稳定版本

近期&#xff0c;MIP 官方发布了 MIP 系列文件的全新 v1 版本&#xff0c;建议开发者尽快完成升级。 一、 我是开发者&#xff0c;如何升级版本&#xff1f; 对于 MIP 页面开发者来说&#xff0c;* 只需替换线上引用的 MIP 文件为 v1 版本 *&#xff0c;就可以完成升级。所有…

百度MIP页规范详解 —— canonical标签

百度 MIP 的规范要求必须添加强制性标签 canonical&#xff0c;不然 MIP 校验工具 会报错&#xff1a; 强制性标签 <link rel"/^(canonical)$/"> 缺失或错误 这个标签怎么写&#xff1f;又是干什么用的呢&#xff1f; ** 简单来说&#xff0c;canonical 标签…

Nginx(二):安装、配置、常用命令

1、Nginx在Linux操作系统中的安装 这里简单介绍一下nginx的安装了 1.1、前期准备 在安装nginx之前我们要提前准摆好它的编译工具以及库文件&#xff1a;zlib、poenssl。 还有有让Nginx支持Rewrite功能的PCRE. 安装的途径有很多可以参考&#xff1a;https://www.runoob.com/lin…

JAVA知识基础(五):深入理解final关键字

1.final 关键字 final关键字主要用在三个地方&#xff1a;变量、方法、类。 final修饰变量&#xff1a;final修饰一个类时&#xff0c;表明这个类不能被继承。final修饰方法&#xff1a;final修饰方法&#xff0c;方法不可以重写&#xff0c;但是可以被子类访问 【前提&#…

CMS模板应用调研问卷

截止目前&#xff0c;已经有数十家网站与我们合作&#xff0c;进行了MIP化改造&#xff0c;在搜索结果页也能看到“闪电标”的出现。除了改造方面的问题&#xff0c;MIP项目组被问到最多的就是&#xff1a;我用了wordpress&#xff0c;我用了织梦cms&#xff0c;怎么改MIP呢&am…

Nginx(三):反向代理

我们本篇将通过两个实例进行对Nginx反向代理的学习。 1、概念基础 反向代理&#xff0c;其实客户端对代理是无感知的&#xff0c;因为客户端不需要任何配置就是可以访问。我们只需要将请求发送到反向代理服务器上&#xff0c;有反向代理服务器去选择目标服务器获取数据后&…

VIP站长大会(北京站)常见问题解答

功能支持问题 1. react 能否和 MIP 结合使用&#xff0c;如果暂时不能以后是否有考虑&#xff1f;是否会和其他 JavaScript 框架 (比如 Angular ) 结合 ? 目前暂无计划支持。 2. MIP 页是否支持自定义 cookie? 实现 登录、统计、广告等功能 ? <mip-cookie>组件正在…

Nginx(四):负载均衡Load balancing

1、概念基础 Load balancing&#xff0c;即负载均衡&#xff0c;是一种计算机技术&#xff0c;用来在多个计算机&#xff08;计算机集群&#xff09;、网络连接、CPU、磁盘驱动器或其他资源中分配负载&#xff0c;以达到最优化资源使用、最大化吞吐率、最小化响应时间、同时避…

JAVA知识基础(六):抽象

1.概述 抽象类、抽象方法以及接口&#xff0c;这三个知识点是每个程序员必备的基础&#xff0c;无论是在实际编程的时候&#xff0c;还是在面试的时候&#xff0c;都会出现这类问题&#xff0c;面试官很可能就会问你&#xff0c;interface和abstract的区别 当父类知道子类应该…

MIP开发教程(三) 使用MIP-CLI工具调试组件

一 . 在 mip-extensions 仓库中创建新的组件二 . 预览调试组件 三 . 在 MIP 页中引用自己编写的 MIP 组件 四 . 组件提交到 GitHub 仓库时需要进行校验 站长开发的非通用组件&#xff0c;使用 组件上线平台 提交&#xff0c;上线后代码位于 GitHub/mip-extension-platform 仓…

JAVA知识基础(七):封装

1.概述 封装&#xff08;Encapsulation&#xff09;是指一种将抽象性函式接口的实现细节部分包装、隐藏起来的方法。 封装可以被认为是一个保护屏障&#xff0c;防止该类的代码和数据被外部类定义的代码随机访问。 要访问该类的代码和数据&#xff0c;必须通过严格的接口控制…

MIP开发教程(二) 使用MIP-CLI工具调试MIP网页

初始化 MIP 配置 新建一个 MIP 网页 编写 MIP 网页代码 校验 MIP 网页 调试 MIP 网页 1. 初始化 MIP 配置 首先在html目录下进行初始化 MIP 配置&#xff1a; $ mip init 此时会创建mip.config文件&#xff1a; 2. 新建一个 MIP 网页 在mip-project/html文件夹下输入如下…

Nginx(五):动静分离

1、概念基础 Nginx动静分离简单来说就是把动态请求和静态请求分开&#xff0c;不能理解成只是单纯的把动态页面静态页面的物理分离。严格意义上说应该是动态请求跟静态请求的分开&#xff0c;可以理解成使用Nginx处理静态页面&#xff0c;Tomcat处理动态页面。动静分离从目前实…