html dom渲染及基础知识

最新推荐文章于 2023-07-31 16:48:50 发布

stone_ui

最新推荐文章于 2023-07-31 16:48:50 发布

阅读量514

点赞数

分类专栏：渲染文章标签： html

本文链接：https://blog.csdn.net/stone_ui/article/details/105675431

版权

渲染专栏收录该内容

1 篇文章 0 订阅

订阅专栏

css的两种盒模型
而引起上面效果的原因来自于 css 的两种盒模型的不同，这里我先对两种盒模型做个介绍。

W3C的标准盒模型

è¿éåå¾çæè¿°
在标准的盒子模型中，width指content部分的宽度

IE的盒模型
在IE盒子模型中，width表示content+padding+border这三个部分的宽度

è¿éåå¾çæè¿°

我们可以看出我们上面的使用的默认正是W3C标准盒模型
而这里盒模型的选取更倾向于项目和开发者的习惯，并没有绝对的好坏之分。

box-sizing的使用
如果想要切换盒模型也很简单，这里需要借助css3的box-sizing属性

box-sizing: content-box 是W3C盒子模型
box-sizing: border-box 是IE盒子模型

塌陷

<style>
*{
    margin:0;
    padding:0;
}
.box1{
    width:200px;
    height:200px;
    background: yellowgreen;
    margin-bottom: 50px;
}
.box2{
    width:200px;
    height:200px;
    background: gray;
    margin-top: 40px;
}
</style>

两盒子之间的距离仅是50px，也就是说两盒子之间的margin出现了重叠部分，故而我们可以得出：垂直之间塌陷的原则是以两盒子最大的外边距为准。

/*CSS部分*/
<style>
.box1{
    width:400px;
    height:400px;
    background: pink;
}
.box2{
    width:200px;
    height:200px;
    background: lightblue;
}
</style>
/*HTML部分*/
<body>
    <divclass="box1">
    <divclass="box2"></div>
</div>
</body>

子盒子和父盒子之间并没出现期望的10px间隙而是父盒子与子盒子一起与页面顶端产生了10px间隙（即父级盒子往下塌陷了10px）。

生成的BFC的元素

1.根元素

2.float属性部位none

3.position为absolute或fixed

4.display为table-cell，table-caption，flex，inline-flex

5.overflow不为visible

防止内容塌陷

2.清除浮动

示例代码：

.par {
        border: 5px solid #fcc;
        width: 300px;
    }
 
    .child {
        border: 5px solid #f66;
        width:100px;
        height: 100px;
        float: left;
    }

    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>

效果图：

BFC计算高度时，浮动元素也会参与计算，触发par生成BFC

.par {
        border: 5px solid #fcc;
        width: 300px;
       overflow: hidden;
    }

3.防止垂直margin重叠

示例代码：

p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }

    <p>Haha</p>
    <p>Hehe</p>

两个p标签是同一个BFC的内部box，内部相邻的box的margin发生重叠，效果：

将p包裹一个容器，生成一个BFC，两个p就不在同一个BFC中，就不会发生折叠

.wrap{
        overflow: hidden;
    }
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }

    <div class='wrap'>
        <p>Haha</p>
    </div>
    <p>Hehe</p>

url 到浏览器过程

1. 查询该URL是否有缓存

如果有，则直接返回，没有的话，下一步

2. 查询URL对应的IP

　　首先，到 host 文件查找，如果找到则返回。

　　如果没有找到，去访问 DNS 服务器（一般先访问本地路由器，没有再访问更高级的 DNS 服务器），最终得到对应的 IP

3. 建立 TCP 连接

　　首先，通过 IP 协议，指定出发地和目的地

　　然后，通过 OSPF 协议，计算路由的最佳路径，得到路过的每个路由器的 IP地址

　　然后，再利用 ARP 计算出路径经过每个路由器的 MAC地址

　　最后再利用我们熟悉的3次握手，建立连接

4. 如果对方是Nginx服务器

　　一般会做负载均衡，根据 url 重写转发到真实处理请求的服务器

5. 根据HTTP状态码来执行对应行为

　　如果 200 那就继续解析

　　如果 300 的话会进行重定向

　　如果 400 或 500 的话就会报错

6. 如果返回来的是gzip格式(content-encoding: gzip content-type:text/html; charset=utf-8)

　　浏览器会先解压。

7. 接收 html 字节流

　　首先，浏览器把接收到的一个个字节拼接成字符串

　　然后，通过词法分析，把字符串转换为一个个 Token

　　最后，根据 Token，通过语法分析，构建成 DOM 树

8. 接收 css 字节流

　　首先，浏览器把接收到的一个个字节拼接成字符串

　　然后，通过词法分析，把字符串转换为一个个 Token

　　最后，根据 Token，通过语法分析，构建成 CSSOM 树

9. 结合 CSSOM树和 DOM树，生成 Render Tree

9. 遇到 script（有3种可能），如果有相关 DOM 操作，可以修改已构建部分的 DOM 树，从而改变 Render Tree

11. 调用 GPU 绘制，合成图层，将内容显示在屏幕上

　来看看webkit的主要流程：

　　再来看看Geoko的主要流程：

渲染解释参考文章

https://www.cnblogs.com/lujunan/p/11790641.html

https://blog.csdn.net/zemprogram/article/details/103571616?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522158566323219195162530011%2522%252C%2522scm%2522%253A%252220140713.130056874..%2522%257D&request_id=158566323219195162530011&biz_id=0&utm_source=distribute.pc_search_result.none-task

https://blog.csdn.net/zemprogram/article/details/102760154?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-15&utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-15

stone_ui

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html dom渲染及基础知识

css的两种盒模型而引起上面效果的原因来自于 css 的两种盒模型的不同，这里我先对两种盒模型做个介绍。W3C的标准盒模型在标准的盒子模型中，width指content部分的宽度IE的盒模型在IE盒子模型中，width表示content+padding+border这三个部分的宽度我们可以看出我们上面的使用的默认正是W3C标准盒模型而这里盒模型的选取更倾向于项目和开发者...
复制链接

扫一扫