异步加载脚本和样式

<script>
        window.onload = function () {
            loadScriptURL(‘script/head.js‘)
            loadScriptcode(‘alert("hahaha");‘);
            loadStyleURL(‘a.css‘);
            var csscode = ‘#box{background:red}‘;
            loadStyleCODE(csscode);
        }
        function loadScriptURL(url) {
            var script = document.createElement("script");
            script.src = url;
            script.type = "text/javascript";
            document.getElementsByTagName(‘head‘)[0].appendChild(script);
        }
        function loadScriptcode(code) {
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.text = code;
            document.getElementsByTagName(‘head‘)[0].appendChild(script);
        }

        function loadStyleURL(url) {
            var link = document.createElement(‘link‘);
            link.rel = ‘stylesheet‘;
            link.href = ‘text/css‘;
            link.href = url;
            document.getElementsByTagName(‘head‘)[0].appendChild(link);
        }

        function loadStyleCODE(code) {
            var style = document.createElement(‘style‘);
            style.type = ‘text/css‘;
           var box = document.createTextNode(code);// IE 低版本不支持
            style.appendChild(box);
            document.getElementsByTagName(‘head‘)[0].appendChild(style);
        }

    </script>

异步加载脚本和样式

时间: 2024-10-27 14:19:57

异步加载脚本和样式的相关文章

高性能网站优化-确保异步加载脚本时保持执行顺序

<高性能网站建设进阶指南> 脚本如果按照常规方式加载,不仅会阻塞页面中其他内容的下载,还会阻塞脚本后面所有元素的渲染.异步加载脚本可以避免这种阻塞现象,从而提高页面加载速度.但是性能的提升是要付出代价的.代码的异步执行可能会出现竞争状态.简单地说就是页面内部的脚本需要的标示符如果是在外部文件中定义的,而当外部文件异步加载的时候,如果没有保证外部文件和内部脚本执行顺序,很有可能会出现未定义标示符的错误 当异步加载的外部脚本与行内脚本之间存在代码依赖时,就需要通过一种保证执行顺序的方法来整合这两个

第一百一十八节,JavaScript,动态加载脚本和样式

JavaScript,动态加载脚本和样式 一动态脚本 当网站需求变大,脚本的需求也逐步变大.我们就不得不引入太多的JS脚本而降低了整站的性能,所以就出现了动态脚本的概念,在适时的时候加载相应的脚本. 比如:我们想在需要检测浏览器的时候,再引入检测文件. 1动态加载js文件 window.onload = function() { //window.onload事件,等待html执行完成后,执行匿名函数 //判断要加载的文件是否加载成功 alert(typeof BrowserDetect); }

WebKit 中异步加载脚本(Running scripts in WebKit)- 大大提升界面呈现速度

WebKit 中异步加载脚本(Running scripts in WebKit)- 大大提升界面呈现速度 太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS.Android.Html5.Arduino.pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作. Running scripts in

JavaScript的DOM_动态加载脚本和样式

一.动态加载脚本 当网站需求变大,脚本的需求也逐步变大.我们就不得不引入太多的 JS 脚本而降低了整站的性能,所以就出现了动态脚本的概念,在适时的时候加载相应的脚本. 1.动态加载js文件 比如:我们想在需要检测浏览器的时候,再引入检测文件. <script type="text/javascript"> window.onload = function(){ alert(typeof BrowserDetect); } var flag = true; //设置 true

异步加载脚本保持执行顺序

首先是外部脚本和行内脚本,对于异步加载的脚本,会导致竞争状态,使得出现未定义的错. 采用Script Dom技术测试: 代码: <script type="text/javascript"> var scriptElem = document.createElement('script');  scriptElem.src = "js/jquery-2.1.1.js"; document.getElementsByTagName('head')[0].a

动态加载脚本和样式

当网站需求变大,脚本的加载就很关键了. 动态加载能减少不必要的脚本加载,提高js执行速度. 首先,动态加载JS脚本文件demo.js.代码如下: window.unload=function(){ var flag=true; if(flag){ var script=ducument.createElement('script'); script.type='text/javascrpt'; script.src='demo.js'; docement.getElementsByTagName

动态加载脚本和样式(转)

一.元素位置 这次补充一个 DOM 的方法:getBoundingClientRect().这个方法返回一个矩形对象,包含四个属性:left.top.right和 bottom.分别表示元素各边与页面上边和左边的距离. var box = document.getElementById('box');//获取元素 alert(box.getBoundingClientRect().top);//元素上边距离页面上边的距离 alert(box.getBoundingClientRect().rig

JavaScript学习10:动态加载脚本和样式

我们在写Web页面的时候,需要引入很多的JavaScript脚本文件和CSS样式文件,尤其是在网站需求量很大的时候,脚本的需求量也随之变大,这样一来,网站的性能就会大打折扣,因此就出现了动态加载的概念,即在需要的时候才去加载对应的脚本和样式.下面我们就来看看如何实现动态加载.  动态脚本: 先来看一个动态加载js文件的代码示例: //动态加载JS var flag=false ; if(flag){ loadScript('browserdetect.js'); } function loadS

Javascript动态加载脚本与样式

一   动态加载js 动态加载js的必要性: 1.    项目越做越大,大量引入的js会导致性能问题: 2.   实际项目可能会遇到:需要在一个js文件中引用另一个js文件中的函数,可是另一个函数有没有办法在页面中通过该<script>标签加载. 网上看了几篇博客大概有三种方式: 1.直接document.write<script language="javascript">    document.write("<script src='jia