https://github.com/woai3c/tiny-rendering-engine

从零开始实现一个玩具版浏览器渲染引擎
https://github.com/woai3c/tiny-rendering-engine

Last synced: 7 days ago
JSON representation

从零开始实现一个玩具版浏览器渲染引擎

• Host: GitHub
• URL: https://github.com/woai3c/tiny-rendering-engine
• Owner: woai3c
• Created: 2022-12-11T14:47:05.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-08-03T08:18:03.000Z (3 months ago)
• Last Synced: 2024-08-04T08:54:55.442Z (3 months ago)
• Language: TypeScript
• Size: 368 KB
• Stars: 60
• Watchers: 4
• Forks: 7
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# tiny-rendering-engine

从零开始实现一个玩具版浏览器渲染引擎

![](examples/example.png)

## 功能

* [x] HTML 解析器 - v1 分支

* [x] CSS 解析器 - v2 分支

* [x] 构建样式树 - v3 分支

* [x] 布局树 - v4 分支

* [x] 绘制 - v5 分支

## 文档

* [从零开始实现一个玩具版浏览器渲染引擎](https://github.com/woai3c/Front-end-articles/issues/44)

## 疑难问题

### 安装 canvas 报错

请参考 canvas 安装指引文档：

## 开发

安装依赖

```sh

pnpm i

```

开发

```

pnpm dev

```

构建

```

pnpm build

```

测试

```

pnpm test

```

## 示例

所有示例均在 examples 目录下，查看示例前需要先执行构建命令 `pnpm build`。

## 参考资料

* [Let's build a browser engine!](https://limpet.net/mbrubeck/2014/08/08/toy-layout-engine-1.html)

* [robinson](https://github.com/mbrubeck/robinson)

* [渲染页面：浏览器的工作原理](https://developer.mozilla.org/zh-CN/docs/Web/Performance/How_browsers_work)

* [关键渲染路径](https://developer.mozilla.org/zh-CN/docs/Web/Performance/Critical_rendering_path)

* [计算机系统要素](https://book.douban.com/subject/1998341/)