码迷,mamicode.com
首页 > Web开发 > 详细

浏览器的渲染机制— (js基础复习第3期)

时间:2019-11-07 14:53:55      阅读:115      评论:0      收藏:0      [点我收藏+]

标签:size   判断   art   字体   特性   解析   layout   doc   位置   

一:几个问题

  1. 什么是DOCTYPE 及作用
  2. 浏览器渲染过程
  3. 重排refolw、重绘repaint、布局Layout
  4. 输入url经历了什么?

二:整理

1. 什么是DOCTYPE 及作用

浏览器使用DTD(文档类型定义)来判断文档类型,决定使用何种协议来解析,
以及切换浏览器模式

DOCTYPE是用来声明文档类型和DTD规范的,一个主要用途是文件的合法性验证。如果文件代码不合法,那么浏览器解析时便会出一些差错。

html5 
<!DOCTYPE html>

2.浏览器渲染过程

html-> DOM tree  
css -> CSSOM 
render tree
Layout 
painting
display

         

3. 重排reflow,repainting?

reflow:
浏览器根据各种样式来计算,并根据计算结果,将元素放到它应该出现的的位置,这个过程为

哪些操作引起reflow:
    1. 增加、删除、修改DOM 结点时候
    2. 移动DOM的位置(可能会修改其他DOM位置)
    3. 修改网页的默认字体时 (重新排)
    4. 修改CSS样式的时候
    5. resize 窗口的时候,或者滚动的时候

repaint:
    当盒子的位置、大小、以及其他属性,例如颜色、字体大小都确定下来后,浏览器于是便吧这些元素都按照各自的特性绘制了一遍,于是页面的内容出现了,这个过程称之为repaint
哪些操作引起repaint?
    1.DOM 改动
    2.css改动

4. url过程

。。。(待整理)

浏览器的渲染机制— (js基础复习第3期)

标签:size   判断   art   字体   特性   解析   layout   doc   位置   

原文地址:https://www.cnblogs.com/qianduanwriter/p/11811954.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!