上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Micro Renderer</title>
</head>
<body>
<span id="tips"></span>
<hr>
<button Render</button>
<script>
function startRender(renderer) {
const layer = renderer.layer
function render(time) {
layer.render(time)
requestAnimationFrame(render)
}
requestAnimationFrame(render)
}
class Layer {
constructor(dom) {
this.dom = dom
}
render(time) {
this.dom.innerHTML = `Time cost: ${time}`
}
}
class Renderer {
constructor(layer) {
this.layer = layer
}
beginRender() {
startRender(this)
}
}
function init() {
const layer = new Layer(document.getElementById('tips'))
const renderer = new Renderer(layer)
renderer.beginRender()
}
</script>
</body>
</html>
不需要HTTP环境，双击用浏览器打开，点击按钮即可看到不停跳动的数字
结构
各部分含义
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/69999013/viewspace-2770654/ ，如需转载，请注明出处，否则将追究法律责任。
