浅谈前端性能优化（html+css篇）

问题探究实际用户体验感觉页面加载慢加载css的过程介绍用户输入url向服务器发送请求后，服务器会返回html文件，然后浏览器开始加载html代码。当浏览器加载html代码时，如果发现标签引用了外部CSS文件，浏览器就会向服务器发送请求，获取该CSS文件。这个加载是异步的，不会影响DOM树的构建。这只是意味着在处理完CSS之前，构建的DOM不会显示。当浏览器加载html中部分的代码时，开始根据CSS文件渲染页面。流程是：生成dom树，计算css样式，构建渲染树，回流（reflow），定位元素位置和大小，绘制页面。一张图片，向服务器请求这张图片，在图片下载scene2之前继续渲染下面的代码：1、浏览器找到一个对于父节点display:none，只触发两次回流和重绘对动画元素使用position:absolute减少父元素的Reflow使用图片预加载尽量在末尾预先设置可见元素的宽高改变元素避免使用表格布局使用transform改变将触发重绘的属性使用请求stAnimationFrameinsteadofsettimeout参考资料：从Chrome源码看浏览器是如何计算css的你真的懂reflow和redraw吗？