DOM编程以及domReady加载的几种方式

1，关于DOM编程
DOM编程主要是对dom树节点进行操作，所以你必须掌握基本的节点类型，如何去获取节点名字以及值（这些相关知识你可以去网上查，这里推荐一个慕课学习网站->https://www.imooc.com/video/9491）。

2 ,浏览器渲染过程

解析html ，构建dom树（构建dom节点） --> 构建渲染树（加入css）-->布局渲染树（布局dom节点）-->绘制dom节点（绘制dom节点）

3，domReady

由于dom编程是对dom树进行操作的，所以加载外文件（js）最好的时间是在dom树加载完毕的时候就开始加载。一下是几种不同的加载方式对比。

1)运用定时器方法

在规定多长时间后进行加载（缺点：不确定性，不知道dom树什么时候加载完毕，而且中间会有一个变化时间）

具体方法 setTimeout(function(){},执行时间长短单位毫秒)

2)运用window.onload = function(){}；具体含义就是页面全部加载完成时再执行，初学js者一般使用的方法，缺点就是加载响应慢，因为要等所以资源加载完毕在运行代码，

像一些图片资源加载速度过慢就会影响脚本的执行时间

3) 最好的一种方法就是在dom加载完毕立即执行js，无需等待其他的资源加载

第一：如果支持DOMContentLoaded就是用它，但是对于较低版本的IE浏览器不支持怎么办了？当然就用著名的Hack兼容，兼容原理大概就是IE的 doucument.doucumentElement.doScorll('left')来判断DOM树是否创建完毕。

第二：目前大量的前端框架都封装好了前面两种方法。如Jquery使用如下格式就行了：

$(document).ready(function(){});

上面是今天的分享，希望对你有帮助。

更多专业前端知识，请上【猿2048】www.mk2048.com

DOM编程以及domReady加载的几种方式相关推荐

页面加载的几种方式和区别
目录页面加载的几种方式 DOM文档加载步骤原生JS的 ready阶段执行方法怎么写? 全部方式的演示代码 window和document的区别页面加载的几种方式(原生JS和jQuery) 1. ...
IDEA中Tomcat重新加载的几种方式
IDEA中Tomcat重新加载的几种方式参考自IDEA官方帮助文档 1.Update resources 更新资源文件,当项目中的HTML, JSP, JavaScript, CSS and ima ...
vue项目实现路由按需加载(路由懒加载)的3种方式
vue项目实现路由按需加载(路由懒加载)的3种方式 1.vue异步组件 2.es提案的import() 3.webpack的require,ensur *1.vue异步组件技术 ==== 异步加载 v ...
Cesium加载模型两种方式
Cesium加载模型两种方式代码如下 <!DOCTYPE html> <html><head><meta charset="UTF-8" ...
hbase 协处理器部署_HBase协处理器加载的三种方式
本文主要给大家罗列了hbase协处理器加载的三种方式:shell加载(动态).api加载(动态).配置文件加载(静态).其中静态加载方式需要重启hbase. 我们假设我们已经有一个现成的需要加载的协处 ...
实现图片预加载的几种方式
感觉自己好久没有写博客了,可能自己变懒了.不知道为什么最近有点迷茫,不知道是该去学一下新东西还是该去看一下具有深度的东西.新的技术需要关注,但是我要去研究一下jquery的源码,这个东西很早就想去看, ...
jsp页面数据加载的两种方式
JSP数据加载的两种方式第一种: 三层架构写在controller的页面跳转前面,set到request域中 request.setAttribute("name", list) ...
js延迟（异步）加载的6种方式为什么要延迟加载js呢？
对于js的优化(关于js的延迟加载)的好处是有助于提高页面加载速度,js延迟加载就是等页面加载完成之后在加载js文件. 之所以要优化是因为HTML元素是按其在页面中出现的次序调用的,如果用jav ...
实现图片懒加载的5种方式
目录 1.懒加载介绍 2.实现懒加载技术的方案 3.具体实现代码 1.懒加载介绍当页面需要展示大量图片时,如果一次性渲染所有图片,会向服务器发出大量请求,导致服务器响应慢,出现页面卡顿或崩溃等问题. ...

DOM编程以及domReady加载的几种方式

DOM编程以及domReady加载的几种方式相关推荐

最新文章

热门文章