首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

12、webpack从0到1-PrefetchingPreloading

简单说下webpack中关于Prefetching/Preloading的设置。 git仓库:webpack-demo 1、是什么?...Prefetching:设置这个指令,就表示允许浏览器在后台(空闲时)获取将来可能用得到的资源,并且将他们存储在浏览器的缓存中。...webpack-Prefetching/Preloading modules 什么是 Preload,Prefetch 和 Preconnect?...点击页面前 点击页面后 3、设置Prefetching 那接下来设置一下Prefetching,很简单: // 动态加载footer模块 document.body.addEventListener...而Prefetching我们一般用的比较多,也比较好理解,用官网的例子来说:一般当我们进入一个网站首页,只有当点击登录按钮的时候模态框才需要弹出来,那么我们就可以对这个login模态框组件做下Prefetching

74030

DNS预解析详解

遇到网页中的超链接,DNS prefetching从中提取域名并将其解析为IP地址,这些工作在用户浏览网页时,使用最少的CPU和网络在后台进行解析。...chrome使用8个线程专门做DNS Prefetching,而且chrome本身不做dns记录的cache,是直接从操作系统读dns。...浏览器会对a标签的href自动启用DNS Prefetching,所以a标签里包含的域名不需要在head中手动设置link。但是在HTTPS下面不起作用,需要meta来强制开启功能。...这个限制的原因是防止窃听者根据DNS Prefetching推断显示在HTTPS页面中超链接的主机名。 DNS解析的包很小,一个UDP的包小于100 bytes,却平均可节省200ms。...HTTPS页面DNS prefetching 下面的例子,该页面只会预解析b.com,而不会预解析a.com、c.com、d.com。

26.8K40
您找到你想要的搜索结果了吗?
是的
没有找到
领券