。

原生监听事件、定时器等#xff0c;必须在componentWillUnmount中清除#xff0c;大型项目会发生内存泄露#xff0c;极度影响性能。

使用PureComponen…把import

Button

的方式引入以利于按需打包。

原生监听事件、定时器等必须在componentWillUnmount中清除大型项目会发生内存泄露极度影响性能。

使用PureComponent代替React.component这样React机制会自动在shouldComponentUpdate中进行浅比较决定是否更新减少渲染次数。

对于有性能瓶颈的组件多结合

React.memo

进行助力调优。

React的JSX语法要求必须包裹一层根标签为了减少不必要的DOM层级我们使用Fragment标签代替这样渲染时候不会渲染多余的DOM节点让DIFF算法更快遍历减少渲染性能损耗。

绑定事件不要使用匿名箭头函数例如onClick{(event){...}}

应该改写为

形式减少函数的构建次数及内测占用。

DOM子节点的事件优先绑定到父节点上使用事件代理模式避免事件内存占用随着子节点数量等比增长。

多利用React的key属性进行优化减少渲染dom次数避免错误用法一用index做key、错误用法二:用index拼接其他的字段、正确用法用唯一id作为key。

html

html-webpack-plugin

插件提取为独立css文件不要使用内嵌style样式通过optimize-css-assets-webpack-plugin

插件配置

元素是内联元素在加载图片后会改变宽高会导致整个页面重排验证影响渲染性能所以最好在渲染前就指定其大小或者让其脱离文档流。

对于脚本与DOM/其它脚本的依赖关系很强script设置defer属性即脚本会立即下载但会延迟到页面DOM渲染后再执行执行有序(例如:事件类、垫片类、DOM类)。

对于脚本与DOM/其它脚本的依赖关系不强script设置async属性即当前脚本不必等待其他脚本也不会阻塞文档呈现执行无序例如:采集类、帮助类、聊天类。

JS防抖操作对指定时间内执行的连续事件只执行最先的一次。

JS节流操作对指定时间内执行的连续事件只执行最后的一次。

避免出现超过三层嵌套的CSS规则。

使用ID选择器后就不要添加多余类选择器。

不要使用标签选择器而是用类选择器代替。

避免滥用float模式、声明过多font-size。

将元素设为不可见visibility:

hidden这样可以减小重绘的压力必要的时候再将元素显示。

控制DOM节点的嵌套深度能少一层就少一层。

切换样式要提前定义好class通过class的切换批量修改样式避免多次重绘重排。

React下直接DOM操作能避免则避免避免不了也要将多次的append的DOM操作可以先插入到一个新生成的元素中再一次性插入到页面中减少页面重绘重排。

能不定义全局变量就不定义全局变量使用局部变量代替全局变量减少内存占用提高查找速度。