浏览器渲染过程与性能优化

HTTP缓存

经由过程收集来获取资本平日是迟缓的，如不雅资本文件过于膨大年夜，浏览器还须要与办事器之间进行多次往返通信才能获得完全的资本文件。缓存可以复竽暌姑之前获取的资本，既然后端可以应用缓存来削减拜访数据库的开销，那前端天然也可以应用缓存来复竽暌姑资本文件。

浏览器自带了 HTTP 缓存的功能，只须要确保每个办事器响应的头晨都包含了以下的属性：

浏览器衬着过程与机能优化

如不雅可以让 CSS 资本只在特定前提下应用，如许这些资本就可以在初次加载时先一向行构建 CSSOM 树，只有在相符特定前提时，才会让浏览器进行壅塞衬着然后构建 CSSOM 树。

1、ETag： ETag是一个传递验证令牌，它对资本的更新进行检查，如不雅资本未产生变更时不会传送任何数据。当浏览器发送一个请求时，会把ETag一路发送到办事器，办事器会根据当缁な源查对令牌(ETag平日是对内容进行 Hash 后得出的一个指纹)，如不雅资本未产生变更，办事器将返回 304 Not Modified 响应，这时浏览器不必再次下载资本，而是持续复竽暌姑缓存。

2、Cache-Control： Cache-Control定义了缓存的策略，它规定在什么前提下可以缓存响应以及可以缓存多久。

no-cache： no-cache表示必须先与办事器确认返回的响应是否产生了变更，然后才能应用该响应来知足后续对同一网址的请求(每次都邑根据ETag对办事器发送请求来确认变更，如不雅未产生变更，浏览器不会下载资本)。
no-store： no-store直接禁止浏览器以及所有中心缓存存储任何版本的返回响应。简单的说，该策略会禁止任何缓存，每次发送请求时，都邑完全地下载办事器的响应。
public&private：如不雅响应被标记为public，则即使它有接洽关系的 HTTP 身份验证，甚至响应状况代码平日无法缓存，浏览器也可以缓存响应。如不雅响应被标记为private，那么这个响应平日只为单个用户缓存，是以不许可任何中心缓存(CDN)对其进行缓存，private一般用在缓存用户私家信息页面。
max-age： max-age定义了大年夜请求时光开端，缓存的最长时光，单位为秒。

资本预加载

如今，我们要优化关键衬着路径，起首将 <script> 标签添加异步属性 async ，如许浏览器的 HTML 解析器就不会壅塞这个 JavaScript 文件了。

Pre-fetching 是一种提示浏览器预先加载用户之后可能会应用到的资本的办法。

应用 dns-prefetch 来提进步行 DNS 解析，以便之后可以快速地拜访另一个主机名(浏览器会在加载网页时对网页中的域名进行解析缓存，如许你在之后的拜访时无需进行额外的DNS解析，削减了用户等待时光，进步了页面加载速度)。

<linkrel="dns-prefetch"href=http://mobile.51cto.com/"other.hostname.com">

<linkrel="prefetch"href=http://mobile.51cto.com/"/some_other_resource.jpeg">

<linkrel="subresource"href=http://mobile.51cto.com/"/some_other_resource.js">

prerender 可以预先衬着好页面并隐蔽起来，之后打开这个页面会跳过衬着阶段直接涌如今用户面前(推荐对用户接下来必须拜访的页面进行预衬着，不然得不偿掉)。

<linkrel="prerender"href=http://mobile.51cto.com/"//domain.com/next_page.html">

【编辑推荐】

Oculus 推出VR浏览器 Carmel
VR浏览器，可否引爆新场景下的“人口之战“？
VR浏览器高潮，VR家当周全渗入传统浏览器市场
开启HSTS让浏览器强迫跳转HTTPS拜访
AgentWeb是基于Android WebView一个功能完美小型浏览器库

【义务编辑：未丽燕 TEL：（010）68476606】

6/6 首页上一页 4 5 6

　　推荐阅读

　　洞察| 创新帮助制造业企业跑赢数字化转型攻坚战

就连腾讯董事会主席兼首席履行官马化腾在近期召开的“2017中国两化融合大年夜会”上也几回再三强调，制造业是数字经济的主疆场，它的转型进级将是新一轮全球数字竞争的关键。对>>>详细阅读

本文标题：浏览器渲染过程与性能优化

地址：http://www.17bianji.com/lsqh/37738.html

1/2 1