017Day-服务器收到请求信息之后的处理、window对象属性、三级联动练习、页面请求到最终加载显示的过程说明、js的默认加载顺序、js的异步加载、js的懒加载、页面性能优化

一、服务器收到请求信息之后的处理

<form action="4.ok.html">
    用户名：<input type="text" name="uname">
    <br>
    密码：<input type="password" name="pwd">
    <br>
    手机号：<input type="number" name="phone">
    <br>
    <button>提交</button>
</form>
<script>
    var url = "http://localhost:63342/web-js/4.ok.html?uname=%E6%9D%A8%E5%92%8C%E7%A4%BC&pwd=123456&phone=13126835297";
    //解码
    var decodeUrl = decodeURIComponent(url);
    //http://localhost:63342/web-js/4.ok.html?uname=杨和礼&pwd=123456&phone=13126835297
    console.log (decodeUrl);
    //获得请求参数部分
    var index = decodeUrl.indexOf("?");
    var parma = decodeUrl.substring(index + 1);
    // uname=杨和礼&pwd=123456&phone=13126835297
    console.log (parma);
    //将请求参数的键值对数据封装成对象。
    var obj = {};
    var split = parma.split("&");
    //遍历数组，
    for (let i = 0; i < split.length; i++) {
        //对每一个元素再次切割。
        var str = split[i].split("=");
        obj[str[0]] = str[1];
    }
    console.log (obj);
    //通过对象的键访问值
    console.log (obj.uname);
    console.log (obj["pwd"]);
    console.log (obj["phone"]);

</script>

二、 window对象的属性：navigator

window对象的属性：navigator
navigator对象的属性：
userAgent：返回浏览器用户代理的字符串对象。该字符串对象中保存了客户端的浏览器的内核的相关的信息。 如果使用移动端的设备，会带有“Mobile”字段。
plugins:当前浏览器安装的插件的信息。
返回的是一个类数组对象。保存了当前浏览器中所有的插件的信息。
navigator 作用：检测插件，以及插件安装之后的页面的刷新。

<script>
    // Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.125 Safari/537.36
    // Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1
    console.log (navigator.userAgent);
    console.log (navigator.plugins);
    console.log (Array.isArray(navigator.plugins));//false
</script>

三、window对象属性

window对象的name属性。是一个字符串类型。
默认值为空。长度为0的字符串的。
主要的作用：用于在多html页面之间进行数据的传递。
必须使用同一个窗口打开不同的html页面。

<a href="6.name.html">过去</a>
<script>
    console.log (window.name);
    console.log (name.length);
    document.onclick = function () {
        console.log (window.name);
    }
</script>

四、window对象的属性：history

window对象的属性：history
history：对象代表了窗口所有的浏览过的页面记录。
出于安全原因考虑，history对象没有对外提供访问所有浏览记录的接口。
但是提供了在各个浏览记录之间跳转的接口。
history对象的属性：
length：代表了当前窗口所有的浏览过的历史记录的个数。
history对象的方法：
1：forward()：以当前页面为基准，跳转到当前页面的下一个浏览过的页面。
等价于浏览器页面上的前进按钮。
2：back(): 以当前页面为基准，跳转到当前页面的前一个浏览过的页面。
等价于浏览器页面上的后退按钮。
3：go(num) : 以当前页面为基准，跳转到当前页面的前或者后 第num 个浏览过的页面。
go(1) : 等价于 forward()
go(-1): 等价于 back()
go(0): location.reload().刷新页面。
补充：
1: 上诉三个方法在页面中跳转，都是利用的页面缓存的内容。
2: 如果go的实参的值超过了可以跳转到的页面的序号，没有反应。

五、window对象属性：closed

了解：
window对象属性：closed。只读的布尔值属性。
代表了当前窗口对象是否已经关闭了。
如果关闭了就是true，否则就是false。

<script>
    //判断新打开的窗口何时关闭
    document.onclick = function () {
        var newWin = window.open();
        setInterval(function () {
            //打印打开的新窗口是被关闭了
            console.log (newWin.closed);
        },1000);
    }
