浏览器渲染流程：
浏览器开始解析目标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的响应时间。
JavaScript最佳实践：性能
该函数可能看上去完全正常，但是它包含了三个对于全局document对象的引用。如果在页面上有多个图片，那么for循环中的document引用就会被执行多次甚至上百次，每次都会要进行作用域链查找
window.performance_前端性能监控
HTML5提供的performance接口精确的告诉我们当访问一个网站页面时当前网页每个处理阶段的精确时间(timestamp)，以方便我们进行前端分析
测量JavaScript函数的性能的简单方法及与其他方式对比
测量执行一个函数所需的时间总是一个很好的办法，证明某些实现比另一个实现的性能更好。这也是一个很好的方法，可以确保性能没有在某些改变后受到影响，也可以追踪瓶颈。良好的性能有助于获得良好的用户体验
React性能优化整理
通过判断减少数据变化触发的重新渲染, 以及之后的 DOM diff；函数式语言当中, 语言设计允许两个对象一样, 举例 Clojure:；每个函数体当中生成的对象都会有新的引用, useMemo 可以保留一致的引用.
10个快速优化Web性能的手段
优化网站的性能需要花费大量的时间，并且如果要根据自己的需求进行优化则花费的时间可能更多。在本文中，我将向你展示 10 个快速优化 Web 性能的手段，能在 5 分钟内用于你自己的网站
如何从请求、传输、渲染3个方面提升Web前端性能?
什么是WEB前端呢？就是用户电脑的浏览器所做的一切事情。我们来看看用户访问网站，浏览器都做了哪些事情：输入网址 –> 解析域名 -> 请求页面 -> 解析页面并发送页面中的资源请求 -> 渲染资源 -> 输出页面 -> 监听用户操作 -> 重新渲染。
小程序Canvas性能优化实战
在小程序中使用canvas组件绘制地铁图，地铁图包括地铁线路、站点图标、线及站点名称文字，绘制元素为线、圆、图片、文字。 支持拖动平移和双指缩放。
用CSS开启硬件加速来提高网站性能
你知道我们可以在浏览器中用css开启硬件加速，使GPU (Graphics Processing Unit) 发挥功能，从而提升性能吗？现在大多数电脑的显卡都支持硬件加速。鉴于此，我们可以发挥GPU的力量，从而使我们的网站或应用表现的更为流畅。
Java与Node.js性能PK
如果你打开浏览器，搜索“Java与Node.js哪个更快”，你会发现大部分答案声称Node.js更快，也有一些人持相反意见。Java使用JIT编译器，其性能甚至可以超过C++。在这种情况下，为什么这么多人还是声称Node.js要比Java快呢？
10种快速提高网站性能的方法
在这篇文章中，主要介绍10种快速提高网站性能的方法，你只需5分钟内就可以将它应用到你的网站上，废话不多说，让我们进入正题吧 。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!