浏览器渲染流程：
浏览器开始解析目标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组件绘制地铁图，地铁图包括地铁线路、站点图标、线及站点名称文字，绘制元素为线、圆、图片、文字。 支持拖动平移和双指缩放。
PHP性能优化总结
在循环中判断时,数值判断使用恒等要比等于高效。在数组中，数组下标是字母时一定要加上单引号或双引号。因为$row[‘id‘]的效率是$row[id]的7倍。尽量不要在for循环中使用函数
编写高性能的JavaScript
随着计算机硬件的不断升级，开发者越发觉得Javascript性能优化的好不好对网页的执行效率影响不明显，所以一些性能方面的知识被很多开发者忽视
2018 前端性能检查表
性能十分重要。然而，我们真的知道性能瓶颈具体在哪儿吗？是执行复杂的 JavaScript，下载缓慢的 Web 字体，巨大的图片，还是卡顿的渲染？研究摇树（Tree Shaking），作用域提升（Scope Hoisting）
前端SPA（单页面应用）性能优化，交互体验加成！
SPA 是一种特殊的 Web 应用，是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的。它将所有的活动局限于一个 Web 页面中，仅在该 Web 页面初始化时加载相应的 HTML 、 JavaScript 、 CSS 。
优化 web 应用程序性能方案总结
在开发 web 应用程序时候，性能都是必不可少的话题。而大部分的前端优化机制都已经被集成到前端打包工具 webpack 中去了，当然，事实上仍旧会有一些有趣的机制可以帮助 web 应用进行性能提升
BigPipe_高性能流水线页面技术
BigPipe是一个重新设计的基础动态网页服务体系。大体思路是，分解网页成叫做Pagelets的小块，然后通过Web服务器和浏览器建立管道并管理他们在不同阶段的运行。这是类似于大多数现代微处理器的流水线执行过程：多重指令管线通过不同的处理器执行单元，以达到性能的最佳。
如何优化css expression性能？
IE 浏览器中 CSS Expression 特性的最大的问题：会反复执行，每秒钟可能执行了成百上千次，有严重的性能问题。何对 CSS Expression 进行优化呢？至少：如果我们将 CSS Expression 在匹配的元素中仅执行一次，性能将会提升很大。
用CSS开启硬件加速来提高网站性能
你知道我们可以在浏览器中用css开启硬件加速，使GPU (Graphics Processing Unit) 发挥功能，从而提升性能吗？现在大多数电脑的显卡都支持硬件加速。鉴于此，我们可以发挥GPU的力量，从而使我们的网站或应用表现的更为流畅。
10种快速提高网站性能的方法
在这篇文章中，主要介绍10种快速提高网站性能的方法，你只需5分钟内就可以将它应用到你的网站上，废话不多说，让我们进入正题吧 。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!