前端加载技术

标签：head   targe   函数   应用   bsp   访问   应该   document   fetch   

参考 

    前端性能优化之加载技术 

　　关于Preload, 你应该知道些什么？

　　Preload，Prefetch 和它们在 Chrome 之中的优先级

对以下文章的补充

　　简单汇总了一下web的优化方案

　　关于页面加载

图片处理：

　　预加载，在onload之后动态插入img标签，使浏览器提前缓存该图片

　　懒加载，使用onload之后手动设置src，src的值存放在标签的某个属性上即可（如data-x-src），实现策略：滚动监听、节流函数、手动设置src值

模块处理：

　　webpack code split

dns预解析

当浏览器真正请求该域中的某个资源时，DNS 的解析就已经完成了

<link rel="dns-prefetch" href="//example.com">

tcp预连接

预先建立 socket 连接，从而消除昂贵的 DNS 查找、TCP 握手和 TLS 往返开销

<link rel="preconnect" href="http://example.com">

资源预获取

优先级低，那就意味着浏览器空闲的时候才会对资源进行获取，可轻松绕过性能瓶颈。下载的资源一般用于将来的页面，而不是当前页面

<link rel="prefetch" href="image.png">

预渲染

会预处理这个页面中所有的资源，慎重使用；确保用户会访问这个链接，才去预渲染，否则可能浪费较多资源（高流量、高cpu）。

<link rel="prerender" href="http://example.com">

应用场景：用户精确搜索出一个结果，那可以预渲染这个页面链接；阅读中，预渲染下一个页面的内容。

preload

参考：https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/

<link rel="preload">

浏览器可以正确指定优先级，即preload不会影响当前页面重要资源的下载

有as属性，常用的值有：script、style、image、media、document

不会阻碍window.onload的触发

拥有自己的onload事件

提前加载一个js：

<link rel="preload" href="late_discovered_thing.js" as="script">

脚本化

var preload = document.createElement("link");
link.href = "myscript.js";
link.rel = "preload";
link.as = "script";
document.head.appendChild(link);

预加载css后马上使之生效

<link rel="preload" as="style" href="async_style.css" onload="this.rel=‘stylesheet‘">

应用到js上

<link rel="preload" as="script" href="async_script.js"
onload="var script = document.createElement(‘script‘);
        script.src = this.href;
        document.body.appendChild(script);">

配合媒体查询：

<link rel="preload" as="image" href="map.png" media="(max-width: 600px)">
<link rel="preload" as="script" href="map.js" media="(min-width: 601px)">

对于当前页面很有必要的资源使用 preload，对于可能在将来的页面中使用的资源使用 prefetch

前端加载技术

标签：head   targe   函数   应用   bsp   访问   应该   document   fetch   

原文地址：http://www.cnblogs.com/hellohello/p/7635005.html