关于html和javascript在浏览器中的加载顺序问题的讨论(zz)

手把手教你用Kali Linux搭建vulntarget-a靶场环境(附详细配置步骤) 本文详细介绍了如何在Kali Linux环境下搭建vulntarget漏洞靶场,包括环境规划、虚拟化平台配置、靶机系统部署及安全工具链配置等关键步骤。通过实战演练,帮助网络安全从业者和初学者掌握专业级漏洞实验平台的搭建与管理技巧,提升安全测试能力。 阅读详情

前一阵子横扫了javascript,当时自我感觉良好。现在一想,又觉得没什么。今天的任务是把asp.net ajax中客户端页面生命周期那一章研究完。然而,因为这一章的内容使我产生了一些迷惑。这些疑惑在书中都没有只字提及。

一、html页面的详细加载过程是什么呢?页面元素在加载时的优先级是什么?

  二、javascript的作用域、变量的作用域、不同脚本段之间的关系?

  三、html页面的生命周期?

  这些问题真的打中了我的死穴。不了解这些,我就无法透过asp.net ajax的框架看到其底层原理。只知其然而不知其所以然。

  在网上广泛查阅资料的情况下。获得了部分答案。

关于html的加载:

  总体上,html的是按从上到下的顺序边加载边解析,边生成dom对象,至于在html中夹杂的:

  document.write("xxxx");

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

  之类的东西,它们的顺序是怎样的呢?还是一样,如果在解析html时,遇到这些东西就会停止解析,转而执行这些生成语句,如果中间插入外部链接,就转而解析、执行外部链接对应的js。对于以下语句对于不同浏览器存在不同的结果:

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

  在ie中。不会等待aaa.js下载并解析完的,会创建另一线程搞定它,而主线程则越过去。但在ff中。则会等待,直到aaa.js下载、解析、执行完毕。

关于javascript的执行情况,请见本文后面所附的参考资料,里面有详尽的讨论。

关于html中页面的生命周期:

  最重要的两个事件就是onLoad、onUnLoad。onLoad在页面加载完毕的时候触发。onUnLoad在页面的dom销毁完后触发。不过,onLoad有点特殊状况,也请参见本文后面所附的参考资料。一定要引起注意。

  我看了几个站点的html源码,发现如下代码:

<div class="ad1602"><script src="/ggjs/view1602_w.js"></script></div>

  这是某网站在页面中显示广告的代码,国内网站,显示广告一般都是用iframe来引入第三方页面,这儿却是直接用javascript段来生成。后来,我又看了163博客生成的html代码,超变态啊。整个html代码只有一个架子,所有页面的生成都是通过js。我看到它的页面后面引入了几个js文件,最后在页面最后还有一个initAll函数的调用。我没有去仔细研究它的js代码,我怀疑它把所有表现层的功能全面放到客户端的js文件中去了。服务器端仅仅是很少的页面架子和许多的webservices。真是叹为观止啊。

关于一个事件触发多个响应函数:

  我曾想过要自己实现一个c#中委托一样的东西。可以让javascript的事件不止是关联到一个function。可以一次触发一个事件列表。这几天研究asp.net ajax,里面对此有封装。

  asp.net ajax中,可以把一个dom元素封装成asp.net ajax中的Sys.UI.DomElement对象。然后就可以用它的方法:addHandler()、addHandlers()、removeHander()来操作事件列表。真是方便啊。当时不大明白这个原理。今天看到后面参考资料中的两段代码让我彻底明白这中间的细节:

  一、使用dom 2中的接口:

  if(document.addEventListener){
    window.addEventListener('load',f,false);
    window.addEventListener('load',f1,false);
    ……
  }else{
    window.attachEvent('onload',f);
    window.attachEvent('onload',f1);
    ……
  }

  原来,dom中早有这个概念了。才晓得。看来,我对dom还是有许多不了解的地方啊。

  二、这个方法就是纯手实现了。请参见下面代码:

function addLoadEvent(func) {

   var oldonload = window.onload;

   if (typeof window.onload != 'function') {

    window.onload = func;

   } else {

     window.onload = function() {

       if (oldonload) {

         oldonload();

       }

       func();

     }

   }

}

这个函数写得很巧妙。利用匿名函数搞定!

参考资料:

javascript 控制优化页面 js 加载顺序

