重操JS旧业第一弹：Script与JS加载

不管js被包装成什么样子，最终交给浏览器执行的js都是原生的，都离不开原生js的原理。

Script标签纸html中用来加载js的标签，我们知道js可以是来自外部，本地，或者内部一段代码，在这里只讨论来自外部的加载，对于一个随时进行网络数据交换的浏览器而言，网络请求必然是异步执行的，自然的js文件一般来说异步执行比较好，不容易造成UI卡顿，但是Script标签默认加载js是同步，阻塞式的，也就是说默认情况下浏览器按照从上至下，从左自右的方式解释执行脚本，对于同步请求js文件会造成js文件下载完成才真正渲染UI，这点道理非常容易理解。提高Web用户体验？

1 异步下载js文件，这里可以在script标签内部使用async，表示异步下载该文件：<script src="xxx.js" async>

2 延迟加载，这里使用defer关键字，表示整个文档html元素加载完成才开始下载js文件，但这并不意味着一定在文档load事件之前或者之后发生，<script src="xxx.js"  defer>，如果有多个这样的js延迟加载他们的

顺序也不确定，所以一般来说defer使用得较少

3 ui加载完成开始加载js，这里很简单，直接将<script src="xxx.js">放到文档末尾就可以了

知识点：同步，异步

时间： 2024-11-08 22:59:16

重操JS旧业第一弹：Script与JS加载的相关文章

&lt;script&gt;标签的加载解析执行

转自原文 <script>标签的加载解析执行 看了很多网上的文章,都是大同小异.总结一下.内部原理还没有搞清楚,有机会再学习. 一.<script>标签的加载解析执行顺序 html页面中的<script>标签中的内容(直接写入或者引用外部文件都一样)是以顺序加载执行的,每个<script>标记内容可以当成一个独立的块,同步的情况下一个块加载解析然后执行完后才加载下一块.当然这时也会阻塞其他页面元素的加载.所以网上说的变量调用: <script type

js数据显示在文本框中(页面加载显示和按钮触动显示)

web代码如下: <!DOCTYPE html> <html> <head> <title>jsTest02.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is

弹出窗口，加载页面

弹出窗口,加载页面.要求jquery,加入jquery-ui可实现弹出窗口拖动. 1 var _divMask; 2 var _divBox; 3 4 function ShowMask() { 5 var divMask = $('<div></div>') 6 .attr("id", "divMask") 7 .css({ 8 "position": "absolute", 9 "left

Eclipse中使用Tomcat加载项目在浏览器中访问的时候JS和CSS等静态文件无法加载的问题

首先,我的Eclipse是引用外部的Tomcat 引用外部Tomcat会在左侧生成一个Server文件夹,相当于复制了一份Tomcat到Eclipse的安装目录里 具体Tomcat所在目录可以在这进行查看 双击Tomcat服务,会打开一个窗口,然后点击Open launch configuration,可打开配置窗口,在这里可以查看到具体服务所在位置. 接下来步入正题,正如题目所说,Eclipse中使用Tomcat加载项目在浏览器中访问的时候JS和CSS等静态文件无法加载,如图 仔细看下路径,会

PPK谈JS笔记第一弹

以下内容是读书笔记,再一次温习JS好书:PPK谈JS window.load＝initializePageaddEventSimple('window','load',function(){}) load事件在页面被完成加载时触发,显然这正是我们初始化脚本所需要的.问题是如果同时批量初始化,可能会发生替换,最后的赋值会替换前面的. js变量名,方法名等区分大小写使用分号作为语句分隔符注释是// /**/代码块使用{} undefined nullundefined:你访问了一个对象不存在的属性或

JS实现下拉刷新和上拉加载

<!DOCTYPE html><html><head> <title></title> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> <style type="text/css"> #slideDown{margin-t

原生JS实现AJAX、JSONP及DOM加载完成事件

一.JS原生Ajax ajax:一种请求数据的方式,不需要刷新整个页面:ajax的技术核心是 XMLHttpRequest 对象:ajax 请求过程:创建 XMLHttpRequest 对象.连接服务器.发送请求.接收响应数据: 下面简单封装一个函数,之后稍作解释 ajax({ url: "./TestXHR.aspx", //请求地址 type: "POST", //请求方式 data: { name: "super", age: 20 },

selenium 学习-js执行，事件模拟，页面加载等待

selenium  使用的时候要注意 1,浏览器的版本 2,和对应 jar 包 3,浏览器的环境变量设置 System.setProperties("key","value") 如下(创建浏览器对象): System.getProperties().setProperty("phantomjs.binary.path", ""phantomjs-2.1.1-windows/bin/phantomjs.exe"&quo

[转]IE9.0或者360下js(JavaScript、jQuery)不能正确执行(加载)，按F12后执行正常;Firefox下ajax的success返回数据data(json、string)无法获取

兼容问题1: 页面的分享等插件加载不全,并无法点击. 兼容问题2: IE下页面选择器(#id..class.etc.)绑定click事件无法访问到,后台springmvc方法,也无法获取ajax的success方法返回值data. 兼容问题3: 在IE和Google下能够获取,ajax的success返回的数据data,但firefox下获取不到. 兼容问题4: 页面跳转,或url进入,js代码不能正确执行,如果按了F12后(开启F12),JavaScript(加载)事件可以正常响应,一切都正常