dom

DOM方式读取XML 一、Dom初步 DOM是Document Object Model的缩写，即文档对象模型。前面说过，XML将数据组织为一颗树，所以DOM就是对这颗树的一个对象描叙。通俗的说，就是通过解析XML文档，为 XML文档在逻辑上建立一个树模型，树的节点是一个个对象。我们通过存取这些对象就能够存取XML文档的内容。 下面我们来看一个简单的例子，看看在DOM中，我们是如何来操作一个XML文档的。 这是一个XML文档，也是我们要操作的对象： <?xml version="1.0" encoding="UTF-8"?> <messages> <message>Good-bye serialization, hello Java!</message> </messages> 下面，我们需要把这个文档的内容解析到一个个的Java对象中去供程序使用，利用JAXP，我们只需几行代码就能做到这一点。首先，我们需要建立一个解析器工厂，以利用这个工厂来获得一个具体的解析器对象： DocumentBuilderFactory dbf = DocumentBuilderFactory.newInstance(); 我们在这里使用DocumentBuilderFacotry的目的是为了创建与具体解析器无关的程序，当DocumentBuilderFactory 类的静态方法newInstance(

目录 原生js部分 关于JQ部分 原生js部分 参考文章 js性能优化的小知识 javascript性能优化技巧 JavaScript性能优化之小知识总结 DOM编程 建议将对象进行缓存处理，特别是DOM访问是比较消耗资源的 使用DocumentFragment优化多次append 一旦需要更新DOM,请考虑使用文档碎片来构建DOM结构，然后再将其添加到现存的文档中。 for (var i = 0; i < 1000; i++) { var el = document.createElement('p'); el.innerHTML = i; document.body.appendChild(el); } //可以替换为： var frag = document.createDocumentFragment(); for (var i = 0; i < 1000; i++) { var el = document.createElement('p'); el.innerHTML = i; frag.appendChild(el); } document.body.appendChild(frag); 使用一次innerHTML赋值代替构建dom元素 对于大的DOM更改，使用innerHTML要比使用标准的DOM方法创建同样的DOM结构快得多。 var frag =

一、js概述 　　js即 JavaScript ，是被设计用来验证表单、检测浏览器、创建cookies、改进设计以及更多应用的 网络脚本语言 ，它非常容易使用。在web应用中，它是主要的 编程语言 ，主要用途是进行各种 逻辑控制 、 行为展现 等。对于js的优化，对于整个应用的提升都是 非常显著 的。 二、使用字面量（literal notation）来声明对象和数组 　　创建对象和数组的方法有很多，但是使用 字面量 是最 简单 最 快 的。传统的方法是使用 内建的构造器 声明： //create an object var obj = new Object(); obj.debug = false; obj.lang = "en"; //create an array var arr = new Array("one", "two", "three"); 这种方式在 技术上 是没问题的，但是使用字面量声明会 更快 而且 代码更少 ： //create an object var obj = {debug: false, lang: "en"}; //create an array var arr = ["one", "two", "three"]; 三、避免使用全局变量和函数 　　即把 属性 和 方法 都绑定到一个 命名空间 对象里，这样不仅可以 减少命名冲突 ，而且可以

从键入url到页面显示发生了什么 这个过程可以大致分为两个部分：网络通信和页面渲染。 网络通信 输入url按下回车之后，浏览器会去浏览器缓存中寻找该url的ip；没有的话去系统缓存中找，还是没有的话去路由器缓存中寻找；再没有就去系统host文件中找，还是没有最后只能去请求dns服务器，然后dns给一个ip给浏览器；浏览器根据这个IP地址，向服务器发送HTTP请求。HTTP经过传输层(TCP的三次握手建立连接);网络层(IP协议查询MAC地址);数据链路层(找到对方的MAC地址之后，将数据传送到数据链路层);物理层(传输给服务器);服务器接受数据；服务器响应请求；服务器返回相应的文件(HTML文件等)，接下来就是页面渲染 浏览器渲染 处理 HTML 并构建 DOM 树。(如果遇到style节点 则构建css树（这里不会阻塞dom树的构建）) 处理 CSS 构建 CSSOM 树。 将 DOM 与 CSSOM 合并成一个渲染树。 根据渲染树来布局，计算每个节点的位置。 调用 GPU 绘制，合成图层，显示在屏幕上。 在构建 CSSOM 树时，会阻塞渲染，直至 CSSOM 树构建完成。并且构建 CSSOM 树是一个十分消耗性能的过程，所以应该尽量保证层级扁平，减少过度层叠，越是具体的 CSS 选择器，执行速度越慢 浏览器渲染阻塞 当 HTML 解析到 script 标签时，会暂停构建 DOM

目录 Vue 简介 什么是 Vue？ 优势 如何使用 Vue 常用网站 Vue 简介 渐进式 JavaScript 框架 渐进式：可以控制一个页面的一个标签，也可以控制一系列标签，也可以控制整个页面，甚至可以控制整个前台项目。你需要用它的什么组件就用什么组件，没有强主张 什么是 Vue？ 可以独立完成前后端分离式 web 项目的 JavaScript 框架 前后端不分离： 在前后端不分离的应用模式中，前端页面看到的效果都是由后端控制的，由后端渲染页面或重定向，也就是后端需要控制前端的展示，前端与后端的耦合度很高 前后端分离 在前后端分离的应用模式中，后端仅返回前端所需要的数据，不在渲染 HTML 页面，不再控制前端效果 至于前端用户看到什么效果，从后端请求的数据如何加载到前端，都是由前端自己决定，网页有网页的处理方式，App 有 App 的处理方式，但无论哪种前端，所需的数据基本相同，后端仅需开发一套逻辑对外提供数据即可 为什么要学习 Vue ？ 前台框架：Angular（庞大）、React（精通移动端）、Vue（吸取前两者优势，轻量级） Vue一手文档是中文、中文API（低学习成本） 实现前后台分离开发，节约开发成本 special -- 特点 虚拟DOM 数据的双向绑定 单页面应用 数据驱动 优势 有指令（分支结构，循环结构...），复用页面结构等 有实例成员（过滤器，监听）

vue的生命周期很重要，以前觉得会用就行，但是知其所以然能让学习事半功倍，今天详细整理了一下，重在理解记忆，明白生命周期就了解了vue的执行过程，以后用着再补充吧 vue生命周期分三个阶段 1.创建阶段（执行一次） 创建实例前：beforeCreated（组件实例化刚被创建，还没实例化之前，执行一些初始化操作） 创建实例后：created（这是最早拿到data和methods的钩子函数 dom还未被加载，页面还没展示，可以发起Ajax（异步）请求） 挂载前：beforeMount（模板：这里是#app里的内容，1.如果是组件的话就是template里的内容，2.如果没有组件，则将外部的HTML作为模板编译（template中的模板优先级高于outer HTML的优先级）） 模板里的dom节点被编译成虚拟的dom（js对象）在这里已经编译成功了 虚拟dom并没有渲染成真实的dom（{{msg}}）） 挂载后：mounted （把上述虚拟的dom变成真实的dom，并挂载在页面上，（hello world）这个时候可以拿到虚拟dom的上节点 这是最早可以拿到dom节点然后进行操作的钩子函数） 2.运行阶段（当data发生变化时触发 执行0次和无数次） 更新前：beforeUpdate（真实的dom更新之前，这个时候数据已经发生了变化，我们能拿到变化后的数据