浏览器渲染流程：
html解析器将html结构转换为基础的DOM(文档对象模型),构建DOM树完成后,触发DomContendLoaded事件。
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组件绘制地铁图，地铁图包括地铁线路、站点图标、线及站点名称文字，绘制元素为线、圆、图片、文字。 支持拖动平移和双指缩放。
优化网站性能规则_前端性能优化策略【网络加载、页面渲染】
前端网站性能优化规则：网络加载类、页面渲染类。包括：减少 HTTP 资源请求次数、减小 HTTP 请求大小、避免页面中空的 href 和 src、合理设置 Etag 和 Last-Modified、使用可缓存的 AJAX、减少 DOM 元素数量和深度等
PHP性能优化
性能是网站运行是否良好的关键因素， 网站的性能与效率影响着公司的运营成本及长远发展，编写出高质高效的代码是我们每个开发人员必备的素质,也是我们良好的职业素养。
前端开发工程师必须关注的几个性能指标
对于一个网站如果希望抓住用户，网站的速度以及稳定性是首当其冲的。从各式各样的前端监控平台中，你都可以获得页面很多的性能指标。本文将介绍几个几个比较关键的指标，并给出相应的优化思路。
提高js加载速度，实现js无阻塞加载方式,高性能的加载执行JavaScript
为解决JS加载速度慢，采用js的延时加载，和动态加载。由于js的堵塞特性，当浏览器在加载javascript代码时，不能同时做其他任何事情，如果javascript执行时间越久，浏览器等待响应的时间就越久。
前端SPA（单页面应用）性能优化，交互体验加成！
SPA 是一种特殊的 Web 应用，是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的。它将所有的活动局限于一个 Web 页面中，仅在该 Web 页面初始化时加载相应的 HTML 、 JavaScript 、 CSS 。
Js中的调节器：提高应用程序的性能
调节器是浏览器中通过限制代码要处理的事件数量来提高性能的常用技术。当你想以受控的速率执行回调时，应该使用调节器，它允许你在每个固定的时间间隔内重复处理过渡状态。
如何从请求、传输、渲染3个方面提升Web前端性能
什么是WEB前端呢？就是用户电脑的浏览器所做的一切事情。我们来看看用户访问网站，浏览器都做了哪些事情：输入网址 –> 解析域名 -> 请求页面 -> 解析页面
CSS优化，提高性能的方法有哪些？
首推的是合并css文件，如果页面加载10个css文件，每个文件1k；减少css嵌套，最好不要套三层以上。不要在ID选择器前面进行嵌套；建立公共样式类
2018 前端性能检查表
性能十分重要。然而，我们真的知道性能瓶颈具体在哪儿吗？是执行复杂的 JavaScript，下载缓慢的 Web 字体，巨大的图片，还是卡顿的渲染？研究摇树（Tree Shaking），作用域提升（Scope Hoisting）