从网页中输入url后经历的过程
从网页中输入一个URL资源定位器后，到页面展示出来，一共经历了哪些过程。
1） DNS解析，解析成一个IP地址。
2） Tcp三次握手
3） 接收返回信息，js html css img
4） 解析返回的信息，查看js时间线部分内容
5） 渲染过程，是渲染引擎做的事
6） Tcp的四次挥手
这个查看收藏的网址中前辈总结的，那个更详细。
浏览器的基本组成
1） 用户界面
2） 浏览器引擎
3） 渲染引擎
4） 网络
5） UI后端
6） JS引擎
7） 数据存储
渲染/渲染引擎/渲染过程
渲染：在电脑绘图中是指用软件从模型生成图像的过程。
渲染引擎：其职责就是渲染，即在浏览器窗口中显示所请求的内容
渲染过程：解析html从而构建DOM树——>CSS Rule树——>构建Render树——>布局Render树——>绘制Render树。
标准模式与混杂模式
在IE6诞生之前，浏览器发展比较封闭，兼容性不好，此时的模式为混杂模式，IE6诞生之后，各个浏览器厂商按照标准模式改进了浏览器，此时的模式为标准模式。
标准模式的写法
<!DOCTYPE html>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www/w3.org/TR/html4/strict.dtd”>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml/DTD/xhtml1-strict.dtd”>
Html页面中开头如果写了<!DOCTYPE html>,则代表页面是标准模式。否则就是混杂模式。
在浏览器中判断当前是什么模式的方式就是：
Document.compatMode.如果是标准模式，则结果就是css1compat
Document.compatMode.如果是混杂模式，则结果就是backcompat
label标签与input标签
Label标签与input标签的连接，是通过for属性，label中的for和input的id是一一对应的。这样就会让label和input绑定到一起了。
特性和属性
特性是属性的一部分，是先天就有的属性。
获取特性值的方式可以是：元素.特性名，还可以进行修改特性值。
对不是特性的属性的操作方式就是通过 setAttribute getAttribute 的方式进行处理。
图片的预加载和懒加载
图片预加载的思路就是：
创建一个图片对象，图片加载完成的函数就是 img.οnlοad=function(){}
创建图片的两种方式：
Var oImg = document.createElement(‘img’);
Var oImg = new Image();
图片预加载的处理方式：
oImg.onload = function(){
var oDiv = document.getElementById(‘demo’);
oDiv.appendChild(this);
}
oImg.src=”图片地址”;
图片懒加载的思路就是：
监控滑轮事件，不断判断当前div的位置，采取预加载的方式，把图片正式添加到页面中
Math.random()获取随机数
Math.random()获取随机数，[0，1）的左闭右开区间随机数
Math.random()*(max-min)+min就可以获取到[min,max）之间的随机数了。
文档碎片-虚拟DOM
创建文档碎片的方式如下：
document.createDocumentFragment();
文档碎片并没有提高js的性能，以后的学习过程中会用到高级框架，里面会有虚拟DOM的一些操作，这些操作会提高js的性能。还可以通过字符串拼接的方式进行处理页面中内容的渲染。
封装getElementsByClassName()函数
Element.prototype.getElementsByClassName = Document.prototype.getElementsByClassName = function(
_className) {
//获取document下面的所有标签
var allDomArray = this.getElementsByTagName("*");
var lastDomArray = [];
function trimSpace(strClass) {
var reg = /\s+/g;
var newStrClass = strClass.replace(reg, " ");
return newStrClass;
}
for (var i = 0; i < allDomArray.length; i++) {
var lastStrClass = trimSpace(allDomArray[i].className).trim();
var classArray = lastStrClass.split(" ");
for (var j = 0; j < classArray.length; j++) {
if (classArray[j] == _className) {
lastDomArray.push(allDomArray[i]);
break;
}
}
}
return lastDomArray;
};
console.log(document.getElementsByClassName("demo"));
var oWrapper = document.getElementById("wrapper");
console.log(oWrapper.getElementsByClassName("active"));
注意：document上面的元素是通过document原型链的方式获取的，所以this指向的是document,如果是从元素里面进行判断，比如id=’wrapper’这个，则需要用的是Element上的原型链的方式。
JS中手动断点：debugger
在js代码中手动打断点的方式如下：debugger
