# 浏览器的渲染(HTML解析)

——参考:

《前端必读:浏览器内部工作原理》http://kb.cnblogs.com/page/129756/

《谈谈DOMContentLoaded:Javascript中的domReady引入机制》http://www.cnblogs.com/horve/p/4092064.html

——基本渲染流程,不包含图片,PDF,flash等特殊资源的渲染

* 蓝色部分为浏览器内部的运算

* window.onload  DOM树构建完成和文件资源加载完毕后执行

— 存在短板:当dom构建完成,文件很大未加载完时,页面呈现等待状态(容易让人误会卡死,用户体验不好)

— 解决方案:

#代码只执行一次(或单次循环使用)的方案:
首先,命名一个标示:
var TF = false; // 初始值用false,比true有利(TF无论值是什么,存在即true)
其次,通过if判断执行:
if(!TF){
TF = true;
// 具体代码… (如果需要再次使用在具体代码最后 TF = false; 即可)
fn(){ };
};
new Date().getTime(); // 获取当前的时间戳
a.innerHTML = ‘xxxx’; // 获取对象a的内容并设置为新的内容xxxx
a.nextSibling // 获取对象a的下一个节点
document.createElement(‘div’) // 创建一个div元素
a.appendChild(b) // 向节点a的子节点列表的结尾添加新的子节点b
a.removeChild(b) // 删除(并返回)当前节点a的指定子节点b
a.parentNode // 获取对象a的父节点(上一级)

*==和===的区别  [!!a && a.nodeType === 1; 释义:对象a存在,并且a属于元素节点]

——参考:

http://www.cnblogs.com/yiki/archive/2012/05/08/2489687.html

http://www.cnblogs.com/fumj/p/3477850.html

http://www.cnblogs.com/yiki/archive/2012/05/08/2489687.html

*关于instanceof

——参考:http://blog.sina.com.cn/s/blog_532751d90100iv1r.html

*怎样判断点击的是js对象还是dom对象:

——参考:http://stackoverflow.com/questions/384286/javascript-isdom-how-do-you-check-if-a-javascript-object-is-a-dom-object/27112297#27112297

* try catch的运用

——参考:http://www.cnblogs.com/luluping/archive/2011/02/14/1954092.html


#HTML嵌套规则及相关知识

 

 

 

【笔记】DOM探索基础篇(二)的更多相关文章

  1. 【笔记】DOM探索基础篇(一)

    #DOM探索(前端课程学习笔记)http://www.imooc.com/video/9502 DOM = document + object + model ECMAScript 编写js应遵守的标 ...

  2. DOM系列---基础篇

    DOM系列---基础篇   DOM (Document Object Model) 即文档对象模型, 针对 HTML 和 XML 文档的 API (应用程序接口) .DOM 描绘了一个层次化的节点树, ...

  3. php基础篇-二维数组排序 array_multisort

    原文:php基础篇-二维数组排序 array_multisort 对2维数组或者多维数组排序是常见的问题,在php中我们有个专门的多维数组排序函数,下面简单介绍下: array_multisort(a ...

  4. JavaScript笔记基础篇(二)

    基础篇主要是总结一些工作中遇到的技术问题是如何解决的,应为本人属于刚入行阶段技术并非大神如果笔记中有哪些错误,或者自己的一些想法希望大家多多交流互相学习. 1.ToFixed()函数 今天在做Birt ...

  5. [Java入门笔记] 面向对象编程基础(二):方法详解

    什么是方法? 简介 在上一篇的blog中,我们知道了方法是类中的一个组成部分,是类或对象的行为特征的抽象. 无论是从语法和功能上来看,方法都有点类似与函数.但是,方法与传统的函数还是有着不同之处: 在 ...

  6. Qt入门之基础篇 ( 二 ) :Qt项目建立、编译、运行和发布过程解析

    转载请注明出处:CN_Simo. 题解: 本篇内容主讲Qt应用从创建到发布的整个过程,旨在帮助读者能够快速走进Qt的世界. 本来计划是讲解Qt源码静态编译,如此的话读者可能并不能清楚地知道为何要静态编 ...

  7. NIO相关基础篇二

    转载请注明原创出处,谢谢! 上篇NIO相关基础篇一,主要介绍了一些基本的概念以及缓冲区(Buffer)和通道(Channel),本篇继续NIO相关话题内容,主要就是文件锁.以及比较关键的Selecto ...

  8. Hybrid APP基础篇(二)->Native、Hybrid、React Native、Web App方案的分析比较

    说明 Native.Hybrid.React.Web App方案的分析比较 目录 前言 参考来源 前置技术要求 楔子 几种APP开发模式 概述 Native App Web App Hybrid Ap ...

  9. docker+k8s基础篇二

    Docker+K8s基础篇(二) docker的资源控制 A:docker的资源限制 Kubernetes的基础篇 A:DevOps的介绍 B:Kubernetes的架构概述 C:Kubernetes ...

随机推荐

  1. 抽象类和抽象方法(关键字abstract)

     1.抽象类不能被实例化,可以没有,一个或多个抽象方法  2.抽象方法只有方法的声明但没有方法的实现,有抽象方法的类必须声明为抽象类,子类必须重写父类所有的抽象方法才能被实例化,否则子类也是个抽象类, ...

  2. listview java.lang.ArrayIndexOutOfBoundsException:

    检测下BaseAdapter  下的getViewTypeCount()方法返回的值与getItemViewType返回的个数是否是相等的!

  3. 有了第一台自己开发的pro,开心,明天分享最近整理逆向分析ios的一些东西

    最近都在忙于ios深入研究,研究别人的代码,别人的app.然后顺藤摸瓜的找到了关键:逆向,动态特性等. 相关工具:reveal, cycript等. 特别感谢前人的分享,为了打开学习ios的另外一扇大 ...

  4. js鼠标点击版tab切换

    代码很简单,主要是布局需要用心研究下,使用时需要把css内注释去除 <!DOCTYPE html> <head> <meta http-equiv="Conte ...

  5. 自动化(Automation)兼容的数据类型

    自动化(Automation)兼容的数据类型    

  6. mysql的sql_mode 模式修改 my.cnf

    1. sql_mode模式 mysql数据库的中有一个环境变量sql_mode,定义了mysql应该支持的sql语法,数据校验等!我们可以通过以下方式查看当前数据库使用的sql_mode: mysql ...

  7. sql Server中SET QUOTED_IDENTIFIER的使用

    在存储过程中经常会有 Sql代码   SET QUOTED_IDENTIFIER on SET QUOTED_IDENTIFIER off 这样的语句,那么SET QUOTED_IDENTIFIER到 ...

  8. Spring HtmlUtils把HTML编码转义,可将HTML标签互相转义

    Spring HtmlUtils把HTML编码转义,可将HTML标签互相转义 2014年09月05日 ⁄ 综合 ⁄ 共 372字 ⁄ 字号 小 中 大 ⁄ 评论关闭   org.springframe ...

  9. Linux中安装和使用rz、sz命令

    安装命令: yum install lrzsz 从服务端发送文件到客户端: sz filename 从客户端上传文件到服务端: rz在弹出的框中选择文件,上传文件的用户和组是当前登录的用户 Secur ...

  10. [题解]某模拟题(USACO月赛部分题+noip2005部分题)

    题目描述 农场上有N(1 <= N <= 50,000)堆草,放在不同的地点上.FJ有一辆拖拉机,也在农场上.拖拉机和草堆都表示为二维平面上的整数坐标,坐标值在1..1000的范围内.拖拉 ...