`
Notebookdong
  • 浏览: 120660 次
社区版块
存档分类
最新评论

浏览器加载页面元素顺序

阅读更多

浏览器加载页面是从上到下加载的,在JS中我们可以通过document.getElementsByTagName("script");的形式来选择页面元素,当我们把<script>标签放在Header中时顺序的不同会得到不同的结果:

<head>

<script>
  var tags1 =  document.getElementsByTagName("script");
  alert(tags1.length);
</script>

<script>
  var tags2 =  document.getElementsByTagName("script");
  alert(tags2.length);
</script>

</head>

 

 tags1的长度为1,tags2的长度为2。这是因为如果放在Header中浏览器加载的时候会按顺序把这些内容加载到内存中,当执行到tags1的时候,tags2的<script>标签没有加载到内存中,所以长度只有一个。当执行到tags2的时候,tags1已经在内存中存在,这时候的长度就为2。

分享到:
评论

相关推荐

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

    页面元素在加载时的优先级是什么? 二、javascript的作用域、变量的作用域、不同脚本段之间的关系? 三、html页面的生命周期? 这些问题真的打中了我的死穴。不了解这些,我就无法透过asp.net ajax的框架看到其底层...

    压测性能测试培训(2022-02-16 性能测试培训) 压缩文件包含 【JMeter基础培训、WEB网站优化、性能测试知识分享】

    浏览器加载和渲染顺序 HTML页面加载和解析流程 减少 HTTP 的请求数 添加Cache缓存 减少域名查询 网站图片的合并压缩 压缩css和js代码 去除页面中没有用到的CSS 优化页面元素加载顺序 避免使用css表达式 CSS和JS在...

    JavaScript文档加载模式以及元素获取

    事件处理程序(事件出发后要执行的代码函数形式)存在问题:浏览器加载一个页面的时候,是按照自上而下的顺序加载的,若将script标签写到head内部,在代码执行时候,页面还没有加载,页面中的DOM对象也没有加载。...

    HTML页面加载和解析流程详细介绍

    浏览器加载和渲染html的顺序 1. IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的。 2. 在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载...

    网页自动刷新单击工具 v2.0.zip

    (8) 网址自动加载功能:单击“运行”按钮后,程序会弹出一个浏览器窗口,按顺序加载列表中的所有网址并逐个单击指定ID 的网页元素,浏览器窗口可以查看加载进度,加载完成后会自动退出浏览器窗口,运行前可以设置...

    Web页面文本框组件

    例如,在一个发送请求到服务端的应用中,必须包含请求顺序、优先级、超时响应、错误处理及回调,其中许多元素已经在Web服务中包含了,就像现在的SOA。AJAX开发人员拥有一个完整的系统架构知识。同时,随着技术的成熟...

    WEB页面文本框组件controls

    例如,在一个发送请求到服务端的应用中,必须包含请求顺序、优先级、超时响应、错误处理及回调,其中许多元素已经在Web服务中包含了,就像现在的SOA。AJAX开发人员拥有一个完整的系统架构知识。同时,随着技术的成熟...

    超实用的jQuery代码段

    4.3 使用toggleClass()函数切换页面元素的样式类 4.4 为body增加class类支持 4.5 操作div的显示与隐藏 4.6 如何设定div始终居中显示 4.7 测试浏览器是否支持某些CSS 3属性 4.8 如何添加hover类到指定元素 4.9 基于...

    ASP.NET的网页代码模型及生命周期

    在客户端浏览器访问该页面时,浏览器会给IIS发送请求消息,IIS则会开始执行ASP.NET编译过程,如果不存在编译过后的DLL文件,则加载编译的类并创建对象。当创建对象完成,生成创建对象后的代码并生成一个ASPX页面代码...

    探讨JavaScript标签位置的存放与功能有无关系

    将[removed]元素放在head中是为了让浏览器在一开始就读取,[removed]元素会在整个网页最开始解析时就加载执行,其优先次序仅次于&lt;title&gt;元素。 然后依次向下解析渲染。 应用:比如进行页面显示初始化的js...

    为什么我们不建议用Table布局

    Tablle会阻挡浏览器渲染引擎的渲染顺序。 (会延迟页面的生成速度,让用户等待更久的时间。) Table里显示图片时需要你把单个、有逻辑性的图片切成多个图。 (增加设计的复杂度,增加页面加载时间,增加HTTP会话数。) ...

    前端之前沿优化解决方案

    Flexbox布局提供了高渲染性能,容器可以决定子元素的大小、顺序、对齐方式和间隔,支持双向布局。 Preload和Prefetch: Preload 用于提前加载对当前页面重要的资源。 Prefetch 用于提前加载后续页面或路由所需的资源...

    HTML5与CSS3基础教程(第8版)高清文字

    8.5 样式的层叠和顺序 145 8.6 使用与媒体相关的样式表 147 8.7 借鉴他人的灵感 148 第9章 定义选择器 150 9.1 构造选择器 150 9.2 按名称选择元素 152 9.3 按类或ID选择元素 153 9.4 按上...

    jQuery详细教程

    如果您的网站包含许多页面,并且您希望您的 jQuery 函数易于维护,那么请把您的 jQuery 函数放到独立的 .js 文件中。 当我们在教程中演示 jQuery 时,会将函数直接添加到 &lt;head&gt; 部分中。不过,把它们放到一个单独的...

    世界之窗 3.5.0.3

    2.优化了flash加载机制,提升了没有flash元素页面的加载速度; 3.修复了点开菜单栏中的菜单选项后,点击其他插件按钮时,产生的闪屏问题; 4.修复了视频独立播放窗口关闭时,可能导致崩溃的问题; 5.修复了一个退出...

    《程序天下:JavaScript实例自学手册》光盘源码

    21.9 动态删除页面中的元素 21.10 克隆表格 21.11 拖动表格行改变顺序 21.12 表格操作常用方法 第22章 流行应用:AJAX和Property的应用技巧 22.1 实现关机效果的界面 22.2 关机特效(二) 22.3 评星效果 22.4 输入框...

    程序天下:JavaScript实例自学手册

    21.9 动态删除页面中的元素 21.10 克隆表格 21.11 拖动表格行改变顺序 21.12 表格操作常用方法 第22章 流行应用:AJAX和Property的应用技巧 22.1 实现关机效果的界面 22.2 关机特效(二) 22.3 评星效果 22.4 输入框...

    JavaScript完全自学宝典 源代码

    \ajaxmodel\amel\html\city.jsp 动态加载列表框的客户端页面。 \ajaxmodel\amel\html\autoRefresh.jsp 自动刷新网页的客户端页面。 \ajaxmodel\amel\html\processBar.jsp 显示进度条的客户端页面。 \ajax...

    css样式层叠规则详解

    浏览器在 加载每个页面时。都会据此查到每一条CSS规则,表示出所有受到影响的HTML元素 2.按照顺序和权重排序 浏览器依次检查 5个来源 ,并设定匹配的属性。如果匹配的属性在下一个来源也有定义,则更新该属

Global site tag (gtag.js) - Google Analytics