script的加载和执行

最新推荐文章于 2024-03-05 14:09:43 发布
最新推荐文章于 2024-03-05 14:09:43 发布
阅读量1.3k 收藏 1
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41033913/article/details/103844275
版权

script的加载和执行

脚本的位置

JavaScript代码的下载和执行是阻塞其他文件的下载的

  • 如果把<script>标签放到<head>中，那么，假设需要加载三个js文件和一个css文件，那么运行图就是，
    执行JavaScript代码阻塞其他文件的下载
  • 如果把<script>标签放到前面：我们知道HTML的渲染是从上至下的，当把所有的HTML渲染完成之后，但是在用户打开时能够看到页面时有基本的HTML内容的，只是可能暂时不能完成交互，这样是能够留住用户的。
  • 可能有人就会问，一定是要放到之前吗？不能放到</body>之后</html>之前吗？其实这个问题我看别人的解释是没有什么区别的，具体可以看为什么把 Script 标签放在 body 结束标签之后 html 结束标签之前？

组织脚本

为什么会存在阻止脚本，因为每次去请求script文件的时候，就是一次HTTP请求，这是需要消耗资源的，我们试着去想象，如果页面中有100个10K的script文件，和只有1个1000Kscript文件去对

最低0.47元/天 解锁文章
张小益达
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript 程序的执行
qq_32508383的博客
11-12 627
我们可以把 JavaScript 程序的执行想象成发生在两个阶段。 第一阶段 脚本加载执行阶段 文档内容加载完成，<script> 元素指定的（内部和外部）代码运行。脚本通常按照它们在文档中出现的顺序依次加载。 任何一个脚本中的 JavaScript 代码都自上而下运行，当然还要服从 JavaScript 的条件、循环和其他控制语句。 第二阶段 事件异步处理阶段 当文档加载完毕且所有脚本都运行之后，JavaScript 执行就进入了第二阶段。 这个阶段是异步的、事件驱动的。如果脚本要
loadscript加载
weixin_34056162的博客
11-04 328
function load_script(xyUrl, callback){ var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.type = 'text/javascript'; script...
javascript脚本怎么运行,javascript怎么编写脚本
chatgpt001的博客
12-01 1306
当把JavaScript代码放置在body区域时，页面加载过程中，遇到代码就会解释执行，如果代码中试图访问未定义的DOM元素，或者试图访问还未加载完成的DOM元素，容易造成错误。在JavaScript代码中，语句按照行解释，分号结束不是必须的，所以如果你的语句没有分号结束，那么请按照一行独占的方法，写代码，如果有分号结束时，语句可以排列在一行中。代码的编写是为了让计算机执行，但是有些代码复杂度高，一定要编写注释，注释是给人读的，是为了能够让团队成员，或者其他程序要看懂的描述。
script脚本加载和执行
weixin_38551805的博客
04-14 575
1.推迟脚本执行 defer,立即下周，延迟执行。脚本会被延迟到整个页面都解析完毕后再运行 <script defer src="example1.js"></script> 2.异步执行脚本 async <script async src="example2.js"></script> 异步加载，顺序未定 3.动态加载脚本 let script = document.createElement('script'); script.src = 'g..
js动态加载script脚本
qq_35972609的博客
09-02 4146
js动态加载script脚本 // 动态加载script资源 function loadScript(url, cb) { const script = document.createElement('script'); script.type = 'text/javascript'; if(script.readyState) { // IE浏览器 script.onreadystatechange = function() { if (s
异步加载script的代码
09-05
在网页开发中，异步加载（Asynchronous Loading）是一种优化技术，用于提高页面加载速度和用户体验。当一个页面需要加载大量的JavaScript脚本时，如果所有脚本都按顺序同步加载，可能会导致页面阻塞，直到所有脚本...
Javascript 加载和执行-性能提高篇
10-27
总的来说，优化JavaScript的加载和执行是提升网页性能的重要途径，通过合理组织脚本、延迟加载、压缩和异步加载等方式，可以显著改善用户体验。同时，应关注代码的可维护性和组织结构，避免不必要的计算和操作，以...
动态加载script文件的两种方法
09-05
动态加载JavaScript文件是Web开发中常见的一种优化策略，它能够提高网页的...通过选择合适的加载策略，开发者可以更好地控制脚本的执行时机，从而达到按需加载和延迟加载的目的，减少首屏加载时间，提升网页加载速度。
JavaScript提高加载和执行效率的方法
10-20
异步加载与延迟执行异步加载（async）和延迟执行（defer）是两种可以改善JavaScript加载和执行效率的技术。 1. 异步加载（async）：通过在<script>标签中添加async属性，可以让浏览器非阻塞地下载JavaScript文件，...
浏览器运行JavaScript代码的几种方式
最新发布
sdujava2011
03-05 1277
如果只是本人临时调试可以使用方法一和三，如果把代码分享给其他人方便使用可以使用方法二和四。
javascript中function详解
forgiveForever的博客
03-31 7787
js,function, 函数，函数详解，函数内部参数
让网页中的Java Script代码自动执行的三种方法
Bob的博客
04-18 7340
转自：开源中国--柠檬酷 整理：Bob 在网页中JS函数自动执行常用三种方法： 　　在HTML中的Head区域中，有如下函数：  LANGUAGE = "JavaScript">   　　functionn MyAutoRun() 　　{   　　　//以下是您的函数的代码，请自行修改先！ 　　　alert("函数自动执行哦！");   　　}
【JavaScript性能优化】------理解Script标签的加载和执行
AC_greener的博客
09-07 1591
1.script标签是如何加载的？ 当浏览器遇到一个 &lt; script&gt;标签时，浏览器会停下来，运行JavaScript代码，然后再继续解析、翻译页面。同样的事情发生在使用 src 属性加载 JavaScript 的过程中。浏览器必须首先下载外部文件的代码，需要占用一些时间，然后解析并运行此JavaScript代码。此过程中，页面解析和用户交互是被完全阻塞的。 2.script...
【运行Shell Script程序】
yxq422976的博客
08-02 1744
if…else三元表达式 分支结构 1.输入一个分数，判断该分数是ABCD中哪一级（A：[90,100]，B：[70,90），C：[60，70），D：[0，60）） 2.输入x值，输出y的值：y={█(2x(x>5)@10-x(x<5)@x-2(x=5))┤ 3. 输入一个4位（含4位）以内的正整数，判断这个数字是几位数，并输出该数字的每位数字之和 4.输入2个数字和加减乘除中的一个符号，输出对应的结果 5.输入一个2位正整数，这个数字如果是奇数，输出各位数字之和，如果是偶数，输出各位数字之差
script标签中src属性解释
m0_52364694的博客
09-17 2934
script标签加载src属性时，相当于把远程js文件内容直接写到本地js文件中
javascript 过滤 script 非法标签 防止注入
热门推荐
清晨一场梦
07-23 2万+
方法如下： /** * [hasIllegalChar 判断是否含有script非法字符] * @param {[type]} str [要判断的字符串] * @return {Boolean} [true：含有，验证不通过；false:不含有，验证通过] */ function hasIllegalChar(str) { ...
使用 JavaScript 拦截和跟踪浏览器中的 HTTP 请求
Chinaxxren
10-20 715
HTTP 请求的拦截技术可以广泛地应用在反向代理、拦截 Ajax 通信、网页的在线翻译、网站改版重构等方面。而拦截根据位置可以分为服务器端和客户端两大类，客户端拦截借助 JavaScript 脚本技术可以方便地和浏览器的解释器及用户的操作进行交互，能够实现一些服务器端拦截不容易实现的功能。本文将重点介绍通过 JavaScript 脚本在客户端对页面内容进行拦截修改的一些原理和技术。 ...
CSS与JS对DOM的阻塞行为
weixin_34260991的博客
05-28 491
在探讨 CSS、JS 对阻塞行为前，先建立如下的 html，后续的探讨都在这个 html 的基础上进行。 html 文件如下: <!DOCTYPE html> <html lang="en"> <head> <style> div { width: 100px; height: 100px; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值