ibclee / blog Goto Github PK

官方文档

https://www.tslang.cn/docs/home.html

react迁移教程

react迁移demo

blog

蚂蚁数据体验团队博客，typescript相关

TypeScript在react项目中的实践

TypeScript在node项目中的实践

TypeScript 的声明文件的使用与编写

Lyft的TypeScript实践

常见问题

How to use refs in React with Typescript

第三方库

antd1.x版本的声明文件

DefinitelyTyped

像素渲染流水线

1. 下载HTML文档
2. 解析HTML文档，生成DOM树
3. 下载文档中引用的css和js资源
4. 解析CSS样式表，生成CSSOM
5. 将js代码交给js引擎执行
6. 合并DOM和CSSOM，生成Render Tree
7. 根据Render Tree进行布局layout（为每个元素计算尺寸和位置信息）
8. 绘制paint每个层中的元素
9. 执行图层合并

• CSS （外链或內联）会阻塞整个DOM的渲染（Rendering），然后DOM解析（Parsing）会正常进行。
• JS（外链或內联）会阻塞后续DOM的解析（Parsing），后续DOM的渲染（Rendering）也将被阻塞。
• 动态插入的外部样式表或脚本不阻塞DOM解析或渲染。
• 动态插入的内联样式表或脚本会阻塞DOM解析和渲染。
• 未连接到DOM树的样式表或脚本（外链或內联）不会被下载、解析或执行。
• 可以通过onload和onerror监听HTML资源标签载入结果，兼容IE需要onreadystatechange

渲染流程单线程，网络部分是多线程
回流（reflow）：当render tree中的一部分（�或全部）因为元素的规模尺寸、隐藏、布局等改变需要重新构建，就成为回流。
当完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程称为重绘。

css加载不会阻塞DOM树的解析
css加载会阻塞DOM树的渲染
css加载会阻塞后面js语句的执行

优化策略

1. 分割css
2. 高效的css规则
3. GPU加速
4. 异步js，js的执行会阻塞DOM的构建过程，DOM树解析到非异步的外链js时会阻塞住，在它加载并且执行完之前不会往下解析DOM树