dom构建渲染过程

1、构建DOM树（parse）：渲染引擎解析HTML文档，首先将标签转换成DOM树中的DOM node（包括js生成的标签）生成内容树（Content Tree/DOM Tree）；

2、构建渲染树（construct）：解析对应的CSS样式文件信息（包括js生成的样式和外部css文件），而这些文件信息以及HTML中可见的指令（如<b></b>），构建渲染树（Rendering Tree/Frame Tree）；

3、布局渲染树（reflow/layout）：从根节点递归调用，计算每一个元素的大小、位置等，给出每个节点所应该在屏幕上出现的精确坐标；

4、绘制渲染树（paint/repaint）：遍历渲染树，使用UI后端层来绘制每个节点。

重排必定引起重绘，重绘不一定是重排引起的。

不影响位置大小的，单纯为重绘即可 比如修改color 等。

（1）直接改变元素的className

（2）display：none；先设置元素为display：none；然后进行页面布局等 *** 作；设置完成后将元素设置为display：block；这样的话就只引发两次重绘和重排；

（3）不要经常访问浏览器的flush队列属性；如果一定要访问，可以利用缓存。将访问的值存储起来，接下来使用就不会再引发回流；

（4）使用cloneNode(true or false) 和 replaceChild 技术，引发一次回流和重绘；

（5）将需要多次重排的元素，position属性设为absolute或fixed，元素脱离了文档流，它的变化不会影响到其他元素；

（6）如果需要创建多个DOM节点，可以使用DocumentFragment创建完后一次性的加入document；

js里没有用到‘#’的代码端，一般'#'是在jQuery 有用到，一般用于id选择元素使用。

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。

它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档 *** 作、事件处理、动画设计和Ajax交互。

扩展资料

jQuery的模块可以分为3部分：入口模块、底层支持模块和功能模块。

在构造jQuery对象模块中，如果在调用构造函数jQuery()创建jQuery对象时传入了选择器表达式，则会调用选择器Sizzle（一款纯JavaScript实现的CSS选择器引擎，用于查找与选择器表达式匹配的元素集合）遍历文档。

查找与之匹配的DOM元素，并创建一个包含了这些DOM元素引用的jQuery对象。

浏览器功能测试模块提供了针对不同浏览器功能和bug的测试结果，其他模块则基于这些测试结果来解决浏览器之间的兼容性问题。

在底层支持模块中，回调函数列表模块用于增强对回调函数的管理，支持添加、移除、触发、锁定、禁用回调函数等功能；

异步队列模块用于解耦异步任务和回调函数，它在回调函数列表的基础上为回调函数增加了状态，并提供了多个回调函数列表，支持传播任意同步或异步回调函数的成功或失败状态；数据缓存模块用于为DOM元素和Javascript对象附加任意类型的数据；

队列模块用于管理一组函数，支持函数的入队和出队 *** 作，并确保函数按顺序执行，它基于数据缓存模块实现。

在功能模块中，事件系统提供了统一的事件绑定、响应、手动触发和移除机制，它并没有将事件直接绑定到DOM元素上，而是基于数据缓存模块来管理事件；Ajax模块允许从服务器上加载数据，而不用刷新页面，它基于异步队列模块来管理和触发回调函数；

动画模块用于向网页中添加动画效果，它基于队列模块来管理和执行动画函数；属性 *** 作模块用于对HTML属性和DOM属性进行读取、设置和移除 *** 作；DOM遍历模块用于在DoM树中遍历父元素、子元素和兄弟元素；DOM *** 作模块用于插入、移除、复制和替换DOM元素；

样式 *** 作模块用于获取计算样式或设置内联样式；坐标模块用于读取或设置DOM元素的文档坐标；尺寸模块用于获取DOM元素的高度和宽度。

参考资料来源：百度百科-jQuery

$(function(){})函数当 DOM（文档对象模型） 已经加载，并且页面（包括图像）已经完全呈现时，执行。

