文档章节

web性能优化之:prefetch和prerender.

duozuo2006
 duozuo2006
发布于 2016/12/11 19:00
字数 609
阅读 11
收藏 0
点赞 0
评论 0

本文从预加载的角度介绍如何优化页面载入和渲染的性能,在展开内容之前先了解一下浏览器显示页面的过程:首先是DNS解析,然后建立TCP连接,接着下载HTML内容以及资源文件,最后才是整个页面的渲染。如图:

图片来源:https://docs.Google.com/presentation/d/18zlAdKAxnc51y_kj-6sWLmnjl6TLnaru_WH0LJTjP-o/present?slide=id.gc03305a_0106

预加载和缓存是两个概念,缓存通常使用304响应状态码来标识,参考文章:怎样理解HTTP状态码?。

这四个阶段必须是串行的,任何一步的延迟都会最终影响到页面加载时间。但浏览器在这方面已经做了很多优化,例如它会猜测你将要打开的页面,并预先解析DNS甚至直接下载它们。但浏览器猜测的能力是有限的,作为Web开发者我们可以通过dns-prefetch,subresource,prefetch,prerender等指令来帮助浏览器优化性能。

dns-prefetch

dns-prefetch可以指示浏览器去预先解析DNS域名。这样可以减少将要打开页面的延迟,

<head>  <link rel='dns-prefetch' href='http://www.open-open.com/lib/view/example.com'>  ...</head>

 

对于重定向也是有用的,比如对于:host1.com/resource > 301 > host2.com/resource 也可以设置dns-prefetch: host2.com来省去最后一个页面访问的DNS延迟。

prefetch

prefetch用来初始化对后续导航中资源的获取。prefetch指定的资源获取优先级是最低的。

<head>  <link rel="prefetch" href="http://www.open-open.com/lib/view/checkout.html">  ...</head>

 

subresource

subresource用来标识出重要的资源,浏览器会在当前访问页面时立即下载它们

<head>  <link rel="subresource" href="http://www.open-open.com/lib/view/critical/app.js">  ...</head>

 

subresource的语义是当前页面的子资源,浏览器会立即下载它们。 subresource的优先级高于prefetch。参见: http://stackoverflow.com/questions/29475854/what-is-link-rel-subresource-used-for

prerender

合适的适合,你甚至可以用prerender来让浏览器在后台事先渲染好整个页面,这样它的打开速度将会是0秒!

<head>  <link rel="prerender" href="http://www.open-open.com/lib/view/checkout.html">  ...</head>

 

因为要渲染整个页面,所以它需要的所有资源也会被全部下载。如果里面的JS需要在页面显示时运行,可以通过页面可见性API来实现。当然只有GET才是可以预先渲染的,预渲染POST当然是不安全的。

本文转载自:

共有 人打赏支持
duozuo2006
粉丝 0
博文 13
码字总数 8728
作品 0
北京
移动Web加速技术月报第2期

作者 | Brilliant Open Web 团队breezet、shdong 编辑 | 尾尾 为推进Web技术的发展,Brilliant Open Web 团队特推出每月一期的《移动Web加速技术月报》,该月报将整理较流行的移动Web加速技术...

BrilliantOpenWeb
2017/11/09
0
0
Django查询优化之select_related和prefetch_related

一、select_related查询优化 select_related通过多表join关联查询,一次性获得所有数据,通过降低数据库查询次数来提升性能,但关联表不能太多,因为join操作本来就比较消耗性能。本文通过D...

daibaiyang119
2017/10/30
0
0
prerender-SPA程序的SEO优化策略

随着web2.0的兴起,ajax的时代已经成为了事实,更如今Knockout,backbone, angular,ember前端MDV(model driver view)框架强势而来,Single Page Application已经为大家所熟悉了。如今常见的S...

zting科技
2017/01/10
0
0
Web静态资源缓存及优化

前言 对于页面中静态资源(html/js/css/img/webfont),理想中的效果: 页面以最快的速度获取到所有必须静态资源,渲染飞快; 服务器上静态资源未更新时再次访问不请求服务器; 服务器上静态...

美团点评点餐
2017/11/14
0
0
ASP.NET 2.0中Page事件的执行顺序

Page 执行中将按照如下顺序激活事件: Page.PreInit Page.Init Page.InitComplite Page.PreLoad Page.Load Page.LoadComplete Page.PreRender Page.PreRenderComplete 如果页面从令一个页面继......

晨曦之光
2012/03/09
40
0
减少域名DNS解析时间将网页加载速度提升新层次-DNS缓存/预读取/拆分域名