html的加载过程

动态加载外部css或js文件

如何减少网页的内存与CPU占用

Javascript在页面加载时的执行顺序

document.onLoad事件的奇怪现象

javascript中的attachEvent与addEventListener

判断一个变量是否定义的方法

居然有js写的Virtual OS

第14.5章 高翔博士最新开源框架Lightning-LM源码解读(五):揭秘位姿图优化核心模块,从数学原理到代码实现 本文介绍了Lightning-LM框架中的位姿图优化(PGO)模块实现。该模块通过融合多源定位信息(激光定位、激光里程计、DR等),构建并优化位姿图来获得更精确的位姿估计。 主要内容包括: 模块概况与数据流程:初始化配置→添加PGO帧→分配位姿→优化求解→更新位姿→滑动窗口 16个核心函数详解:从构造函数到边缘化处理,涵盖完整的PGO工作流程 关键技术点:噪声参数设置、优化问题构建、约束添加、异常值处理等 关键数据结构:帧队列管理、顶点和边构建、优化统计信息收集 该PGO模块采用增量式优化方式,支持多种约束 阅读详情

相关推荐

SAP FICO - 外币交易实战:汇率类型配置与货币换算率管理

月底关账前的外币评估就像财务人的"期末考",OB59配置就是你的备考方案。最低值原则(Lowest value principle)最保守。它会比较原始汇率与评估日汇率,取不利方向确认损失。适合风险厌恶型企业,我在制造业客户中应用最多。重估法(Revalue only)更反映市场现状。无论盈亏都按最新汇率调整,适合交易性金融资产处理。有个基金公司客户就靠这个方法及时反映了外汇波动收益。最小差异金额(Minimum difference)是防骚扰设置。

weixin_42524708的博客 358

浅谈vue中index.html、main.js、App.vue、index.js之前的关系以及加载过程

前序 承接上一遍“通过webpack构建vue项目”构建的项目文件,简单阐述一下当我们构建完成后,vue项目中的index.html、main.js、App.vue、index.js的运行加载过程,以及首界面是如何出现的,逐步了解vue项目,针对刚开始接触vue,不知道vue项目如何加载的小白,大神请绕过。 简介 项目部署完成后的项目结构以及解释如下图所示 项目运行 项目的运行入口i...

天涯的博客 8万+

C++五子棋人机对战

使用C++,开发五子棋人机对战,快速提升C++项目开发能力。

程序员Rock的博客 5万+

关于script在页面的最佳位置以及html执行顺序

html文件是自上而下的执行方式,但引入的css和javascript的顺序有所不同,css引入执行加载时,程序仍然往下执行,而执行到<script>脚本是则中断线程,待该script脚本执行结束之后程序才继续往下执行。 所以,大部分网上讨论是将script脚本放在<body>之后,那样dom的生成就不会因为长时间执行script脚本而延迟阻塞,加快了页面的加载速度。 ...

weixin_43562354的博客 560

保姆级教程:手把手教你下载和配置Waymo自动驾驶数据集(附百度网盘链接)

本文提供了一份详细的Waymo自动驾驶数据集下载和配置指南,特别针对国内研究者优化了数据获取方案,包括百度网盘链接和Google Cloud CLI配置。文章还涵盖了环境配置、数据处理实战、可视化分析以及进阶技巧,帮助开发者高效利用这一业界黄金标准数据集进行自动驾驶研究。

weixin_42651281的博客 372

【论文阅读笔记】One Shot 3D Photography

论文主页:https://facebookresearch.github.io/one_shot_3d_photography/ 代码地址:https://github.com/facebookresearch/one_shot_3d_photography   该3D照片方向,由于刚入门,所以会倾向于翻译文章。每个操作上的选择,及为什么不进行另外操作的原因都如数放上。 论文小结   本作的工作是从单张RGB图片生成一个移动视角的3D照片。   其管道大致如下: 由RGB图像通过单目深度估计网络估计深度图

时光机 °的博客 1840

VUE中index.html什么时候加载的mainjs呢

今天突然思考到一个问题,index.html文件中是vue项目的主页,项目入口,那么mainjs是啥时候被index加载运行的呢?是怎么被运行的呢? 1.先来看看vue项目的一个结构解析(非常感谢磊阿磊阿磊磊磊的图片) index.html---主页,项目入口 App.vue---根组件 main.js---入口文件 2.通过2张图片搞清楚index和mainjs的关系和配置 很明显看得出,mainjs中是配置了咱们的页面该渲染在index中的app节点上的,但是vue项目访问最开始