</script>

六、 window对象属性：opener

了解：
window对象属性：opener
opener：当前窗口的父窗口。如果没有父窗口，那么就是null。

<script>
    console.log (window.opener);//null
    document.onclick = function () {
        var newWin = open();
        //newWin 窗口在 window窗口下打开的。
        console.log (newWin.opener === window);//true
    }
</script>

七、 window对象的属性-self-window

了解：
window对象的属性：
self：当前窗口自身。等价于window对象。
window: 当前窗口自身。等价于window对象。

<script>
    console.log (window.self === window);//true
    console.log (window.window === window);//true
</script>

八、三级联动练习

<select name="province" id="province">
    <option value="">请选择</option>
</select>
<span>省</span>
<select name="city" id="city">
    <option value="">请选择</option>
</select>
<span>市</span>
<select name="district" id="district">
    <option value="">请选择</option>
</select>
<span>区</span>

<script>
    // 定义数据
    var provinceData = ['吉林省', '辽宁省', '黑龙江省'];
    var cityData = [
        ['长春市', '吉林市', '四平市'],
        ['沈阳市', '大连市', '盘锦市'],
        ['黑河市', '哈尔滨市']
    ];
    var districtData = [
        [
            ['长春一区', '长春二区', '长春三区', '长春四区', '长春五区'],
            ['吉林一区', '吉林二区', '吉林三区'],
            ['四平一区', '四平二区', '四平三区', '四平四区']
        ],
        [
            ['沈阳一区', '沈阳二区', '沈阳三区', '沈阳四区', '沈阳五区'],
            ['大连一区', '大连二区', '大连三区'],
            ['盘锦一区', '盘锦二区', '盘锦三区', '盘锦四区']
        ],
        [
            ['黑河一区', '黑河二区', '黑河三区', '黑河四区', '黑河五区'],
            ['哈尔滨一区', '哈尔滨二区', '哈尔滨三区']
        ]
    ];

    //获得所有的select
    var province = document.getElementById("province");
    var city = document.getElementById("city");
    var district = document.getElementById("district");
    //页面加载，动态的加载省份信息
    (function () {
        //获得select，根据数组的长度，动态添加
        for (let i = 0; i < provinceData.length; i++) {
            var opt = document.createElement("option");
            opt.value = i;
            opt.innerHTML = provinceData[i];
            province.appendChild(opt);
        }
    })();

    //给省添加事件，当选择其他的省份的时候，动态的调整市的内容
    province.onchange = selectProvince;
    function selectProvince() {
        //清空之前市和区的内容，只保留请选择。
        city.length = 1;
        district.length = 1;
        //如果选择了请选择？
        if(province.value == ""){
            return;
        }

        //先获得当前选择的省份对应的市的数据。
        var index = province.value;

        for (let i = 0; i < cityData[index].length; i++) {
            var opt = document.createElement("option");
            opt.value = i;
            opt.innerHTML = cityData[index][i];
            city.appendChild(opt);
        }
    }

    //给city添加change事件
    city.onchange = selectCity;
    function selectCity() {
        //先清空区的内容
        district.length = 1;
        //如果选择请选择，只清空即可。
        var provinceIndex = province.value;
        var index = city.value;
        if(index == ""){
            return;
        }
        for (let i = 0; i < districtData[provinceIndex][index].length; i++) {
            var opt = document.createElement("option");
            opt.innerHTML = districtData[provinceIndex][index][i];
            district.appendChild(opt);
        }
    }

</script>

九、window对象的属性：screenX、screenY

了解：
只读属性：
window对象的属性：screenX、screenY
当前窗口相对于屏幕的坐标。

<script>
    document.onclick = function () {
        console.log (window.screenX);
        console.log (window.screenY);
    }
</script>

十、 window对象的属性：innerWidth、innerHeight

