文档章节

web性能优化之:prefetch和prerender.

duozuo2006
 duozuo2006
发布于 2016/12/11 19:00
字数 609
阅读 33
收藏 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
记录从quicklink源码中发散出来的知识点

最近Google Chrome lab的一个开源项目quicklink很火,号称可以极大提升页面的加载速度,社区中也有很多使用该项目来做页面加载优化的尝试,但quicklink项目本身的实现其实极为简洁,源码总共...

墨筝
2018/12/22
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
【性能优化】quicklink:实现原理与给前端的启发

近来,GoogleChromeLabs 推出了 quicklink,用以实现链接资源的预加载(prefetch)。本文在介绍其实现思路的基础上,会进一步探讨在预加载方面前端工程师还可以做什么。 1. quicklink 是什么...

AlienZHOU
2018/12/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Nextjs+React非页面组件SSR渲染

@随风溜达的向日葵 Nextjs Nextjs是React生态中非常受欢迎的SSR(server side render——服务端渲染)框架,只需要几个步骤就可以搭建一个支持SSR的工程(_Nextjs_的快速搭建见Next.js入门)...

随风溜达的向日葵
53分钟前
0
0
如何在 Linux 系统查询机器最近重启时间

在你的 Linux 或类 UNIX 系统中,你是如何查询系统上次重新启动的日期和时间?怎样显示系统关机的日期和时间? last 命令不仅可以按照时间从近到远的顺序列出该会话的特定用户、终端和主机名...

来来来来来
今天
3
0
Redis协议是什么样的

前言 我们用过很多redis的客户端,有没有相过自己撸一个redis客户端? 其实很简单,基于socket,监听6379端口,解析数据就可以了。 redis协议 解析数据的过程主要依赖于redis的协议了。 我们...

春哥大魔王的博客
今天
6
0
乱入Linux界的我是如何学习的

欢迎来到建哥学Linux,咳!咳!咳!开个玩笑哈,我是一个IT男,IT界的入门选手,正在学习Linux。 在之前,一直想进军IT界,学习IT技术,但是苦于没有人指导,也不知道学什么,最开始我自己在...

linuxCool
今天
4
0
携程Apollo统一配置中心的搭建和使用(java)

一.Apollo配置中心介绍 1、What is Apollo 1.1 Apollo简介 Apollo(阿波罗)是携程框架部门研发的开源配置管理中心,能够集中化管理应用不同环境、不同集群的配置,配置修改后能够实时推送到...

morpheusWB
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部