@惊蛰的博客 4172

360可视门铃双摄版数据恢复实战:BIN文件解析与视频重组

本文详细解析了360可视门铃双摄版BIN文件的数据恢复过程,包括文件结构分析、双摄像头数据存储机制及视频重组技术。通过Python开发环境和FFmpeg工具链,成功实现了H.265视频流的解析与重组,为智能家居设备数据恢复提供了实用解决方案。

weixin_29196891的博客 916

关于JS和html代码的执行先后问题

JS代码可以在html代码的&lt;head&gt;和&lt;body&gt;里面引用,所以按照解析html代码的先后顺序来决定JS的执行的先后顺序,可以看下面的一段代码来验证: 1.在&lt;head&gt;里面的JS谁先被引用,谁就优先执行,在本例中外部引用的JS第一个执行。紧接着下面的一个&lt;script&gt;“最先实行”代码执行。 2.在&lt;body&gt;里面的JS要比...

jhhuang4836的专栏 836

Vivado报错-4 [Routed 35-3424] SLL Assignment failed ILP VU19P

Vivado报错[Routed 35-3424] SLL Assignment failed ILP VU19P

weixin_39896700的博客 1409

EML 全面实践指南:把 SAP RAP 业务对象玩出工程化的稳定与优雅

本文面向掌握ABAP基础、正在实施RAP的开发者,深入讲解EML(Entity Manipulation Language)的核心用法。文章围绕READ ENTITIES、MODIFY ENTITIES、COMMIT ENTITIES三大语句,详细解析其语义、类型体系、事务机制及工程实践。重点内容包括:字段裁剪、派生类型、草稿控制、批量更新、事务缓冲与保存序列等关键技术点,并配合真实案例代码。旨在帮助开发者在SAP ABAP On-Premise和BTP环境中构建可维护、可演进的业务对象访问层,同时避免常见

2007 年 ~ 2025 年,深耕 SAP 技术 18 年 331

js在html中加载顺序,讨论html与javascript在浏览器中的加载顺序问题

前一阵子横扫了javascript,当时自我感觉良好。现在一想,又觉得没什么。今天的任务是把asp.net ajax中客户端页面生命周期那一章研究完。然而,因为这一章的内容使我产生了一些迷惑。这些疑惑在书中都没有只字提及。一、html页面的详细加载过程是什么呢?页面元素在加载时的优先级是什么?二、javascript的作用域、变量的作用域、不同脚本段之间的关系?三、html页面的生命周期?这些问题...

weixin_34811747的博客 245

复旦微FMSH_Procise安装流程

双击FMSH_Procise_2021.1_full_win64_202103151947.exe 选择好安装目录后点击“Next” 一路next 点install 找技术支持代为申请 License,将电脑MAC地址发过去,将获得的 license 拷贝到 procise 安装目录“data”文件夹,即可使用 procise。点license manager和copy license 将licence,.lic文件放到这个目录 要是报下面错误要...

wangjie36的博客 1万+

关于html和javascript在浏览器中的加载顺序问题的讨论

前一阵子横扫了javascript,当时自我感觉良好。现在一想,又觉得没什么。今天的任务是把asp.net ajax中客户端页面生命周期那一章研究完。然而,因为这一章的内容使我产生了一些迷惑。这些疑惑在书中都没有只字提及。 一、html页面的详细加载过程是什么呢?页面元素在加载时的优先级是什么?   二、javascript的作用域、变量的作用域、不同脚本段之间的关系?   三、ht

robinson的专栏 954

假人有限元模型

假人模型,车辆碰撞假人有限元模型,适合做乘员安全的研究者利用

Statistics and Machine Learning Toolbox

Statistics and Machine Learning Toolbox(带书签),MATLAB统计学习工具

JS事件报错Cannot set property ‘onclick‘ of null,原因及解决方法

目录 报错信息: 那么为什么会报错呢? 解决方法: 报错信息: 在使用js的时候报以下错误 下面是对应的文件 my.js文件: document.getElementById("button").onclick=function () { document.getElementById("head").innerHTML = "Teleporter"; }; html代码(引入了上面的js文件) <!DOCTYPE html> <html lang=

