HTML动态引用js / css

原创于 2018-09-05 15:56:04 发布 · 2.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #js #fragment

前端专栏收录该内容

46 篇文章

订阅专栏

本文介绍了一种用于网页中动态添加JS脚本和CSS样式的方法，通过创建文档片段并批量添加到DOM树中来减少页面加载时的HTTP请求次数，从而提高网页加载速度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

const LIST = [
  'script',
  'css',
]
function appendDependencies() {
  const jsList = [
    'xxxx.xxxx.js',
  ]
  const cssList = [
    'xx.css'
  ]
  const fragment = document.createDocumentFragment();
  // add js
  _append(jsList, fragment);
  
  // // add css
  _append(jsList, fragment, 'css');

  document.querySelector('head').appendChild(fragment);

}
function _append(obj, root, type = 'script') {
  if (!LIST.includes(type)) {
    throw new Error(`type must be one of ${LIST.join(',')} !`);
  }

  // loop the list to append each child
  if (Array.isArray(obj)) {
    return obj.forEach(item => {
      _append(item, root, type);
    });
  }
  let _node;
  // specialized each item's type
  switch(type) {
    case 'script':
      _node =  document.createElement('script');
      _node.setAttribute('type', 'text/javascript');
      break;
    case 'css':
      _node = document.createElement('link');
      break;
  }
  _node.setAttribute("charset", "utf-8");
  _node.setAttribute("href", obj);
  root.appendChild(_node);
  return;
}