浏览器渲染流程：
浏览器开始解析目标HTML文件,执行流的顺序为自上而下。
HTML解析器将HTML结构转换为基础的DOM(文档对象模型),构建DOM树完成后,触发DomContendLoaded事件。
CSS解析器将CSS解析为CSSOM(层叠样式表对象模型),一棵仅含有样式信息的树。
CSSOM和DOM开始合并构成渲染树,每个节点开始包含具体的样式信息。
计算渲染树中个各个节点的位置信息,即布局阶段。
将布局后的渲染树显示到界面上。
根据以上的流程，可以知道，当cssdom还没构建完成时，页面是不会渲染到浏览器界面的，这也是为什么当css下载过慢时，会出现白屏的现象，以下是模拟白屏的例子：
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>this is a test</h1>
<link rel="stylesheet" type="text/css" href="test.css">
<img src="1.jpg">
<hr>
<span>this is a test</span>
</body>
</html>test.css:
img{
width: 50%;
}使用fidder延迟css的响应：
if(oSession.uriContains('test.css')){
oSession["response-trickle-delay"] = "3000";
}可以看到，在1.4s的时候，html文档和img已经下载完成，但是页面并没有渲染，而是等到css加载完成后再渲染出来，这也证实了css加载过程中会阻塞页面的渲染。所以在我们的前端日常开发中，应尽量减少css的响应时间。
小程序Canvas性能优化实战
在小程序中使用canvas组件绘制地铁图，地铁图包括地铁线路、站点图标、线及站点名称文字，绘制元素为线、圆、图片、文字。 支持拖动平移和双指缩放。
让你的 React 组件跑得再快一点
React 基于虚拟 DOM 和高效 Diff 算法的完美配合，实现了对 DOM 最小粒度的更新。大多数情况下，React 对 DOM 的渲染效率足以我们的业务日常。但在个别复杂业务场景下，性能问题依然会困扰我们。此时需要采取一些措施来提升运行性能
Java与Node.js性能PK
如果你打开浏览器，搜索“Java与Node.js哪个更快”，你会发现大部分答案声称Node.js更快，也有一些人持相反意见。Java使用JIT编译器，其性能甚至可以超过C++。在这种情况下，为什么这么多人还是声称Node.js要比Java快呢？
React性能优化整理
通过判断减少数据变化触发的重新渲染, 以及之后的 DOM diff；函数式语言当中, 语言设计允许两个对象一样, 举例 Clojure:；每个函数体当中生成的对象都会有新的引用, useMemo 可以保留一致的引用.
大型php网站性能和并发访问优化方案
网站性能优化对于大型网站来说非常重要，一个网站的访问打开速度影响着用户体验度，网站访问速度慢会造成高跳出率，小网站很好解决，那对于大型网站由于栏目多，图片和图像都比较庞大，那该怎么进行整体性能优化呢
优化 web 应用程序性能方案总结
在开发 web 应用程序时候，性能都是必不可少的话题。而大部分的前端优化机制都已经被集成到前端打包工具 webpack 中去了，当然，事实上仍旧会有一些有趣的机制可以帮助 web 应用进行性能提升
web前端性能优化指南
性能优化一直以来都是前端工程领域中的一个重要部分。很多资料表明，网站应用的性能优化对于提高用户留存、转化率等都有积极影响。可以理解为，提升你的网站性能，就是提升你的业务数据（甚至是业务收入）
JS如何提高扩展运算符的性能？
当被扩展的数组位于数组的开头时，由于快速路径优化，您可以获得性能提升。它适用于V8引擎7.2版本（Chrome v72和NodeJS v12附带的特性）。通过此优化，性能测试显示[... array, item]的执行速度至少比[item, ...array]快两倍
如何从请求、传输、渲染3个方面提升Web前端性能?
什么是WEB前端呢？就是用户电脑的浏览器所做的一切事情。我们来看看用户访问网站，浏览器都做了哪些事情：输入网址 –> 解析域名 -> 请求页面 -> 解析页面并发送页面中的资源请求 -> 渲染资源 -> 输出页面 -> 监听用户操作 -> 重新渲染。
PHP性能优化
性能是网站运行是否良好的关键因素， 网站的性能与效率影响着公司的运营成本及长远发展，编写出高质高效的代码是我们每个开发人员必备的素质,也是我们良好的职业素养。