<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded' , function () {
var div = document.getElementsByTagName('div')[0];
console.log(div); //dom 解析完
},false);
</script>
</head>
<body>
<div style="width: 100px;height: 100px;background-color: red"></div>
<script type="text/javascript">
//ie9以下可以用
//異步加載JavaScript
//和html 和 css異步下載同時下載
// var obj = {
// "name" : "abc",
// "age" : 123
// }
// var str = JSON.stringify(obj);
// var obj1 = JSON.parse(str);
// var script = document.createElement('script');
// script.type = "text/javascript";
// script.src = "tool.js"
//兼容性非常好IE裏面就script沒有load
// IE狀態碼
// script.readyState = "loaded"
// if (script.readyState) {
// script.onreadystatechange = function () {
// if (script.readyState == "complete" || script.readyState == "loaded") {
// test();
// }
// }
// } else {
// script.onload = function () {
// test();
// }
// }
// document.head.appendChild(script);
// setTimeout(() => {
// test();//延遲才能執行
// }, 1000);
// function loadScript(url, callback) {
// var script = document.createElement('script');
// script.type = "text/javascript";
// if (script.readyState) {
// script.onreadystatechange = function () {
// if (script.readyState == "complete" || script.readyState == "loaded") {
// callback();
// }
// }
// } else {
// script.onload = function () {
// callback();
// }
// }
// script.src = url;
// document.head.appendChild(script);
// }
// loadScript('tool.js', function () {
// test();
// });//爲了跳過預編譯直接執行
// window.onload = function () {
// document.write('a');
// } // 消除文檔流
document.onreadystatechange = function () {
console.log(document.readyState);
}//dom對象剛建立
console.log(document.readyState);
//loading dom 樹未建立完成
window.onload = function () {
console.log(document.readyState);
}//domTree 建立完成
document.addEventListener('DOMContentLoaded' , function () {
console.log('a');
},false);
</script>
<!-- domTree + cssTree = randerTree
避免重排 reflow
reflow 重排 dom 節點的增刪
dom節點的寬高變化，位置變化，display noon -> block
offsetWidth offsetLeft(因爲實時 改變ramderTree) -->
<!-- repaint 重繪 改東西 可以接受 例如顏色啊什麼的 -->
</body>
</html>