例题—html（4）

十六、页面渲染过程

渲染时，大致的流程如下：
（解析html以构建dom树->构建render树->布局render树->绘制render树）
具体的流程如下：

1. 浏览器会将HTML解析成一个DOM树，DOM树的构建过程是一个深度遍历过程，当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点，
2. 将CSS解析成CSS规则树；
3. 根据DOM树和CSS来构造render树，渲染树不等于DOM树，像header和display：none；这种没有具体内容的东西就不在渲染树中；
4. 根据render树，浏览器可以计算出网页中有哪些节点，各节点的CSS以及从属关系，然后可以计算出每个节点在屏幕中的位置；
5. 遍历render树进行绘制页面中的各元素。

P.S页面发生重拍（回流）的话，会重新加载DOM树，影响页面加载速度。会导致页面重拍的原因如下：

1. 页面初始化；
2. 操作DOM时；
3. 某些元素的尺寸变了；
4. CSS的属性发生改变。

浏览器加载页面资源的步骤如下（部分参考网络资料）：

1. 用户输入网址（假设是第一次访问），浏览器向服务器发出请求，服务器返回html文件；
2. 浏览器开始载入html代码，发现＜head＞标签内有一个＜link＞标签引用外部CSS文件；
3. 浏览器又发出CSS文件的请求，服务器返回这个CSS文件；
4. 浏览器继续载入html中＜body＞部分的代码，并且CSS文件已经拿到手了；
5. 浏览器在代码中发现一个＜img＞标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续加载后面的代码；
6. 服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码；
7. 浏览器发现了一个包含一行Javascript代码的＜script＞标签，直接运行该脚本；
8. Javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个＜div＞
   （style.display=”none”）。少了一个元素，浏览器不得不重新渲染这部分代码；
9. ＜/html＞表示暂时加载完成；
10. 此时用户点了一下界面中的“换肤”按钮，Javascript让浏览器换了一下＜link＞标签的CSS路径；
11. 浏览器向服务器请求了新的CSS文件，重新加载页面。然后执行渲染过程。

---

十七、二级下拉菜单

css部分：

        <style type="text/css">
            *{
   
                padding: 0;
                margin: 0;
            }
            body{
   
                font-size: 12px;
            }
            #nav{
   
               height: 40px;
               min-width:1300px ;
               background-color: #2DBC55;
            }
            #nav ul{
   
                width: 1300px;
                margin: 0 auto;
                list-style: none;
            }
            #nav ul li{
   
                float: left;
                position: relative;
            }
            #nav ul li.active{
   
                background-color: rgb(14,159,57);
            }
            #nav ul li h3{
   
                height: 40px;
                line-height: 40px;
                color: white;
                font-size: 16px;
                padding: 0 13px;
                cursor: pointer;
            }
            h3.arrow{
   
                background: url(04-arrow.png) no-repeat;
                background-position: right center;
                margin-right: 5px;
            }
            #nav ol{
   
                width: 60px;
                background-color:rgb(14,159,57)