dom

减少浏览器的回流和重绘 1. CSS 方面 避免过多样式嵌套 避免使用 CSS 表达式 使用绝对定位，可以让动画元素脱离文档流 避免使用 table 布局 尽量不要使用 float 布局 图片最好设置好 width 和 height 尽量简化浏览器不必要的任务，减少页面重新布局 使用 Viewport 设置屏幕缩放级别 避免频繁设置样式，最好把新 style 属性设置完成后，进行一次性更改 避免使用引起回流/重绘的属性，最好把相应变量缓存起来 2. JS方面 最小化回流和重排 为了减少回流发生次数，避免频繁或操作 DOM ，可以合并多次对 DOM 修改，然后一次性批量处理。 控制绘制过程和绘制区域 绘制过程开销比较大的属性设置应该尽量避免减少使用 减少绘制区域范围 DOM优化： 控制DOM大小并简化DOM操作 1. 控制DOM大小 总所周知，页面交互卡顿和流畅度很大一部分原因就是页面 有大量DOM元素。 想象一下，从一个上万节点的DOM树上，使用 querySelectorAll 或 getElementByTagName 方法查找某一个节点，是非常耗时的。另外元素绑定事件，事件冒泡和事件捕获的执行也会相对耗时。 通常控制 DOM 大小的技巧包括： 合理的业务逻辑 延迟加载即将呈现的内容 2. 简化DOM操作 对 DOM 节点的操作统一处理后，再统一插入到 DOM Tree 中

1 简介 JQuery，是辅助JS开发的库。是一套跨浏览器的JS库，简化HTML与JavaScript之间的操作。极大地简化了遍历HTML文档，操作DOM，处理事件、执行动画和开发Ajax。链式操作，隐式迭代。 2 HelloWorld 1 使用JQuery必须先引入JQuery的库文件，使用script标签引入。 <script type="text/javascript" src="../script/jquery-1.7.2js"></script> <script type="text/javascript"> //编写js代码 //$():调用$方法 $():较直jquery的核心函数 /*为$()方法传入一个function{}作为参数 ： window.οnlοad=function(){写代码} 就相当于$(function{写代码});*/ $(function()){ //使用$()查找元素，使用.click()来绑定点击响应函数，把单机响应函数作为click()的参数传入即可 $("#btnId").click(function(){ alert("HelloWorld"); }); }); </script> 2 $的本质:$是一个函数 ，把$();称为JQuery的核心函数。 $==jQuery，故jQuery("#btn").click(function

1.MVVM的理解 MVVM：Model-View-ViewModel，模型-视图-视图模型。Model指后端传递的数据，View指所看到的页面，ViewModel是连接view和model的桥梁。ViewModel功能： 1.将模型转换为视图，即将后端传递的数据转化为所看到的页面。实现的方式是数据绑定。 2.将视图转换为模型，实现的方式是dom事件监听。 两个方向都实现我们称之为数据的双向绑定。 在MVVM的框架下视图和模型不直接通信，通过ViewModel来通信。ViewModel通常实现一个observer观察者，当数据变化后，其能监听到数据的变化并且通知对应的视图进行自动更新，而当用户操作视图时，ViewModel也能监听到这种变化并且通知数据做改动。 前端并没有传统意义上的MVC模式，过去为了解决浏览器兼容问题出现的类库如jQuery并没有实现对业务逻辑的分层，所以维护性和扩张性较差，而以前的文件缺乏正规的组织形式，因此出现MVVM。在vue中model指的是js数据，view指的是页面视图，viewmodel指vue实例化对象。 2.vue优点 轻量级框架，国人开发简单易学，双向数据绑定，组件化，虚拟dom操作 3.父子组件传参 父向子props，子向父$emit，vuex，ref 4.v-show和v-if 都控制元素的显示和隐藏 v

JavaScript由ECMAScript,Dom,Bom三部分组成. ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，但实际上后两者是ECMA-262标准的实现和扩展。 DOM:标准化组织是W3C, HTML文档模型节点 BOM:Browers Object Model 浏览器对象模型 缺乏标准 来源： https://www.cnblogs.com/tx720/p/5687353.html

在JS中要想将自己的代码与网页有所联系，那就需要dom来实现。在dom中用多种方式进行元素的获取，这里就一一的列举。 01：获取元素内部的html代码(innerHTML):方法 通过一个变量在获取到html中内部所对应标签的id值。语法： 变量.innerHTML。当然单独这样我们是看不出什么的，我们 可以通过alert弹窗，或者document，来进行查看内容。对于自结束标签没有用。 02获取一组元素节点对象：（getElementsByTagName）-方法 查找所有的一种元素节点。我们可以用getElementsByTagName。这种方式会给我们返回一个类数组对象，所有查询的元素都会封装到对象中。语法：var 变量 = document.getElementsByTagName。当然了，既然是数组，我们就可以通过数组的方式进行它内容的查看，用for循环，将内容依次输出。 如for（var i=0;i<变量.length;i++）{ alert（变量[i].innerHTML） }。 03根据name属性来获取一组元素节点对象： （getElementsByName）-方法 返回值一样是一个数组用法与上述类似，只是getElementsByName访问的是一个元素中的name属性值。 04获取子节点（childNodes）-属性 表示当前节点的所有字节点。语法 var 变量