window对象的属性：innerWidth、innerHeight
1：只读属性。
2：浏览器窗口的宽度和高度。
3: innerWidth-innerHeight ：不包含边框和包含滚动条的。
document.documentElement.clientWidth：不包含滚动条和边框。

 <style>
        body{
            height: 3000px;
        }
    </style>
</head>
<body>

<script>
    document.onclick = function () {
        console.log ("innerWidth = " + innerWidth);
        console.log ("innerHeight = " + innerHeight);
        console.log ("clientWidth = " + document.documentElement.clientWidth);
        console.log ("clientHeight = " + document.documentElement.clientHeight);
    }
</script>

十一、window对象属性：outerWidth、outerHeight

window对象属性：outerWidth、outerHeight
1：只读属性。
2：outerWidth：整个浏览器窗口的宽度。outerHeight：整个浏览器窗口的高度

<script>
    document.onclick = function () {
        console.log ("innerWidth = " + innerWidth);
        console.log ("innerHeight = " + innerHeight);
        console.log ("outerWidth = " + outerWidth);
        console.log ("outerHeight = " + outerHeight);
        console.log ("clientWidth = " + document.documentElement.clientWidth);
        console.log ("clientHeight = " + document.documentElement.clientHeight);
    }
</script>

十二、 window对象属性：scrollX、scrollY

了解：
window对象属性：scrollX、scrollY
1：只读属性。
2：scrollX：页面朝左滚出窗口的距离。
scrollY：页面朝上滚出窗口的距离。

 <style>
        body {
            height: 2000px;
        }
    </style>
</head>
<body>

<script>
    document.onclick = function () {
        console.log (window.scrollY);
        console.log (window.scrollX);
    }
</script>

十三、 window对象的组件属性

了解：
window对象的组件属性：
如下的代码中的所有的组件都有一个属性：
visible：代表了组件是否可见。

    <script>
    console.log (window.locationbar.visible);
    console.log (window.menubar.visible);
    console.log (window.toolbar.visible);
    console.log (window.statusbar.visible);
    console.log (window.scrollbars.visible);
</script>

十四、 window对象的screen属性。

了解：
window对象的screen属性。
1：screen是一个对象属性。
2：代表了当前电脑的屏幕。通过该对象可以获得屏幕相关的内容。
3：width、height：screen对象的属性：屏幕的宽度和高度。当前屏幕的分辨率。不改变分辨率是不发生改变的。
4: screen对象的属性:availWidth:屏幕可用宽度。availHeight：屏幕可用高度（去掉任务栏）。
5：screen.pixelDepth: 屏幕的真彩色的值。一般是24。
可以根据屏幕分辨率的大小动态的调整布局的方案。

<script>
    console.log (screen.width);//1366
    console.log (screen.height);//768
    console.log (screen.availWidth);//1366
    console.log (screen.availHeight);//738
    console.log (screen.pixelDepth);//

</script>

十五、一个页面请求到最终加载显示的过程说明

超链接对应的网址：
http://war.163.com/photoview/4T8E0001/2309697.html#p=FK7LTJCH4T8E0001NOS
点击超链接的时候发生了哪些事情：
1：创建一个新的标签页。
2：地址栏中的内容为：http://war.163.com/photoview/4T8E0001/2309697.html#p=FK7LTJCH4T8E0001NOS
3：浏览器会使用 http 协议。向war.163.com 域名的网络中的主机。返送一个请求。request
请求war.163.com 域名的网络中的主机中的一个文件的内容。请求的端口号是默认的：80
文件是：photoview/4T8E0001/2309697.html。
4：war.163.com 通过80端口接收到了浏览器的请求。将请求的文件传输给请求的浏览器。
这是一个服务器响应的过程：response。
5：浏览器接收到了服务器响应的数据。解析渲染返回的页面的数据。
解析的过程是从上到下的。
先解析页面的架构。然后再具体的页面的内容。
如果遇到了网络上的资源文件。最后加载显示。例如图片。

十六、 js的默认的加载顺序