我们知道在用户访问网站时先得经过域名DNS解析这一过程,可能很多人对于DNS解析时间平常并没有太在意。性能稳定、响应时间快的DNS域名解析服务与不稳定、响应过慢的DNS的域名解析时间可能相差...

Joe小桥
2015/10/28
0
0
前端开发攻城师不可忽视的五个HTML5新特性

HTML5已经火了一段时间了,相信作为web相关开发工程师,肯定或多或少的了解和尝试过一些HTML5的特性和编程。还记得以前我们介绍过的HTML5新标签。 作为未来前端开发技术的潮流和风向标,HTM...

gbin1
2013/07/03
6.1K
17
预加载系列一:DNS Prefetching 的正确使用姿势

发现 很多人都知道现代浏览器都支持 DNS 的预解析,学名:DNS Prefetching。用法也很简单,就是在html代码里加入这样的 标签 我们之前的用法是在 Head 为2个 静态资源服务器的域名 和 日志图...

有赞前端
2017/08/24
0
0
开源中国的 AngularJS 优秀文章汇总

Angular JS (Angular.JS)是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。AngularJS很小,只有60K,兼容主流浏览...

oschina
2014/08/24
5.7K
13
前端开发攻城师绝对不可忽视的五个HTML5新特性

特性一:正则表达式 相信大家都会非常喜欢这个特性,无须服务器端的检测,使用浏览器的本地功能就可以帮助你判断电子邮件的格式,URL,或者是电话格式,防止用户输入错误的信息,通过使用HTM...

大雄小熊
2014/01/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

MyBatis入门

一、安装 <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis</artifactId> <version>x.x.x</version></dependency> 二、从 XML 中构建 SqlSessionFactory String r......

一个yuanbeth
12分钟前
0
0
聊聊spring cloud的LoadBalancerAutoConfiguration

序 本文主要研究一下spring cloud的LoadBalancerAutoConfiguration RibbonAutoConfiguration spring-cloud-netflix-ribbon-2.0.0.RC2-sources.jar!/org/springframework/cloud/netflix/ribb......

go4it
15分钟前
0
0
【转】使用Lombok来优雅的编码

前言 Lombok 是一种 Java™ 实用工具,可用来帮助开发人员消除 Java 的冗长,尤其是对于简单的 Java 对象(POJO)。它通过注解实现这一目的。 正文 添加依赖 在 pom.xml 文件中添加相关依赖:...

HAVENT
17分钟前
0
0
Dubbo 源码解读 —— 可支持序列化及自定义扩展

一、概述 从源码中,我们可以看出来。目前,Dubbo 内部提供了 5 种序列化的方式,分别为 fastjson、Hessian2、Kryo、fst 及 Java原生支持的方式 。 针对不同的序列化方式,对比内容如下: 名...

Ryan-瑞恩
24分钟前
0
0
MySQL内存设置—— MySQL server has gone away

set global max_allowed_packet=268435456

一梦心草
34分钟前
0
0
推导式

列表、集合和字典推导式 列表推导式是Python最受喜爱的特性之一。它允许用户方便的从一个集合过滤元素,形成列表,在传递参数的过程中还可以修改元素。形式如下: [expr for val in collect...

火力全開
39分钟前
0
0
maven配置文件settings.xml详解

settings.xml有什么用? 如果在Eclipse中使用过Maven插件,想必会有这个经验:配置settings.xml文件的路径。 settings.xml文件是干什么的,为什么要配置它呢? 从settings.xml的文件名就可以...

浮躁的码农
44分钟前
0
0
MakeCode图形化编程语言学习笔记:micro:bit编程练习题[图]

MakeCode图形化编程语言学习笔记:micro:bit编程练习题[图]: 基础训练题: Q1:摇晃micro:bit编程板,随机出现7个小动物图标中的一个,并且前后相邻两次出现的小动物不重复。 注:七个小动物...

原创小博客
44分钟前
0
0
Redis 压力测试说明

Redis 压力测试说明 redis压力测试 2014-03-24 21:41:07| 分类: 默认分类 | 标签:redis |举报|字号 订阅 这几天对比测试mongodb、redis、pg的性能,主要是在消息队列、消息处理、用户经纬度...

舒文joven
44分钟前
0
0
拉姆达表达式 追加 条件判断 Expression>

public static class PredicateBuilder {   /// <summary>   /// 机关函数应用True时:单个AND有效,多个AND有效;单个OR无效,多个OR无效;混应时写在AND后的OR有效   /// </summary...

Lytf
57分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部