Zebra的博客 2190

文档:亲测可用解决vnc灰屏,黑屏,鼠标大黑叉情况

主要解决vnc-viewer灰屏,黑屏,鼠标大黑叉等现象,详细见文档。

Js文件在不同浏览器中的加载解析问题

最近使用html5和js编写了一段动态截图的程序,经过努力火狐、360、google等浏览器均可正常加载执行,但是在ie中却无法正常加载,有时刷新一下可以加载。但大多时候是无法加载的。 经过仔细查找检查,发现了原来是js加载出了问题。我在第一个js文件中,用到了后面加载的js中定义的变量。结果导致出现NaN错误。将变量定义在第一个js文件中,程序正常。因此,发现原来,在其他浏览器中。js的加载可

shuiya3的专栏 1648

廖雪峰Python教程[完整版]

廖雪峰的python教程整理的,已经排好版了,而且还是完整的,适合小白

详细的浏览器工作原理

原文链接:https://www.jianshu.com/p/4a942a7dc153页面展示timeline重点看一下,浏览器加载和渲染界面这个过程。首先浏览器由7个部分组成:截图来源自www.html5rocks.comUser Interface定义了一些常用的浏览器插件Browser engine平台应用的相关借口,在用户界面和呈现引擎之间传送指令Rendering engine处理HTM...

Charles_Tian的博客 630

输入URL回车到浏览器呈现出内容页面都发生了什么?

这个问题要想一点一点都回答清楚我觉得非常非常难,涉及的内容之多,范围之广,我看了好多篇这个问题的文章,从一点一点懂了,到很多都不懂,再到晕头转向,再到放弃。没办法,我自己出去面试的时候也被人问过这个问题,只好把懂得一点点写下来,算是梳理一遍流程。里面有很多我觉得不错的引用文章。 参考文章:https://segmentfault.com/a/1190000007766425 https://z

章柏华的博客 425

Javascript在网页页面加载时的执行顺序

2019独角兽企业重金招聘Python工程师标准>>> ...

weixin_33709609的博客 165

我所遇到的bootstrap3.3.4兼容IE的一些问题。

我所遇到的bootstrap兼容IE的一些问题。 我是一个公司新人,最近在公司修改bootstrap3.34框架搭建的前台页面, 通过网上搜索,解决了一部分问题,但是还有很多的小问题需要改善 很多博客或者帖子都没点出来,在此我说说我在bootstrap在兼容IE时遇到的问题。

qq_27793411的博客 1077

浏览器加载、解析、渲染的过程

今天在看 “ 浏览器加载、解析、渲染的过程” 这部分内容时,看了很多资料,都不是很明白,但是还是翻到了一篇别人的总结,和我的思想很接近,但是她总结能力真的强,一看博客是个女生,服。我还是要加强总结能力。 以下是正文(有删改): 为什么要了解浏览器加载、解析、渲染这个过程? 了解浏览器如何进行加载,可以在引用外部样式文件,外部js时,将他们放到合适的位置,使浏览器以...

weixin_30484247的博客 88

初涉 JavaScript

网页是什么 网页 = Html+CSS+JavaScriptHtml:网页元素内容CSS:控制网页样式JavaScript:操作网页内容,实现功能或者效果 JavaScirpt 发展历史 参考 使用 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g...

weixin_30848775的博客 120

关于动态加载外部js的执行顺序

项目开发中提出了一个新的需求。 因为版本更新带来的html、js等的更新,但客户浏览器或多或少都会存在缓存问题。 这就需要根据版本信息去动态加载外部js。 但html中内置的一些javascript代码需要调用动态加载js中的参数和方法。 就导致了加载外部js必须阻塞内置的一些javascript代码。 利用document.createElement方法去创建scrip节点,但不能阻塞...

weixin_34055787的博客 279

html,css,js代码加载顺序问题

欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦: Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和图片上传 LaTex数学公式 UML序列图和流程图 离线写博客 导入导出Markdown文件 丰富的快捷键 快捷键 加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl

hhthwx的博客 5321
上一篇: 使用FormData对象
下一篇: oracle 两个时间相减
zljjava
博客等级 码龄15年 155粉丝 15原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值