此事件等同于jquery的ready（）事件的一种语法，完整的三种如下：

$(document)ready(function)

$()ready(function)

$(function)

简单地说，这个方法纯粹是对向windowload事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并 *** 纵时立即调用你所绑定的函数，而9999%的JavaScript函数都需要在那一刻执行。

$(function () {var opName = getUrlParam('opname');// var opName = "OP3040";documentgetElementById("txtName")value = opName;getplan(opName);getopname(opName);// getplan(opName);connect();getFoucs();InitGrid();});

F5的时候，页面刷新，重新读取DOM节点完成后，自动执行ready（）函数里面的函数体。

$('ID')只是选中某个元素，比如你的函数第三行：  documentgetElementById("txtName")。并没有执行函数的含义。

扩展资料

jQuery的模块可以分为3部分：入口模块、底层支持模块和功能模块。

在构造jQuery对象模块中，如果在调用构造函数jQuery()创建jQuery对象时传入了选择器表达式，则会调用选择器Sizzle（一款纯JavaScript实现的CSS选择器引擎，用于查找与选择器表达式匹配的元素集合）遍历文档，查找与之匹配的DOM元素，并创建一个包含了这些DOM元素引用的jQuery对象。

浏览器功能测试模块提供了针对不同浏览器功能和bug的测试结果，其他模块则基于这些测试结果来解决浏览器之间的兼容性问题。

在底层支持模块中，回调函数列表模块用于增强对回调函数的管理，支持添加、移除、触发、锁定、禁用回调函数等功能；异步队列模块用于解耦异步任务和回调函数，它在回调函数列表的基础上为回调函数增加了状态，并提供了多个回调函数列表，支持传播任意同步或异步回调函数的成功或失败状态。

数据缓存模块用于为DOM元素和Javascript对象附加任意类型的数据；队列模块用于管理一组函数，支持函数的入队和出队 *** 作，并确保函数按顺序执行，它基于数据缓存模块实现。

在功能模块中，事件系统提供了统一的事件绑定、响应、手动触发和移除机制，它并没有将事件直接绑定到DOM元素上，而是基于数据缓存模块来管理事件。

Ajax模块允许从服务器上加载数据，而不用刷新页面，它基于异步队列模块来管理和触发回调函数；动画模块用于向网页中添加动画效果，它基于队列模块来管理和执行动画函数；

属性 *** 作模块用于对HTML属性和DOM属性进行读取、设置和移除 *** 作；DOM遍历模块用于在DoM树中遍历父元素、子元素和兄弟元素。

DOM *** 作模块用于插入、移除、复制和替换DOM元素；样式 *** 作模块用于获取计算样式或设置内联样式；坐标模块用于读取或设置DOM元素的文档坐标；尺寸模块用于获取DOM元素的高度和宽度。

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。

它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档 *** 作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 60+、FF 15+、Safari 20+、Opera 90+等。

技术应用

只需要少量的代码，即可将它们集成到网站上，并且能够帮助访问者分享网站上的内容。 [12]

移动端

JQuery Mobile 1 2是JQuery运行在手机和平板设备上的版本。JQuery Mobile 1 2给主流移动平台提供了JQuery的核心库，发布了一个完整统一的JQuery移动UI设计框架，在不同的智能手机和桌面电脑的web浏览器上形成统一的用户UI。

支持全球主流的移动平台，对每个平台的支持分为三个等级：A、B、C，实现了对Android 21-23、32、40、4 1、Palm WebOS 14-20、30、Firefox Mobile 15，Opera Mobile 115-12等平台的A级支持。

JQuery Mobile 1 2的核心使得基本的HTML标签在所有的浏览器中生效，并且对网页的行为和效果均进行了增强，让网页在等级较高的浏览器中能获得优秀的体验，在较差的浏览器中也能正常的使用。

参考资料：

百度百科 jQuery的工作原理

    1nodenodeName：查看节点名称（元素节点返回标签名（大写），文本节点返回 #text）

    2nodenodeType：查看节点类型（元素节点返回1，属性节点返回2，文本节点返回3）

    3nodenodeValue：查看节点的值（元素节点返回null，文本节点返回文本值）

    DOM对象集合了HTML标签中能被解析的属性（标准属性）作为DOM对象的属性

    查询到的input节点包含了type、name、value等属性，其他未设置值的属性也包含在节点对象中

    1nodeoffsetLeft：元素在页面中的水平坐标值

    2nodeoffsetTop：元素在页面中的垂直坐标值

    3nodeclientWidth：元素在页面视口区域占据的宽度(不含边框)

    4nodeclientHeight：元素在页面视口区域占据的高度(不含边框)

    5nodeoffsetWidth：元素在页面区域占据的宽度(含边框)

    6offsetHeight：元素在页面区域占据的高度(含边框)

    7scrollLeft：窗口或者容器内容水平滚动的距离

    8scrollTop：窗口或者容器内容垂直滚动的距离

融在第三点最后了

    1方法名innerHTML（包含了此方法对应的对象内所有空白文本以及标签在内的所有内容）

    2方法名innerText（包含了此方法对应的对象内文本内容且空白文本除外）

    1nodegetAttribute()：读取节点的属性值

    2nodesetAttribute（）：设置节点属性值

    3noderemoveAttribute（）：删除节点的属性

    4nodehasAttribute（）：检测节点是否存在某属性

    1方法名querySelector（选择器）：按CSS样式查询，返回第一个节点

    2nodequerySelectorAll(选择器)：按CSS样式查询，返回所有节点集合

    3nodegetElementsByTagName(tname)：查询node下面所有标签名为tname的元素集合

    4nodegetElementsByClassName(cname)：查询node下面所有类名为cname的元素集合

    1往父节点插入子节点并指定所有元素的后面

        父级方法名appendChild（插入的元素）  

    2往父节点插入子节点并指定在某个子元素的前面

        父级方法名insertBefore（插入的元素，插入的元素后的一个元素名）

    注意：在dom中插入节点都是基于父节点来完成的

    1 父级方法名removeChild（子级元素）：删除父级元素中的子级节点

    1父级方法名replaceChild（new，old）：将父级元素中的old节点替换成一个新的new节点

    1浅复制：nodecloneNode()：只复制此元素不包含子元素

    2深复制：nodecloneNode(true)：复制此元素且包含子元素

    1父级元素hasChildNodes() ：检测节点是否含有子节点，包括空白节点    

    1nodeparentNode：node的父节点

    2nodechildNodes ：node所有子节点

    3nodechildren：node所有子元素 

    4nodefirstChild：node的第一个子节点

    5nodefirstElementChild：node的第一个子元素 

    6nodelastChild ：node的最后一个节点

    7nodelastElementChild：的最后一个元素

    8nodenextSibling：node的下一个兄弟节点

    9nodenextElementSibling：node的下一个兄弟元素

    10nodepreviousSibling：node的前一个兄弟节点

    11nodepreviousElementSibling：node前一个兄弟元素

十四、节点样式 *** 作

    1html标签中集合了style的标准属性因此可以使用 DOMstyle访问样式， 注意 它只能访问使用style定义的内联样式，而不能访问内部和外链样式，且访问样式需要使用驼峰替代" - "

    2当CSS样式较多时，可以使用DOMcssText来重置。

    3windowgetComputedStyle()：返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后，报告元素的所有CSS属性的值

浏览器渲染引擎工作流程都差不多，大致分为5步，创建DOM树——创建StyleRules——创建Render树——布局Layout——绘制Painting

第一步，用HTML分析器，分析HTML元素，构建一颗DOM树(标记化和树构建)。

第二步，用CSS分析器，分析CSS文件和元素上的inline样式，生成页面的样式表。

第三步，将DOM树和样式表，关联起来，构建一颗Render树(这一过程又称为Attachment)。每个DOM节点都有attach方法，接受样式信息，返回一个render对象(又名renderer)。这些render对象最终会被构建成一颗Render树。

第四步，有了Render树，浏览器开始布局，为每个Render树上的节点确定一个在显示屏上出现的精确坐标。

第五步，Render树和节点显示坐标都有了，就调用每个节点paint方法，把它们绘制出来。

原文章出处

>

一、触摸事件

ontouchstart、ontouchmove、ontouchend、ontouchcancel

目前移动端浏览器均支持这4个触摸事件，包括IE。由于触屏也支持MouseEvent，因此他们的顺序是需要注意的：touchstart → mouseover → mousemove → mousedown → mouseup → click1

Apple在iOS 20中引入了 触摸事件API ，Android正迎头赶上这一事实标准，缩小差距。最近一个W3C工作组正合力制定这一 触摸事件规范 。

二、规范

这里我们介绍几种普及得比较好的触摸事件，你可以在绝大多数现代浏览器中来测试这一事件（必须是触屏设备哦）：

touchstart： 触摸开始的时候触发

touchmove： 手指在屏幕上滑动的时候触发

touchend： 触摸结束的时候触发

而每个触摸事件都包括了三个触摸列表，每个列表里包含了对应的一系列触摸点（用来实现多点触控）：

touches： 当前位于屏幕上的所有手指的列表。

targetTouches： 位于当前DOM元素上手指的列表。

changedTouches： 涉及当前事件手指的列表。

每个触摸点由包含了如下触摸信息（常用）：

identifier： 一个数值，唯一标识触摸会话（touch session）中的当前手指。一般为从0开始的流水号（android41，uc）

target： DOM元素，是动作所针对的目标。

pageX / pageX / clientX / clientY/screenX/screenY ： 一个数值，动作在屏幕上发生的位置（page包含滚动距离,client不包含滚动距离，screen则以屏幕为基准）。

radiusX / radiusY/ rotationAngle： 画出大约相当于手指形状的椭圆形，分别为椭圆形的两个半径和旋转角度。初步测试浏览器不支持，好在功能不常用，欢迎大家反馈。

有了这些信息，我们就可以依据这些事件信息为用户提供不同的反馈了。

下面，我将为大家展示一个小demo，用touchmove实现的单指拖动:

三、手势事件

手势是指利用多点触控进行旋转、拉伸等 *** 作，例如、网页的放大、旋转。需要两个或以上的手指同时触摸时才会触发手势事件。关于缩放我们需要注意的一点 是元素的位置坐标：我们通常使用offsetX、getBoundingClientRect等方法获取元素的位置坐标，但在手机浏览器中页面经常会在使 用中被缩放，那缩放后的元素坐标会改变吗？答案是有所差异。用一个情景来说明这个问题：页面A加载完成后， JavaScript 获 取到该元素在document中的坐标为(100,100)，接着用户放大了页面，此时用JavaScript再次输出元素坐标，依然还是 (100,100)，但该元素在屏幕上的响应区域会根据缩放比例产生偏移。你可以打开那个打砖块游戏demo，等页面完全加载完成后，再放大，此时你会发 现即使手指触摸在“touch here”区域外部，也可以控制到球板，因为区域发生了偏移。除非页面刷新或者恢复缩放，否则偏移量将一直存在。

四、重力感应

重力感应较简单，只需要为body节点添加onorientationchange事件即可。在此事件中由windoworientation属性得到代表当前手机方向的数值。windoworientation的值列表如下：

0：与页面首次加载时的方向一致

-90：相对原始方向顺时针转了90°

180：转了180°

90：逆时针转了90°据我测试，Android21尚未支持重力感应。以上即目前的触屏事件，这些事件尚未并入标准，但已被广泛使用。本人Android21，未在其他环境下测试。

以上就是关于dom构建渲染过程全部的内容，包括:dom构建渲染过程、"#"在js中代表什么、jquery中的$(function(){...})什么时候执行等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！