文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗？
是的
没有找到

浏览器渲染原理解析建议收藏

Web页面运行在各种各样的浏览器当中，浏览器载入、渲染页面的速度直接影响着用户体验简单地说，页面渲染就是浏览器将html代码根据CSS定义的规则显示在浏览器窗口中的这个过程。先来大致了解一下浏览器都是怎么干活的： 　　1. 用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件； 　　2. 浏览器开始载入html代码，发现<head>标签内有一个<link>标签引用外部CSS文件； 　　3. 浏览器又发出CSS文件的请求，服务器返回这个CSS文件； 　　4. 浏览器继续载入html中<body>部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了； 　　5. 浏览器在代码中发现一个标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码； 　　6. 服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码； 　　7. 浏览器发现了一个包含一行Javascript代码的<script>标签，赶快运行它； 　　8. Javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个

随机笔记

​ 表格 ​ 加粗 ​ ​ 倾斜 ​ ​ 删除线 ​ ​ 下划线 ​ ​ 盒子 ​

​ 图像 ​ ​ 超链接 ​ targrt="_blank""_self" ​ <href=""> ​ 属性介绍 ​ 标签属性 ​ <id ="two"> 属性介绍 ​ 注释标签 ​ ​ 字符 ​ 空格符 ​   ​ < ​ < ​ > ​ > ​ & ​ & ​ ￥ ​ ¥ ​ © ​ © ​ ® ​ ® ​ ° ​ ° ​ -+ ​ ± ​ * ​ × ​ ​ 表格标签 ​ ​ ​ 展示/显示 数据 ​ 定义表格的标签 ​ ​ 定义表格行 ​ html表头部分 ​ ​ ​ ​ 定义表格行 ​ 定义单元格/内容 加粗 ​ 定义单元格/内容 ​ ​ </tobdy> ​
……
…………
​ ​ ​ left ​ center ​ right ​ border 边框 ​ 1 ​ "" 默认没有边框 ​ 像素值 ​ cellpadding 默认1像素 <-> ​ cellspacing 默认2像素 >-< ​ width 宽度 ​ height 高度 ​ 合并单元格 ​ rowspan 跨行合并 数量 最上侧 ​ colspan 跨列合并 数量 最左侧 列表标签《布局》 ​ 有序 ​ ​
    ​
  1. ​
    2. ​
  2. ​
    3. ​
​ ​ 无序 ​ ​
    ​
  • ​
    • ​
  • ​

    ​

    ​
    • ​
​

03

Virtual DOM

DOM操作太消耗浏览器计算资源，diff算法才有其存在的意义。 DOM操作为什么慢？ 1.直观感受：在浏览器控制台，用for循环遍历div属性，会看到有很多属性输出。对于浏览器渲染引擎而言，一个HTML元素就是一个占用内存的数据结构，因此元素的属性越多理论上占用的内存越多，就越消耗性能。再从另外一个角度分析，页面渲染也是图形化的过程，玩游戏的朋友应该知道网络稍微不好，游戏页面就很卡，也就是说图形化是很消耗硬件资源的。 浏览器渲染：DOM操作会引起浏览器repaint和reflow。 如何减少DOM操作？ 先隐藏需要操作的DOM：display:none，再显示：display:block。 离线操作DOM：我们先将元素脱离文档流，然后对元素进行操作，最后再把操作后的元素放回文档流。 可以cloneNode，将DOM操作变成纯粹的内存操作 createDocumentFragment 操作完成之后替换原来的DOM元素。如果是添加多个节点，将所有DOM节点都在内存中拼装完成之后再append到DOM中。 replaceChild appendChild 2.为什么用JavaScript模拟DOM结构？

03

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券