课程思维导图

Q：DTD是什么？

文档类型定义，浏览器会使用它来判断文档类型，从而决定使用何种协议来解析

Q：DOCTYPE是什么？

文档类型声明，通知浏览器当前文档用的是哪个DTD

Q：常用的DOCTYPE的类型有哪些？

  1. HTML5：
  2. HTML4.01 Strict ：严格模式，包括所有的HTML元素和属性，但不包括展示性和弃用的元素，如font
  3. HTML4.01 Transitional：传统模式，包含所有HTML元素和属性，包括展示性的和已弃用的

Q：浏览器渲染过程是怎样的？

  1. HTML被解析成DOM Tree，CSS被解析成CSS Rule Tree
  2. 在布局阶段，把DOM Tree和CSS Rule Tree经过整合生成Render Tree
  3. 元素按照算出来的规则，把元素放到它该出现的位置，通过显卡画到屏幕上

Q：重排（Reflow）是什么？

  1. 定义：DOM中各个元素都有自己的盒子模型，需要浏览器根据样式进行计算，并根据计算结果将元素放到特定位置，这就是Reflow
  2. 触发Reflow的条件
    • 增、删、改、移DOM
    • 修改CSS样式
    • Resize窗口
    • 页面滚动
    • 修改网页的默认字体

Q：重绘（Repaint）是什么？

  1. 定义：当各种盒子的位置、大小以及其他属性改变时，浏览器需要把这些元素都按照各自的特性绘制一遍，这个过程称为Repaint。
  2. 触发Repaint的条件：
    • DOM改动
    • CSS改动

Q：如何减少重绘、避免重排？

本质上，就是合并修改。具体的措施有：

  1. DOM层面：DocumentFragment本质上是一个占位符，真正插入页面的是它的所有子孙节点，所以，将需要变动的DOM节点先汇总到DocumentFragment，然后一次性插入，可以减少DOM操作的次数。
  2. CSS层面：操作多个样式时，可以先汇总到一个类中，然后一次性修改

前端面试8：渲染机制相关推荐

  1. 浏览器渲染机制面试_【前端面试必考题】页面渲染机制（一）

    页面渲染机制这部分内容会分成两篇来进行讲解,这两篇里我们准备聊一下页面的渲染的过程,包括页面的加载.DOM 树的构建.CSSOM 树的构建.渲染树的构建和最后的渲染过程等.浏览器的渲染机制和网页的优化 ...

  2. 前端面试系列-输入url后全过程页面渲染机制DOM生成过程

    文章目录 一.当输入url后,全过程 二.页面渲染机制 三.DOM 1.什么是 DOM 2.DOM 树如何生成 HTML 解析器 3.JavaScript 是如何影响 DOM 生成的 内嵌JavaSc ...

  3. 前端面试查漏补缺--(二) 垃圾回收机制

    前言 本系列最开始是为了自己面试准备的.后来发现整理越来越多,差不多有十二万字符,最后决定还是分享出来给大家. 为了分享整理出来,花费了自己大量的时间,起码是只自己用的三倍时间.如果喜欢的话,欢迎收藏 ...

  4. 前端开发这么多年，你真的了解浏览器页面渲染机制吗？

    作者 | 浪里行舟 前言 浏览器的内核是指支持浏览器运行的最核心的程序,分为两个部分的,一是渲染引擎,另一个是JS引擎.渲染引擎在不同的浏览器中也不是都相同的.目前市面上常见的浏览器内核可以分为这四种 ...

  5. 浏览器渲染机制面试_面试官不讲码德，问我Chrome浏览器的渲染原理（6000字长文）...

    前言 对于HTML,css和JavaScript是如何变成页面的,这个问题你了解过吗?浏览器究竟在背后都做了些什么事情呢?让我们去了解浏览器的渲染原理,是通往更深层次的开发必不可少的事情,能让我们更深 ...

  6. 前端开发这么多年，你真的了解浏览器页面渲染机制吗？ | 技术头条

    作者 | 浪里行舟 前言 浏览器的内核是指支持浏览器运行的最核心的程序,分为两个部分的,一是渲染引擎,另一个是JS引擎.渲染引擎在不同的浏览器中也不是都相同的.目前市面上常见的浏览器内核可以分为这四种 ...

  7. 浏览器页面渲染机制-前端原理剖析

    浏览器页面渲染机制 前言 浏览器的内核是指支持浏览器运行的最核心的程序,分为两个部分,一是渲染引擎,另一个是JS引擎.渲染引擎在不同的浏览器中也不是都相同的.目前市面上常见的浏览器内核可以分为这四种: ...

  8. 前端面试查漏补缺--(一) 防抖和节流

    前言 本系列最开始是为了自己面试准备的.后来发现整理越来越多,差不多有十二万字符,最后决定还是分享出来给大家. 为了分享整理出来,花费了自己大量的时间,起码是只自己用的三倍时间.如果喜欢的话,欢迎收藏 ...

  9. 校招社招必备核心前端面试问题与详细解答

    本文总结了前端老司机经常问题的一些问题并结合个人总结给出了比较详尽的答案.网易阿里腾讯校招社招必备知识点. 原理讲解参考:前端增长-重新定义大前端 在线课程:网易云课堂课程      思否课堂 官方博 ...

  10. 前端面试-综合问题版

    一.基础 #1.1 HTML html5新标签有哪些 canvas.svg.webGL 你是如何理解 HTML语义化的,有什么好处 前端需要注意哪些SEO? manifest.worker.socke ...

最新文章

  1. HDD工作原理 导图
  2. 史上最详细的RocketMq 下单支付案例 分享
  3. mac搭建ios自动化环境之WebDriverAgent配置
  4. 需求文档可以不签字吗之二-理论推导
  5. 关于epoll中的read函数说明
  6. 【⛔拒绝内卷，学会shell，走遍天下都不怕⛔】shell编程基础
  7. 【Linux】一步一步学Linux——ethtool命令(155)
  8. qtabwidget设置tab高度_VC｜富文本编辑框CRichEditCtrl的字体与段落设置
  9. checkbox 最多选两项
  10. 给刚博士毕业的年轻学者9点建议，最后一条：抓紧结婚，生娃！
  11. 【英语学习】【Level 07】U02 Live Work L5 This is where we work
  12. Android --自定义简单Toast
  13. MySQL 创建主外键
  14. 第二届广东省大学生网络攻防大赛 pyre
  15. 《雍正皇帝·九王夺嫡》生态文化专有词泰译研究（第一章）
  16. MSI (Message Signaled Interrupts)
  17. idea选中多行的一列、一竖（不是多行的全部内容）
  18. 计算机毕业设计论文该怎么写？软件工程毕设选题推荐有哪些；计算机毕业设计不会做怎么办；怎么做什么简单；电子信息工程毕业设计要做到什么程度
  19. 恒流LED驱动芯片 SM15133EK SM15133EH 明微电子
  20. 浅析疯狂动物城的制作流程

热门文章

  1. z = x++ - --y * b/a;
  2. Java-CAS初探
  3. 设计模式:访问者模式(Visitor Pattern)
  4. spring12:注解的方式实现di(依赖注入)
  5. ReactOS 0.0.21从开机启动，到加载驱动的过程
  6. vxworks中断的使用
  7. OWASP TOP 10
  8. SpringMvc入门教程
  9. mongodb全套配置
  10. 使用JFreeChart绘制散点图