script标签加载优化

HTML中script标签加载问题

HTML文档为一行一行从上往下加载。当加载到script标签时会停下所有加载等待script加载完毕,当script放在head标签中时,用户加载网页时会先加载script标签,使得body中的内容没法第一时间加载,导致页面处在一片空白状态下,直到script加载完毕。

在头文件的script全部加载完毕前浏览器会处于阻塞状态,而页面内容都在body标签中,如果将script标签全部放在head标签中会导致用户在script加载完毕前处于空白界面无法进行交互。

解决办法:将script放在body标签底部

为了避免这种情况应该尽量将script放在body标签的底部,先加载界面内容再加载script。

发起http请求会有时间损耗,会导致下载一个100kb的文件所需时间小于下载4个25kb的文件所需时间。所以需要尽量将外联js文件合并,减少下载次数。但需要注意的是,js会阻塞浏览器,虽然一次下载完所有的js文件会减少http的时间损耗,但是js文件越大阻塞浏览器的时间就越大。所以好一点的办法就是逐步添加script。具体实现方法如下所示。

1. 延期脚本

Html4为script增加了一种新的属性defer,可以使script延期加载。

 <script type="text/javascript" src="test.js" defer> </script>

2. 动态脚本元素

Dom允许动态加载脚本,我们可以动态加载script标签。

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "test.js";
document.getElementsByTagName("head")[0].appendChild(script);

此文件当元素添加到文档中后会立刻启动下载,此技术重点在于无论在何处下载,文件的下载和运行都不会阻塞页面其他内容

动态添加元素在加载完毕后会发出一个load事件。

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "test.js";
script.onload = function() {
   alert("script is readly");
}
document.getElementsByTagName("head")[0].appendChild(script);

ie没有onload事件。有差不多功能的onreadystatechange事件

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "test.js";
script.onreadystatechange = function() {
    if (script.readyState == "loaded" || script.readyState == "complete"){
      script.onreadystatechange = null;
      alert("script is readly");
    }
}

为了兼容,所以将两个函数整合成如下函数

function loadScript(url, callback){
    var script = document.createElement ("script")
    script.type = "text/javascript";
    if (script.readyState){ //IE
        script.onreadystatechange = function(){
            if (script.readyState == "loaded" || script.readyState == "complete"){
                script.onreadystatechange = null;
                callback();
            }
        };
    } else { //Others
        script.onload = function(){
            callback();
        };
    }
    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}

在使用时可以直接使用script下载仅仅含有loadScript的js文件,然后用loadScript函数去下载其他标签。

<script type="text/javascript" src="loader.js"></script>
<script type="text/javascript">
loadScript("test.js", function(){
    alert(‘test alert ready‘)
});
</script>
时间: 2024-10-03 14:55:48

script标签加载优化的相关文章

javascript动态创建script标签,加载完成后调用回调

代码如下: var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.type = 'text/javascript'; script.charset = 'GBK'; script.onload = script.onreadystatechange = function() { if (!this.readyState || this.r

Vue SPA 首屏加载优化实践

写在前面 本文记录笔者在Vue SPA项目首屏加载优化过程中遇到的一些坑及优化方案! 我们以 vue-cli 工具为例,使用 vue-router 搭建SPA应用,UI框架选用 element-ui , ajax方案选用 axios, 并引入 vuex ,使用 vuex-router-sync 将 router 同步到 store ,服务器使用本地Nginx服务. 构建项目 vue-init webpack vue-spa-starter-kit cd vue-spa-starter-kit n

vue项目首屏加载优化实战

问题 单页面应用的一个问题就是首页加载东西过多,加载时间过长.特别在移动端,单页面应用的首屏加载优化更是绕不开的话题.下面我会写出我在项目中做的一些优化,希望大家能够相互讨论,共同进步. 我的项目vue-cli3构建的,vue+vue-router+vuex,UI框架选用 element-ui,ajax方案选用 axios,服务器使用Nginx.用到的这些技术都是现在用的比较广泛的,看到这篇文章,我估计你和我用的技术应该差不多. 第一步:webpack-bundle-analyzer 分析 首页

spring源码阅读(二) Bean加载之自定义标签加载

紧接着上一篇关于spring默认标签加载,这一篇来看下自定义标签的加载 继续从 DefaultBeanDefinitionDocumentReader来看 protected void parseBeanDefinitions(Element root, BeanDefinitionParserDelegate delegate) { if (delegate.isDefaultNamespace(root)) { NodeList nl = root.getChildNodes(); for(

网络图片加载优化

网络图片加载优化 比如使用淘宝浏览产品的时候(大部分应用也是如此),就会发现每次下拉产品目录进行更新的时候,都会出现对应的Item的时候,才开始从网络下载并加载图片. taobao加载 可以看到宝贝图片下拉刷新的时候,图片加载是实时从网络下载的.即使在Wifi的网络环境下,加载图片也是有比较大的延迟. 假设我们浏览每屏宝贝需要2s的时间(人眼对于淘宝搜索的宝贝其实过滤速度非常快).如果每一屏页面需要1s才可以完全加载完图片,则如果浏览10屏的宝贝,就会需要30s.如果加载图片几乎不需要时间,则只

让我们再聊聊浏览器资源加载优化

让我们再聊聊浏览器资源加载优化 让我们再聊聊浏览器资源加载优化

js资源加载优化

互联网应用或者访问量大的应用,对js的加载优化是不可少的.下面记录几种优化方法 CDN  + 浏览器缓存 CDN(content delivery network)内容分发网络, 最传统的优化方式.其实就是将自己页面所依赖的js(静态的)放置到CDN上,或者使用一些CDN库,以此降低对应用服务器的请求,而浏览器缓存也是不重复加载js文件的性质. 优点: 1.简单.容易维护 2.304 cache 简单来说就是转掉请求,缓存不重加载. 缺点: 1.缓存会失效,当用户强制刷新时会有请求 2.无法增量

网页的资源加载优化

移动开发中很重要的一块是资源的加载优化.移动开发由于网速低带宽,高延迟,移动设备小内存,低处理器性能的原因,因此很多时候不得不通过优化前端页面的性能来满足用户对网页加载的预期. 前段时间做了相关方面的优化,发现网上的中文教程比较少,都是照着chrome开发者网站上一步一步看下来,找问题来解决,因此将部分有用的网页整理翻译了一下. 一.查看网页加载速度 网页加载时长受到网速影响,一般采用浏览器模拟一个特定网速进行测试,这样优化前与优化后的结果会有一个较准确的对比. 方法:打开调试面板-选择网速,一

页面加载优化的14条原则

1. 尽可能的减少 HTTP 的请求数 [content] 2. 使用 CDN(Content Delivery Network) [server] 3. 添加 Expires 头(或者 Cache-control ) [server] 4. Gzip 组件 [server] 5. 将 CSS 样式放在页面的上方 [css] 6. 将脚本移动到底部(包括内联的) [javascript] 7. 避免使用 CSS 中的 Expressions [css] 8. 将 JavaScript 和 CSS