dom对象

页面重绘和重拍版的性能问题.

谁都会走 提交于 2020-02-23 08:54:42
DOM树和渲染树   当浏览器下载完所有页面HTML 标记,JavaScript,CSS,图片之后,它解析文件并创建两个内部数据结构:一棵DOM树表示页面结构,一棵渲染树表示DOM节点如何显示。 渲染树中为每个需要显示的DOM 树节点存放至少一个节点(隐藏DOM 元素在渲染树中没有对应节点)。渲染树上的节点称为“框”或者“盒”,符合CSS 模型的定义,将页面元素看作一个具有填充、边距、边框和位置的盒。一旦DOM 树和渲染树构造完毕,浏览器就可以显示(绘制)页面上的元素了。 重排版 当DOM 改变影响到元素的几何属性(宽和高)——例如改变了边框宽度或在段落中添加文字,将发生一系列后续动作——浏览器需要重新计算元素的几何属性,而且其他元素的几何属性和位置也会因此改变受到影响。浏览器使渲染树上受到影响的部分失效,然后重构渲染树。这个过程被称作重排版。重排版完成时,浏览器在一个重绘进程中重新绘制屏幕上受影响的部分。 不是所有的DOM 改变都会影响几何属性。例如,改变一个元素的背景颜色不会影响它的宽度或高度。在这种情况下,只需要重绘(不需要重排版),因为元素的布局没有改变。 重绘和重排版是负担很重的操作,可能导致网页应用的用户界面失去相应。所以,十分有必要尽可能减少这类事情的发生。 发生重排版情况 正如前面所提到的,当布局和几何改变时需要重排版。在下述情况中会发生重排版: (1

ReactJS+ReactNative笔记

依然范特西╮ 提交于 2020-02-23 04:46:13
1.移动App第1天 什么是混合移动App开发【重点】 苹果上的软件是如何开发出来的:使用的是 OC、或者使用Swift这门语言 安卓平台上的软件又是如何开发出来的:使用安卓相关的语言开发的,Java,安卓的控件进行开发 苹果和安卓平台上共有的软件是如何开发出来的:腾讯招两套开发人员【开发组】,手机京东 前端移动 App(Application)开发技术,去开发手机端的应用程序; 前端的混合移动App开发技术,并没有使用 苹果 或 安卓 官方推荐的 开发平台和开发方式,而是抛弃了 官方提供的方式,使用 前端的独有的技术进行移动App开发体验; 什么是移动App开发:通俗的理解,就是把开发Web网站的技术(HTML+CSS+JS),通过某种方式,移植到移动App开发上进行使用,这种利用Web开发技术进行移动端开发体验的方式,叫做混合移动App开发! 关于移动App开发,需要知道的几个概念: 原生开发:它的英文单词是(NativeApp),指的就是使用 IOS、Android 官方提供的工具、开发平台、配套语言进行 手机App开发的方式; 混合开发:(HybirdApp)就是使用前端已有的技术,HTML + CSS + JS ,然后再搭配一些相关的打包编译技术,就能够开发出一个手机App,安装到手机中进行使用; 什么是App:App是(Application的缩写),意思是

前端之--DOM详解应用

若如初见. 提交于 2020-02-23 03:52:53
文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式。我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容。 一、查找元素 1、直接查找 document.getElementById 根据ID获取一个标签 document.getElementsByName 根据name属性获取标签集合 document.getElementsByClassName 根据class属性获取标签集合 document.getElementsByTagName 根据标签名获取标签集合 2、间接查找 parentNode // 父节点 childNodes // 所有子节点 firstChild // 第一个子节点 lastChild // 最后一个子节点 nextSibling // 下一个兄弟节点 previousSibling // 上一个兄弟节点 parentElement // 父节点标签元素 children // 所有子标签 firstElementChild // 第一个子标签元素 lastElementChild // 最后一个子标签元素 nextElementtSibling //

前端随笔

僤鯓⒐⒋嵵緔 提交于 2020-02-22 05:51:34
把之前存的一堆自己觉得记录的知识点全部记录一下,有兴趣可以看看,共勉。 $ ( function ( ) { todo ( '71899703 200 6 91 425 4 67407 7 96488 6 4 2 7 31064 9 7920 1 34608557 27 72 18 81' ) . then ( f2 ) } ) ; function todo ( e ) { // var dfd = $.Deferred(); // setTimeout(function () { // // f1的任务代码 // dfd.resolve(); // }, 500); // return dfd.promise; // console.log(e.length) // var e = input; var x = e . length ; var y ; // 输出集合 var list = [ ] ; // 排序用集合 var templist = [ ] ; for ( var i = 0 ; i < x ; i ++ ) { y = e . split ( " " ) [ i ] ; if ( ! y ) { break ; } list [ i ] = y ; var sum = 0 ; for ( var n = 0 ; n < y . length ; n ++ )

VUE生命周期的理解

為{幸葍}努か 提交于 2020-02-22 03:52:22
Vue有一套完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程,都属于Vue的生命周期。Vue实例从创建到销毁的过程,就像一条生命的生老病死的过程,就是Vue的生命周期。 每一个组件或者实例都会经历一个完整的生命周期,总共分为三个阶段:初始化、运行中、销毁。 实例、组件通过new Vue() 创建出来之后会初始化事件和生命周期,然后就会执行beforeCreate钩子函数,这个时候,数据还没有挂载呢,只是一个空壳,无法访问到数据和真实的dom,一般不做操作 挂载数据,绑定事件等等,然后执行created函数,这个时候已经可以使用到数据,也可以更改数据,在这里更改数据不会触发updated函数,在这里可以在渲染前倒数第二次更改数据的机会,不会触发其他的钩子函数,一般可以在这里做初始数据的获取 接下来开始找实例或者组件对应的模板,编译模板为虚拟dom放入到render函数中准备渲染,然后执行beforeMount钩子函数,在这个函数中虚拟dom已经创建完成,马上就要渲染,在这里也可以更改数据,不会触发updated,在这里可以在渲染前最后一次更改数据的机会,不会触发其他的钩子函数,一般可以在这里做初始数据的获取 接下来开始render,渲染出真实dom,然后执行mounted钩子函数,此时,组件已经出现在页面中,数据

VUE2中文文档:语法基础笔记

让人想犯罪 __ 提交于 2020-02-20 08:01:12
声明式渲染 Vue.js 的核心是,可以采用简洁的模板语法来声明式的将数据渲染为 DOM: <div id="app"> {{ message }} //模板语法 </div>    var app = new Vue({  //新建vue实例(响应式) el: '#app',      //挂载到#app data: { message: 'Hello Vue!'  //数据 } }) 除了文本插值(text interpolation),我们还可以采用这样的方式绑定 DOM 元素属性: <div id="app-2"> <span v-bind:title="message">     //v-bind:属性=“数据” 鼠标悬停此处几秒, 可以看到此处动态绑定的 title! </span> </div> var app2 = new Vue({ el: '#app-2', data: { message: '页面加载于 ' + new Date().toLocaleString() } })   由组件组合而成的应用程序 在 Vue 中,一个组件本质上是一个被预先定义选项的 Vue 实例,在 Vue 中注册组件很简单: // 定义一个被命名为 todo-item 的新组件 Vue.component('todo-item', { template: '<li>这是一个

Ajax技术体系简要说明

允我心安 提交于 2020-02-18 13:31:11
JavaScript、CSS(层叠样式表)、DOM(文档对象模型)、XMLHttpRequest是构成Ajax技术体系的四个技术基石,其中前三者合在一起以前称为DHTML。 JavaScript是一种弱类型、解释型的、通用的脚本语言,在Ajax技术体系中,它将各个部分粘合在一起。JavaScript定义应用业务逻辑、操作DOM改变和刷新用户界面、重绘或重新组织用户数据、处理用户交互。 CSS为Web页面元素提供了一种可重用的可视化样式的定义方法来定义应用的外观。样式表提供了集中定义各种视觉样式的方法并方便地设置到页面元素上。样式表可以定义样式元素、定义元素相互之间的布局以及简单的用户交互功能以实现视觉效果。HTML定义了文档的结构,定义了元素之间的包含关系,而不是外观,但它也定义了文档中可以应用样式的位置。通过定义CSS样式来定义用户界面的样式。 DOM组织网页视图,以一组可以使用JavaScript操作的可编程对象展现出Web页面的结构。通过使用脚本修改DOM在运行时改变用户界面,或重绘页面的某个部分。Web页面的DOM是树状结构,JavaScript引擎通过全局变量document公开当前web页面的根节点,这个变量是所有DOM操作的起点。DOM文档与HTML表单的关系是双向的,修改DOM将会改变HTML标记。 使用XMLHttpRequest以异步方式与服务器通信

DOM理解

橙三吉。 提交于 2020-02-17 18:42:40
链接:https://www.zhihu.com/question/33453164/answer/56549408 来源:知乎 这几个都是 JS 里面的概念。 先说 DOM : DOM 全称是 Document Object Model,也就是文档对象模型。 DOM 就是针对 HTML 和 XML 提供的一个API。什么意思?就是说 为了能以编程的方法操作这个 HTML 的内容 (比如添加某些元素、修改元素的内容、删除某些元素),我们把这个 HTML 看做一个对象树(DOM树),它本身和里面的所有东西比如 <div></div> 这些标签都看做一个对象,每个对象都叫做一个节点(node),节点可以理解为 DOM 中所有 Object 的父类。 &amp;lt;img src="https://pic3.zhimg.com/2e9a57f3043adfd954e147c8718c3266_b.png" data-rawwidth="420" data-rawheight="464" class="content_image" width="420"&amp;gt; DOM 有什么用?就是为了操作 HTML 中的元素,比如说我们要通过 JS 把这个网页的标题改了,直接这样就可以了: document.title = 'how to make love'; 这个 API

DOM理解

一笑奈何 提交于 2020-02-17 07:23:58
什么是DOM? DOM是一个标准(或者说API),允许程序和脚本访问、操作页面的内容、结构和样式,为文档提供了一种结构化的表示方式,以 改变文档呈现方式 (即用来改变文档呈现方式)。 DOM标准包括3个不同的部分: 核心DOM(Core DOM):所有文档类型的标准模型 XML DOM:XML文档的标准模型 HTML DOM:HTML文档的标准模型 HTM DOM HTML DOM 可以获取、添加、删除和修改HTML元素。它定义了HTML元素和属性,并可以访问它们。将HTML 文档呈现为 树结构。 如何从HTML文档构建网页? 浏览器将文档转换为可视化页面的过程称为“渲染”,这大致分为俩阶段。 浏览器解析文档,将HTML文档每个元素映射为一个存在层级关系的节点,皆喜玩城后,生成一个由不同节点组成的树结构,即DOM树。 document 对象就用来描述 DOM树的状态和属性,同时也提供操作DOM的API。如下: HTML DOM定义了: HTML元素均为节点对象 HTML元素的属性 操作HTML元素的方法 HTML元素的事件 通过HTML DOM,JavaScript可以动态地对HTML进行如下操作: 添加、修改和移除页面中HTML元素和属性 修改页面中的CSS样式 实现事件交互 增加新的事件 DOM树不一定是源html文档 1.html无效 <!doctype html>

什么是DOM,DOM level 1\\2\\3 的区别是什么

一世执手 提交于 2020-02-17 06:13:35
DOM 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”,双方为了在JavaScript与JScript一决生死,于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物,计有VBScript、ActiveX、以及微软自家的DHTML格式等,使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。 根据W3C DOM规范,DOM是HTML与XML的应用编程接口(API),DOM将整个页面映射为一个由层次节点组成的文件。有1级、2级、3级共3个级别。 1级DOM 1级DOM在1998年10月份成为W3C的提议,由DOM核心与DOM HTML两个模块组成。DOM核心能映射以XML为基础的文档结构,允许获取和操作文档的任意部分。DOM HTML通过添加HTML专用的对象与函数对DOM核心进行了扩展。 2级DOM 鉴于1级DOM仅以映射文档结构为目标,DOM 2级面向更为宽广。通过对原有DOM的扩展,2级DOM通过对象接口增加了对鼠标和用户界面事件(DHTML长期支持鼠标与用户界面事件)、范围、遍历(重复执行DOM文档)和层叠样式表(CSS)的支持。同时也对DOM