克隆对象
var obj = {
name:'a',
run: function(){},
arr: ['wuwei','dd'],
haha:{name:'cc',age:18}
}
function clone(origin,target){
target = target || {};
var toStr = Object.prototype.toString;
for(var key in origin){
if(typeof origin[key] !== null && typeof origin[key] === 'object'){ // 引用值,数组,对象
if(toString.call(origin[key]) === '[object Array]'){
target[key] = [];
}else{
target[key] = {}
}
clone(origin[key],target[key])
}else{
target[key] = origin[key]
}
}
return target;
}
var target = {};
target = clone(obj,target)
检测类型
function type(data){
var toStr = Object.prototype.toString;
var obj = {
'[object Array]':'Array',
'[object Object]':'Object',
'[object RegExp]':'RegExp',
'[object Number]':'Number',
'[object String]':'String',
'[object Boolean]':'Boolean'
}
if(data === null) return 'null';
if(typeof data === 'object'){ // 引用类型
// if(toStr.call(data) === '[object Array]'){
// return 'Array';
// }
// switch(toStr.call(data)){
// case '[object Array]':
// return 'Array';
// case '[object Object]':
// return 'Object';
// case '[object RegExp]':
// return 'RegExp';
// case '[object Number]':
// return 'Number';
// case '[object String]':
// return 'String';
// case '[object Boolean]':
// return 'Boolean';
// }
return obj[toStr.call(data)];
}else{
return typeof data;
}
}
一. DOM树解析
什么是DOM树 ==>DOM节点按照树型结构排列
1. DOM树生成的原则
深度优先
2. 浏览器渲染页面前的步骤
解析DOM节点，生成DOM树
继续解析css代码生成CSS树
DOM树和CSS树合并在一块生成Render树
浏览器开始渲染绘制页面
3. script标签同步加载的弊端
js的加载是同步的;
3.1 js加载是同步的
同步加载js是为了防止js操作DOM元素,而造成问题
js下载会阻止后面的标签执行,js还学会阻止网页中所有的下载行为
2.2 如果需要异步加载JS
比如要加载一些工具类的script文件,这些js文件并不会去操作DOM,也就不会对DOM结构和CSS产生影响.
那么现在同步加载就会影响性能，因为如果没有加载完成，会阻塞后面的DOM结构的解析文件和css文件的加载，过多的工具类script文件，会让网页的加载时间过长。不利于用户体验
个别工具类script文件是按需加载,使用时才加载,不使用的时候就不加载
但有的时候我们是希望JS的加载是异步的
有些JS并不会操作页面,只是初始化一个数据,还有就是引入工具包吧,工具包就是一个一个function,你不调用压根不会执行,这样的js我们是不希望同步吧,因为如果在加载过程中有1k的内容没有加载过了,你整个程序就中断了,js会阻塞后面的内容
后来研究,就加载那些工具按需加载,用到在加载,不用不加载
2.3 JS操作DOM和CSS造成的重构和重绘
DOM树生成完成了在等着,等着CSS树生成
rander树一旦生成,页面就会绘制了吧
-
reflow 重构
如果在页面也就渲染完成了,你此时通过JS修改了DOM树,就会生成新的DOM树然后生成新的rander树,造成性能的浪费,所以即使你要修改DOM也请一次修改完,别修改一次 等一会 你在一次修改DOM树
重构效率是最低的,哪几种情况会触发重构呢
DOM节点的删除 添加,
DOM节点的宽高变换,位置变换 none - block
-
repaint 重绘，
如就是改变背景原色,触发CSS树变换的叫重绘，这个重绘的只是一部分，并不会导致整个页面重构,
比如改个文字颜色啊,改个背景颜色啊,影响比较小,但是文字大小,改变 就会触发重构
重构你可以理解为结构发生了变换,导致整体发生变化,重绘只是样式发生了变换,不会影响整体
2.3 异步加载js文件的三种方案
-
defer 异步加载
在DOM文档解析完成之后才执行js文件，IE独有正常的JS下载完成后就会理解执行,家里defer后就算js下载完了也不会执行 DOM解析完成一定是在DOM加载完成 1.2 可以让内部script标签里的代码异步,IE9一下才可以用 IE用的 -
async
在加载完js文件之后就执行，只能加载外部js文件，不能把js代码写在js文件里js文件加载完成后理解执行.同时执行也是也不执行.不影响其他代码加载执行. 这是w3c的方法,IE9以上都可以用,IE9及其以下不能用 内嵌的JS不能使用 非IE用的 创建script标签，插入在DOM中，在js文件加载完毕之后callBack
能够实现按需加载
封装兼容函数loadSript
var script = document.createElement('script')
script.type = 'text/javascript'
script.src = 'tools.js'; // 这行代码只会下载js文件但不会执行,什么时候会执行呢,就是将标签加到body中
document.head.appendChild(script)
//因为加载js是异步的,所以这里有会有问题,js还没加载前,就讲script加到head中了
// 那有没有一个事件可以可以通知我们js加载完成了了呢
// load事件
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'index2.js'; // 这行代码只会下载js文件但不会执行,什么时候会执行呢,就是将标签加到body中
//因为加载js是异步的,所以这里有会有问题,js还没加载前,就讲script加到head中了
// 那有没有一个事件可以可以通知我们js加载完成了了呢
// load事件
script.onload = function (){
// text()
}
document.head.appendChild(script);
text(); // 这个时候回报错,text是index2中定义了一个函数text,所以text放在onload事件里执行
但是IE 8及其以下身上没有onload事件,IE自己有一个特殊的状态码
script.readyState = 'lading'; //
script.onreadystatechange = function(){
if(script.readyState == 'loading' || script.readyState == 'complete'){
text()
}
}
总之一切的东西都是为了优惠效率
封装loadScript
function loadScript(url,callback){
var script = document.createElement('script');
script.type = 'text/javascript';
// script.src = url;
if(script.readyState){
script.onreadystatechange = function(){
if(script.readyState == 'loading' || script.readyState == 'complete'){
callback()
}
}
}else{
script.onload = function (){
callback()
}
}
script.src = url;
document.head.appendChild(script);
}
loadScript('index2.js',function(){
text();
})
封装的这个方法就可以按需加载按需执行.
二. js的时间线
js出生时浏览器执行的事,记录浏览器执行的顺序
- 创建document对象。解析HTML元素和他们的文本内容后添加Element对象和Text节点到文档中。这个阶段document.readyState = 'loading'。
- 如果遇到link外部css文件，浏览器会创建新线程加载，同时继续解析文档。
- 如果遇到外部js文件，并且没有设置async、defer，浏览器会加载js文件,阻塞主线程，等待js文件加载完成并执行该文件，然后继续解析文档。
- 如果遇到外部js文件，并且设置有async、defer，浏览器会创建新线程加载js文件，同时继续解析文档。对于async属性的js文件，会在js文件加载完成后立即执行。
- 如果遇到img,iframe等，浏览器在解析dom结构时，会异步加载src，同时继续解析文档。
- 当DOM文档解析完成，document.readyState = 'interactive’。
- 文档解析完成后，所有设置有defer的脚本会按照顺序执行。
- document对象触发DOMContentLoaded事件，这也标志着程序执行从同步脚本执行阶段，转化为事件驱动阶段。
- 当所有async的脚本加载完成并执行后、img等加载完成后，document.readyState = 'complete'，window对象触发load事件
- 从此,以异步响应方式处理用户输入,网络事件等
简化就三个步骤
1.创建document对象
2.文档解析完成
3.文档加载完成
console.log(document.readyState); // loading
window.onload = function(){
console.log(document.readyState) // complete
}
document.onreadystatechange = function(){
console.log(document.readyState) //interactive complete
}
// 文档解析完成 onload太墨迹了 要全部加载完才执行
document.addEventListener('DOMContentLoaded',function(){
console.log(33)
},false)