<commit_before>---
layout: post
title: 浏览器内核及渲染方式
category: HTML-CSS
tags: 浏览器
keywords: 浏览器
description: 浏览器
---

## 浏览器内核

Trident:IE,360,搜狗

Gecko：firefox

webkit:safari,旧版chrome

presto：旧版opera

blink：新版chrome，新版opera

## 浏览器的渲染方式
### 1.构建DOM树

浏览器请求到html代码后，在生成DOM的最开始阶段，并行发起css、图片、js的请求。

### 2.构建CSSOM

css文件加载完成，开始构建CSSOM

### 3.生成渲染树（Render Tree）

CSSOM构建结束后，和DOM一起生成Render Tree

###　4.布局（Layout）
有了Render Tree，浏览器已经能知道网页中有哪些节点，各个节点的CSS定义以及他们的从属关系。开始布局，计算出各个节点在屏幕中的位置。

### 5.Paint
布局之后，浏览器知道哪些节点要显示，每个节点的CSS属性是什么，每个节点在屏幕中的位置。所以接下来按照算出来的规则，通过显卡，把内容画在屏
幕上。<commit_msg>Update 2018-05-25-浏览器内核及渲染方式.md<commit_after>---
layout: post
title: 浏览器内核及渲染方式
category: HTML-CSS
tags: 浏览器
keywords: 浏览器
description: 浏览器
---

## 浏览器内核

Trident:IE,360,搜狗

Gecko：firefox

webkit:safari,旧版chrome

presto：旧版opera

blink：新版chrome，新版opera

## 浏览器的渲染方式
### 1.构建DOM树

浏览器请求到html代码后，在生成DOM的最开始阶段，并行发起css、图片、js的请求。

### 2.构建CSSOM

css文件加载完成，开始构建CSSOM

### 3.生成渲染树（Render Tree）

CSSOM构建结束后，和DOM一起生成Render Tree

### 4.布局（Layout）
有了Render Tree，浏览器已经能知道网页中有哪些节点，各个节点的CSS定义以及他们的从属关系。开始布局，计算出各个节点在屏幕中的位置。

### 5.Paint
布局之后，浏览器知道哪些节点要显示，每个节点的CSS属性是什么，每个节点在屏幕中的位置。所以接下来按照算出来的规则，通过显卡，把内容画在屏
幕上。
{'fraction_non_alphanumeric': 0.1264957264957265, 'fraction_numerical': 0.020512820512820513, 'mean_word_length': 7.364285714285714, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4668076', 'n_tokens_mistral': 809, 'n_tokens_neox': 960, 'n_words': 68}