Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

polyfill 的检测与合并加载

  很多 polyfill 都是针对某一个特性而做的,如果直接在头部把所有 polyfill 都引入,势必会造成极大的浪费。所以我觉得 polyfill 应该在做特性判断后视情况再加载。但如果把每个 polyfill 的粒度拆太细,又可能会引发连接数过高的问题。所以最后还需文件合并的支持。
  好像大家都很排斥 document.write 这玩而已,也许是因为坑太多吧。有或者是因为很多新手教程里面都用了这东西,所以大家不屑于用它?但无论有多难看,不得不承认 document.write 确实时同步加载的一个好办法。如果手动创建一个元素在插入 head 中,它的执行则是异步的。比如现在有个 a.js // a.js
console.log(2);
  如果代码这么写 <script>
var script=document.createElement("script");
script.src="a.js";
document.head.insertBefore(script,null);
</script>
<script>
console.log(1);
</script>
  会先输出 1 再输出 2,不会因为 insertBefore 的执行而让程序陷入等待加载的状态。此时如果使用 document.write <script>
document.write('<script src="a.js"><\/script>');
</script>
<script>
console.log(1);
</script>
  在执行完 document.write 后会陷入等待,直到 a.js 加载并执行完成后才会执行后面的 SCRIPT,这才是同步的。所以很多 polyfill 的加载就会变成这样 if(!window.localStorage)
  document.write('<script src="localstorage.js"><\/script>');
if(!window.Promise)
  document.write('<script src="promise.js"><\/script>');
// etc.
  这样就可以非常明确地只加载需要的 polyfill 了。但确实粒度太细,造成了请求过多。所以还需要一个合并,这需要服务器程序的参与 var requirelist=[];
if(!window.localStorage)requirelist.push("localstorage.js");
if(!window.localStorage)requirelist.push("promise.js");
// etc.
document.write('<script src="merge.js?'+requirelist+'"><\/script>');
  这样就合并成了一个资源,但是服务器程序需要对 merge.js 做一些合并文件的处理,这应该不难,这里就不写代码了。我觉得这是一种优秀的代码加载方式,不要看到 document.write 就急着吐槽,有时候它确实是有用的。
网名:
34.203.213.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^