关于-Dom

1.  用户输入url到展示内容，经历了什么
   1. 用户在地址栏输入域名,服务器根据域名查找IP,向Ip发起请求
   2. 浏览器获得并解析服务器返回的内容
   3. 浏览器加载HTML文件,以及引用外部文件,资源,图片
   4. js渲染引擎从上到下解析DOM文档生成DOM节点树
   5. 构建CSS树,加载解析样式生成CSSOM树
   6. 执行jsavscript,加载并执行javascript代码
   7. 构建渲染树,根据DOM树跟CSSOM树生成渲染树 render-tree
   8. 根据渲染树将节点树的每一个节点布局在屏幕的正确位置上(Layout)
   9. 遍历渲染树所有节点(painting),为每个节点加上对应的样式
   

2.  Window的方法
   1. window.screen.width // 属性返回以像素计的访问者屏幕的高/宽度。
   2. window.location // 返回浏览器url信息，
   3. window.location.assign('地址') // 加载新文档。
   4. history.back()  // 等同于在浏览器点击后退按钮
   5. history forward() // 等同于在浏览器中点击前进按钮
   6. navigator.userAgent() // 返回由浏览器发送到服务器的用户代理报头  
   

3.  Cookie 
   1. 获取cookie  var cookieInfo = document.cookie 
   2. 改变cookie  document.cookie = "username=Steve Jobs; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";
   3. 结合起来用就是 
        function setCookie(cname, cvalue, exdays) {
            var d = new Date();
            d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
            var expires = "expires="+d.toUTCString();
            document.cookie = cname + "=" + escape（cvalue）+ ";" + expires + ";path=/";
        }
   
        function getCookie(cname) {
            var name = cname + "=";
            var ca = document.cookie.split(';');
            for(var i = 0; i < ca.length; i++) {
                var c = ca[i];
                while (c.charAt(0) == ' ') {
                    c = c.substring(1);
                 }
            if (c.indexOf(name)  == 0) {
              return c.substring(name.length, c.length);
                 }
            }
            return "";
        }
   
        function checkCookie() {
          var user = getCookie("username");
          if (user != "") {
               alert("Welcome again " + user);
         } else {
                user = prompt("Please enter your name:", "");
                if (user != "" && user != null) {
                    setCookie("username", user, 365);
                }
            }
        }