`
yanzilee9292
  • 浏览: 538689 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

浏览器的渲染和操作顺序

阅读更多

浏览器的渲染和操作顺序大致如下: 
1 HTML解析完毕。 
2 外部脚本和样式表加载完毕。 
3 脚本在文档内解析并执行。 
4 HTML DOM 完全构造起来。 
5 图片等外部内容加载。 
6 网页完成加载。 
在网页头部并且从外部文件加载的脚本会在HTML真正构造之前执行,所以,在这两处脚本不能访问并不存在的DOM。 
补救方法: 
1 完全等待事个页面加载完毕后再执行DOM操作,我们可以window.load上绑定函数。 
2 在需要操作的DOM后面执行访问这个DOM的脚本,这个方法不推荐使用。 
3 判断DOM何时加载完毕,if (document && document.getElementsByTagName && document.getElementById && document.body){alert("加载完毕")}


分享到:
评论

相关推荐

    模拟浏览器操作

    在IT领域,模拟浏览器操作是一项重要的技术,尤其在自动化测试、网页抓取和网络应用的开发中。数据结构课程设计中的“模拟浏览器操作”通常涉及使用编程语言来重现用户在真实浏览器上的行为,如前进、后退、加载URL...

    探析浏览器执行JavaScript脚本加载与代码执行顺序

    浏览器执行JavaScript脚本加载与代码执行顺序是网页开发中至关重要的一环,因为它直接影响到网页的渲染和用户体验。本文主要探讨了两种关键的概念:JavaScript脚本的阻塞性和执行顺序。 1. JavaScript脚本的阻塞性...

    王志刚:浏览器的多进程架构与渲染优化

    软件渲染步骤中涉及到递归调用RenderLayer列表项的paintLayer()函数,分别绘制位于当前层下方和上方的RenderLayer,以实现正确的层叠顺序。Webkit的软件渲染架构还采用了共享内存和命令缓冲区来实现进程间通信(IPC...

    浏览器原理pdf

    5. 不同浏览器的渲染引擎:文档中提到了几个浏览器使用的渲染引擎,例如Mozilla Firefox使用的是由Mozilla打造的Gecko引擎,而Safari和Google Chrome(截至27版本)使用的是WebKit引擎。而Chrome在27版本之后改用了...

    浏览器的工作原理-现代网络浏览器幕后揭秘

    样式计算涉及共享样式数据、规则树的构建和优化,以及样式表的层叠顺序和特异性的处理。 5. 呈现树构建 呈现树是用于页面布局和绘制的树结构,它与DOM树相关联,但只包含需要显示的节点。构建呈现树的过程中,...

    浏览器加载、渲染和解析过程黑箱简析

    DOM(Document Object Model)是HTML和XML文档的结构化表示,浏览器使用它来理解和操作页面内容。 - **CSS解析**:CSS文件被下载后,浏览器会将其解析为CSSOM(CSS Object Model),这是CSS规则的树形结构,用于...

    浏览器的工作原理

    在众多浏览器中,**WebKit**和**Gecko**是最为知名的两种渲染引擎。WebKit主要用于Safari和Chrome浏览器,而Gecko则是Firefox的核心组件。这篇文章将详细介绍这两种渲染引擎的内部运作机制。 #### 2. 浏览器的主要...

    前端必读:浏览器工作原理

    **渲染引擎**是浏览器的核心组件之一,负责解析和渲染网页内容。主要功能包括解析HTML文档、构建DOM树、应用CSS样式、构建渲染树、执行布局计算以及最终绘制页面。 - **HTML解析与DOM树构建**:当用户通过浏览器...

    JS深度揭秘第七章-浏览器渲染原理及数据交互

    在深入探讨"JS深度揭秘第七章-浏览器渲染原理及数据交互"这一主题之前,我们先来了解一下相关的标签和概念。"同源策略"是Web安全的核心机制,它限制了来自不同源的文档或脚本之间的交互,以防止恶意网站窃取用户信息...

    浏览器的加载与页面性能优化

    JavaScript和CSS的加载顺序直接影响页面的渲染流程。通常,JS文件应放置在页面底部,以避免阻塞页面的其他元素加载;而CSS则应优先加载,确保页面的基本布局和样式能够快速呈现。同时,使用`defer`和`async`属性可以...

    web前端浏览器兼容性问题和新知识.docx

    Web前端开发中,浏览器兼容性问题一直是一个棘手的话题,特别是在CSS、JavaScript和HTML的实现上,不同的浏览器可能有不同的解析和渲染方式。以下是对这些问题的深入解析和解决策略。 首先,CSS兼容性问题是一个...

    Chrome浏览器调试教程

    ### Chrome浏览器调试教程 #### 一、Chrome浏览器简介及下载与安装 - **浏览器功能**:浏览器的主要职责是向...未来,随着技术的发展,浏览器的功能和性能也将持续改进,因此持续学习和适应新技术是非常重要的。

    浏览器兼容性常见问题

    当指定了一些浏览器无法识别的字符编码别名时,浏览器会根据一定的优先级顺序选择一个可用的编码进行渲染。 例如,Chrome、Safari和Opera对于字符编码别名的支持比其他浏览器更为宽泛。 **2.2 文档的字符编码顺序*...

    测试浏览器运行速度

    当遇到"ASP.NET开发的网页在浏览器中运行速度特别慢"的问题时,这可能是由多种因素引起的,包括但不限于网络延迟、服务器响应时间、JavaScript执行效率、CSS和HTML的加载顺序等。为了找出问题的症结所在,我们可以...

    vue3浏览器调试插件

    5. **性能分析**:Performance面板允许你记录和分析Vue组件的渲染性能,找出可能的性能瓶颈。 6. **Vue Router调试**:对于使用Vue Router的应用,Vue Devtools会展示路由信息,包括当前激活的路由和导航历史,便于...

    简单的图片浏览器

    6. **图片格式支持**:支持多种图片格式,意味着需要处理不同格式的解码和渲染,可能涉及开源库如libjpeg-turbo、libpng等。 7. **图片编辑功能**:旋转、缩放和裁剪功能需要使用Bitmap类进行图像处理,同时可能...

    react-Konsul一个带有React渲染器的浏览器控制台抽象

    - **调试**: 在复杂的React项目中,React-Konsul可以帮助开发者更好地理解组件层次、状态变化和生命周期方法的执行顺序。 - **日志记录**: 通过丰富的视觉反馈,它可以提升日志记录的可读性,使错误排查更加直观。 -...

    浏览器工作原理

    2. **浏览器引擎**:作为用户界面和渲染引擎之间的桥梁,它提供了一套接口,使得用户界面能够控制渲染引擎的活动,如加载页面、执行脚本等。 3. **渲染引擎**:也称为布局引擎或浏览器内核,它的主要任务是解析HTML...

    TypeScript图形渲染实战:基于WebGL的3D架构与实现_源代码+视频.zip

    5. **深度测试**:处理3D物体的遮挡关系,确保正确的渲染顺序。 五、TypeScript与WebGL的结合 TypeScript可以为WebGL提供更高级别的抽象和封装,比如: 1. 创建类型安全的接口和类,用于表示WebGL资源,如Buffer、...

Global site tag (gtag.js) - Google Analytics