性能优化的思路 影响网页性能最大的因素是浏览器的重排(repaint)和重绘(reflow)。 React的Virtual DOM就是尽可能地减少浏览器的重排和重绘。 从React渲染过程来看，如何防止不必要的渲染是解决问题的关键。 性能优化的具体办法 1. 尽量多使用无状态函数构建组件 无状态组件 ...
分类：
其他好文 时间：
2018-09-13 20:25:35
阅读次数：
135
一、引发重绘的事件 1、调用repaint() 2、调用uodate() 二、控件hide或者show 三、其他 ps： repaint函数是立即重绘，没有优化 update会优化，异步重绘，所以如果调用多次update可能会只重绘一次 重绘的函数是： paintEvent，这是QWidget的，可 ...
分类：
其他好文 时间：
2018-08-15 16:56:31
阅读次数：
605
解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树 1、若遇到css，则构建css rule tree， 2、若遇到html标签，则构建dom tree， 3、若遇到js，则什么都不干，等js解析执行完成，js可能在此阶段修改dom tree 或 ...
分类：
其他好文 时间：
2018-08-14 17:03:37
阅读次数：
126
一、使用CSS3动画代替JS动画 JS动画频繁操作DOM导致效率非常低 在频繁的操作DOM和CSS时，浏览器会不停的执行重排（reflow）和重绘（repaint） 可以避免占用JS主线程 这边就不细说这两者具体的低优缺点。一般做2D动画的话,可以使用CSS3的transition或animatio ...
分类：
Web程序 时间：
2018-08-03 14:27:42
阅读次数：
219
前端性能优化方法： 一 . 减少http请求 （1）通过合并图片，减少请求，俗称css sprites(css精灵)css sprites （2）lazyload懒加载，在需要的时候再加载 1.定义：懒加载也称为延迟加载，图片需要用到的时候再去价值 2.用法：就是重写对象的get方法，当系统调用ge ...
分类：
Web程序 时间：
2018-07-29 19:03:30
阅读次数：
203
为什么要了解浏览器加载、解析、渲染这个过程？ 为什么要了解这些呢？如果想写出一个最佳实践的页面，就要好好了解。 了解浏览器如何进行加载，可以在引用外部样式文件，外部js时，将他们放到合适的位置，使浏览器以最快的速度将文件加载完毕。 了解浏览器如何进行解析，可以在构建DOM结构，组织css选择器时，选 ...
分类：
其他好文 时间：
2018-07-03 16:57:37
阅读次数：
190
周五同事遇到一个很奇怪的问题，调到下班，虽然问题解决了，但是不知道问题的具体原因，回来翻了翻代码，才发现症结所在，下面就分享出来，供遇到同样问题的同行们参考： 先把问题描述一下，做的功能是使用ajax向后台来提交数据，为了向用户进行很好的错误提示，后台中将出现错误时的错误原因返回给前端 ...
分类：
Web程序 时间：
2018-04-27 19:45:56
阅读次数：
327
本文主要介绍一下什么是reflow,repaint, 怎样避免它们造成的不良影响, 怎么通过工具查看分析它们. 一.首先对浏览器渲染引擎下网页呈现过程简要说一下: 以上5步中，主要耗时的是后2步，后两步合称为渲染（render）。 二: 什么是reflow 和 repaint： 网页在生成的过程中， ...
分类：
其他好文 时间：
2018-03-20 00:41:15
阅读次数：
159
1. 什么是DOCTYPE及其作用 1. 浏览器渲染过程 1. 重排Reflow 1. 重绘Repaint 1. 布局Layout 一、什么是DOCTYPE及其作用 DTD（document type defiition，文档类型定义）是一系列的语法规则，用来定义XML或者Html的文件类型。浏览器 ...
分类：
其他好文 时间：
2018-03-07 23:50:23
阅读次数：
205
绘图原理（1）Component类提供了两个和绘图相关最重要的?法：1、 paint(Graphics g)绘制组件的外观2、 repaint()刷新组件的外观当组件第?次在屏幕显示的时候，程序会?动的调paint()来绘制组件 绘图原理(2)在以下情况paint()将会被调?：1、窗?最小化，再最 ...
分类：
编程语言 时间：
2018-02-11 16:16:45
阅读次数：
212