js的默认的加载顺序。
不管是内部的js代码，还是外部的js代码，都是按照script标签的顺序
从上到下，边加载边执行的过程。
问题：如果外部的资源js代码文件比较大，可能会对后续的内容造成加载延迟。

<script>
        console.log ("head中的js代码");
    </script>
    <script src="test1.js"></script>
</head>
<body>

<script>
    console.log ("body中的js代码- 1 ");
</script>
<script src="test2.js"></script>
<script>
    console.log ("body中的js代码- 2 ");
</script>

十七、js的懒加载

通过给script的头标签中添加关键字 defer 来让该标签中引入的内容
延迟加载。
语法：

<script>
        console.log ("head中的js代码");
    </script>
    <script src="test1.js" defer></script>
</head>
<body>

<script>
    console.log ("body中的js代码- 1 ");
</script>
<script src="test2.js" defer></script>
<script>
    console.log ("body中的js代码- 2 ");
    window.onload = function () {
        console.log ("文档加载完毕");
    }
</script>

十八、js的异步加载

script代码的异步加载：
通过给script头标签添加关键字 async 来让script中的内容，实现异步加载。

<script src="test1.js" async></script>
<script src="test2.js" async></script>

十九、页面性能优化

页面性能优化：
1：回流：当整个页面中的DOM渲染树的结构发生了变化。DOM渲染树真个页面重新的布局，这个过程称为回流。也称为【重排】。一个页面从加载到最终的显式到关闭至少要发生一次回流。第一次页面加载的时候要发生一次重排。
2：重绘：当页面中的元素的外观样式发生了改变，需要对页面进行重新的渲染render。这个过程称为重绘。发生重排一定会发生重绘，发生重绘不一定会发生重排。
3：如果回流或者是重绘发生的次数过多，会影响页面的渲染的效率。尽量避免重排和重绘的发生。
4：发生重排和重绘的情形：
第一次加载页面、改变字体大小、改变元素的外观样式、改变元素的尺寸、改变内容、更改浏览器窗口的大小、添加元素、删除元素、移动元素。
5：如何避免重排和重绘的发生：
1：对于样式的修改，如果是多个样式需要修改，建议不要一个一个的修改，而是多个样式同修改。
cssText 可以考虑使用。一次修改字符串中的所有的样式。
2：对多个元素进行操作，对多个元素一起同时操作。不要一个个的进行操作。
可以使用文档片段完成。documentFragment。
3：尽量使用fixed定位。absolute定位。可以减少重排和重绘的发生。

二十、文档片段DocumentFragment

在页面中添加一个5个li的ul。
DocumentFragment：文档片段、文档碎片。轻量级的节点类型。
nodeType：11
nodeName：#document-fragment
作用：在内存的一个对象，可以作为其他的元素节点的容器使用。
可以将多个元素节点添加到该对象中。然后在一次性的将文档片段添加到body上。渲染显式。
可以提高页面的渲染的效率。

<script>
    //效率最低的写法
   /* var ul = document.createElement("ul");
    document.body.appendChild(ul);//重排
    for (let i = 0; i < 5; i++) {
        var li = document.createElement("li");
        ul.appendChild(li);//重排
        li.innerHTML = `第${i+1}个li`;重排
    }*/
   //效率较高的写法。
    var ul1 = document.createElement("ul");
    for (let i = 0; i <5 ; i++) {
        var li = document.createElement("li");
        li.innerHTML = `第${i+1}个li`;
        ul1.appendChild(li);
    }

    var ul2 = document.createElement("ul");
    for (let i = 0; i <5 ; i++) {
        var li = document.createElement("li");
        li.innerHTML = `第${i+1}个li`;
        ul2.appendChild(li);
    }
    //文档碎片对象
    var fragment = document.createDocumentFragment();
    console.log (fragment.nodeType);//11
    console.log (fragment.nodeName);//#document-fragment
    console.log (fragment.nodeValue);//null

    //作为容器使用。
    fragment.appendChild(ul1);
    fragment.appendChild(ul2);
    document.body.appendChild(fragment);//重排。

</script>