Javascript 的加载方式大概有以下几种
加载方式一
<script src='http://l.me/1.js'></script>
加载方式二
document.write('<script src="http://l.me/1.js"><\/script>');
加载方式三
var s = document.createElement('script');
s.setAttribute('src', 'http://l.me/1.js');
document.head.appendChild(s);
加载方式四
<script src='http://l.me/1.js' defer='defer'></script>
经过测试发现:
onload时间不变，domready时间, 方案三、四比一、二短很多;
原因分析：
方式一，浏览器遇到script标签是，会去请求资源，请求完之后再执行，在此期间block了对此元素后面dom元素的渲染，所以domready时间拉长了。
方式二，原因同方式一，之所以会这样是因为document.write出来的元素也会被即刻渲染，即浏览器输出之后就当作dom元素去处理。
方式三，是常用的动态加载方式，这种做法彻底将加载JS移出文档加载流，实现异步加载。有些人可能会顾虑这样加载会不会影响浏览器对该文件的缓存，其实不会的，因为浏览器缓存是针对请求的，而不是针对请求是怎么来的，就跟ajax请求也会被缓存一个道理。
方法四，添加异步属性，也就是defer，好处在于加载的时候不会block后面的元素，但是目前只有 Internet Explorer 支持 defer 属性。
测试代码如下：
<html>
<head><title>test document.write</title>
<script>
var G_top = +new Date;
</script>
</head>
<body>
<script src='http://l.me/1.js'></script>
<script>
//document.write('<script src="http://l.me/1.js"><\/script>');
/*
var s = document.createElement('script');
s.setAttribute('src', 'http://l.me/1.js');
document.head.appendChild(s);
*/
window.addEventListener('DOMContentLoaded', function (){alert(+new Date - G_top)});
</script>
</body>
</html>
分享到：
相关推荐
4. 监控日志：通过应用的日志输出，可以观察到类加载和更新的过程，帮助我们了解热加载的工作情况。 总之，SpringLoaded是Spring Boot提高开发效率的重要工具，它使得开发者能够在开发过程中快速验证代码更改，减少...
标题所指的知识点是主流JavaScript框架对DOMReady事件的处理方式。DOMReady事件指的是在DOM树构建完成之后立即触发，而不需要等待图片、脚本、样式表等其他资源加载完毕。这一点对于提高用户体验尤为重要，因为在...
在本文中，我们将深入探讨如何在Vue.js应用中利用Three.js库来加载和展示glTF（GL Transmission Format）3D模型。glTF是一种开放标准格式，用于高效地传输和加载三维场景和模型，广泛应用于游戏开发、虚拟现实和增强...
JavaScript（JS）异步加载库是一种能够帮助开发者在网页中延迟加载或按需加载JavaScript资源的工具。这种库可以显著提高网页性能，减少首屏加载时间，优化用户体验，特别是对于那些依赖大量脚本的复杂应用而言。下面...
JavaScript动态加载库是一种技术，它允许开发者在网页运行时按需加载JavaScript文件，而不是一次性在页面加载时加载所有脚本。这种技术对于优化网页性能、减小初始加载时间以及实现模块化开发非常重要。下面将详细...
springloaded spring-boot 热加载
此外，对于现代Web应用，我们还可以使用如`fetch` API或者第三方库如axios来获取数据，同时配合`Intersection Observer` API来监听特定元素是否进入视口，实现按需加载和预加载效果。 总的来说，JavaScript加载特效...
在现代Web开发中，“加载更多”是一种非常常见的交互方式，尤其是在数据量较大的情况下。本篇文章将基于提供的代码片段来深入解析如何使用原生JavaScript来实现“上拉加载更多”的功能。 #### 一、核心概念与原理 ...
VueImagesLoaded是一个专门为Vue.js框架设计的指令，用于检测页面中的图片是否已经完全加载。这个插件由David Desmaisons创建，旨在解决Web应用中图片加载的问题，特别是那些需要在图片加载完成后执行某些操作（如...
SpringLoaded的核心功能是类加载器(ClassLoader)的增强，它能够监测到源代码的变化，并在代码保存后立即重新编译和加载新的类到运行中的应用程序。这样就避免了传统方式下需要停止、重新构建和启动服务的繁琐过程，...
在网页开发中，为了提升用户体验，我们经常需要处理图片加载的方式，使得图片在加载过程中能够从模糊逐渐变清晰。这种效果通常被称为“渐进式图片加载”，它可以在不增加额外带宽消耗的情况下，通过JavaScript（JS）...
SpringLoaded是Spring框架团队开发的一款高效且实用的开发工具，主要功能是实现代码的热加载。在软件开发过程中，特别是Web应用开发时，开发者经常需要频繁地修改代码并测试效果。传统的开发流程要求每次修改后都...
当代码发生改变并保存后，SpringLoaded会监测到这些变化，并自动重新加载受影响的类，使得更新后的代码能够在运行时立即生效。这一特性对于快速迭代和频繁修改的项目尤其有价值，减少了等待服务器重启的时间，提高了...
本资源包“nprogress-master”显然与实现这种功能有关，它包含JavaScript（js）和样式表（css）文件，这些都是创建动态加载条所必需的。接下来，我们将深入探讨顶部加载条的实现原理、nprogress库的功能以及如何使用...
SpringLoaded 1.2.5.RELEASE是该工具的一个版本，发布于2014年，包含了对当时Java版本和Spring框架版本的良好支持。 在使用SpringLoaded时，你需要将其作为Java应用程序的类加载器。当应用运行时，SpringLoaded会...
本文将深入探讨这两个主题，并提供相应的实践应用。 ...在HTML中，我们可以使用`...在实际项目中，我们还可以结合其他技术，如Web Workers进行多线程加载，或者使用预加载库如PreloadJS，进一步优化图片加载和进度管理。
在现代Web应用开发中，优化用户...总的来说，Vue.js提供了强大的插件系统和丰富的社区资源，使得实现懒加载变得简单易行。通过合理利用这些工具，开发者可以构建出高效、响应式的Web应用，为用户提供流畅的浏览体验。
iframe 加载完成的判断方法 在 Web 开发中，判断 iframe 是否加载完成是一个常见的问题。由于 iframe 的加载过程是异步的，因此我们需要使用合适的方法来判断 iframe 是否加载完成。本文将介绍几种判断 iframe 是否...
加载 img 加载图像后调用回调。 安装 使用： component install staygrimm/img-loaded 使用： var loaded = require ( 'staygrimm/img-loaded' ) ; 使用 ： npm install img-loaded 用法 加载（图像，回调） ...
预加载图片的主要目的是减少页面加载时间，防止用户在滚动页面时等待图片加载，尤其对那些大图或者高分辨率图片来说，预加载能显著提升用户体验。 首先，我们来看`jquery.preload.js`和`jquery.preload.min.js`这两...