前端代码优化散记

news/2024/7/10 3:10:05 标签: 前端, vue, html5
  1. 把import Button from 'xxx' 的引入方式，变成import {Button} from 'xxx' 的方式引入，以利于按需打包。
  2. 原生监听事件、定时器等，必须在componentWillUnmount中清除，大型项目会发生内存泄露，极度影响性能。
  3. 使用PureComponent代替React.component，这样React机制会自动在shouldComponentUpdate中进行浅比较，决定是否更新，减少渲染次数。
  4. 对于有性能瓶颈的组件多结合 React.memo ,immetable.js 对shouldComponentUpdate ,PureComponent 进行助力调优。
  5. React的JSX语法要求必须包裹一层根标签，为了减少不必要的DOM层级，我们使用Fragment标签代替，这样渲染时候不会渲染多余的DOM节点，让DIFF算法更快遍历，减少渲染性能损耗。
  6. 绑定事件不要使用匿名箭头函数，例如：onClick={(event)=>{...}} 应该改写为 onClick = {this.handleClick} 形式，减少函数的构建次数及内测占用。
  7. DOM子节点的事件，优先绑定到父节点上，使用事件代理模式，避免事件内存占用随着子节点数量等比增长。
  8. 多利用React的key属性进行优化，减少渲染dom次数，避免错误用法一：用index做key、错误用法二:用index拼接其他的字段、正确用法：用唯一id作为key。
  9. html 通过 html-webpack-plugin 插件配置 minify 开启压缩。
  10. JS 通过 terser-webpack-plugin 插件配置 开启压缩。
  11. CSS 通过 mini-css-extract-plugin 插件提取为独立css文件，不要使用内嵌style样式，通过optimize-css-assets-webpack-plugin 插件配置 开启压缩。
  12. 图片在渲染前指定大小， img 元素是内联元素，在加载图片后会改变宽高，会导致整个页面重排，验证影响渲染性能，所以最好在渲染前就指定其大小，或者让其脱离文档流。
  13. 对于脚本与DOM/其它脚本的依赖关系很强：<script>设置defer属性（即脚本会立即下载，但会延迟到页面DOM渲染后再执行，执行有序）(例如:事件类、垫片类、DOM类)。
  14. 对于脚本与DOM/其它脚本的依赖关系不强：<script>设置async属性（即当前脚本不必等待其他脚本，也不会阻塞文档呈现，执行无序）（例如:采集类、帮助类、聊天类）。
  15. JS防抖操作，对指定时间内执行的连续事件，只执行最先的一次。
  16. JS节流操作，对指定时间内执行的连续事件，只执行最后的一次。
  17. 避免出现超过三层嵌套的CSS规则。
  18. 使用ID选择器后就不要添加多余类选择器。
  19. 不要使用标签选择器，而是用类选择器代替。
  20. 避免滥用float模式、声明过多font-size。
  21. 将元素设为不可见：visibility: hidden，这样可以减小重绘的压力，必要的时候再将元素显示。
  22. 控制DOM节点的嵌套深度，能少一层就少一层。
  23. 切换样式要提前定义好class，通过class的切换批量修改样式，避免多次重绘重排。
  24. React下直接DOM操作能避免则避免，避免不了也要将多次的append的DOM操作可以先插入到一个新生成的元素中，再一次性插入到页面中，减少页面重绘重排。
  25. 能不定义全局变量就不定义全局变量，使用局部变量代替全局变量，减少内存占用，提高查找速度。

http://www.niftyadmin.cn/n/5002236.html

相关文章

SpringCloudAlibaba之Sentinel介绍

SpringCloudAlibaba之Sentinel介绍

文章目录 1 Sentinel1.1 Sentinel简介1.2 核心概念1.2.1 资源1.2.2 规则 1.3 入门Demo1.3.1 引入依赖1.3.2 集成Spring1.3.3 Spring中资源规则 1.4 Sentinel控制台1.5 核心原理1.5.1 NodeSelectorSlot1.5.2 ClusterBuilderSlot1.5.3 LogSlot1.5.4 StatisticSlot1.5.5 Authority…
阅读更多...
设计实现QSPI Flash的下载算法

设计实现QSPI Flash的下载算法

mm32-2nd-bootloader技术白皮书&#xff08;3&#xff09;——设计实现QSPI Flash的下载算法 mm32-2nd-bootloader技术白皮书&#xff08;3&#xff09;——设计实现QSPI Flash的下载算法 | MCU加油站 cathy 发布于&#xff1a;周一, 03/20/2023 - 15:29 &#xff0c;关键词&a…
阅读更多...
Spring IoC 的工作流程

Spring IoC 的工作流程

概况 IOC 是什么 Bean 的声明方式 IOC 的工作流程 IOC 是什么 IOC 的全称是 Inversion Of Control, 也就是控制反转&#xff0c;它的核心思想是把对象的管理权限交给容器。 应用程序如果需要使用到某个对象实例&#xff0c;直接从 IOC 容器中去获取就行&#xff0c;这样设计的好…
阅读更多...
牛客周赛 Round 10

牛客周赛 Round 10

A.游游的最长稳定子数组 原题链接 : 登录—专业IT笔试面试备考平台_牛客网 思路 : 一个线性dp,dp[i]表示以a[i]结尾的最长稳定子数组的长度; dp方程 : if(abs(a[i]-a[i-1]) < 1) dp[i]dp[i-1]1; else dp[i] 1; 代码 : #include<bits/stdc.h> #def…
阅读更多...
字节对齐（C++，C#）

字节对齐（C++，C#）

C#字节对齐示例 结构体定义 [StructLayoutAttribute(LayoutKind.Sequential, CharSet CharSet.Ansi, Pack 1)]&#xff0c;这是C#引用非托管的C/C的DLL的一种定义定义结构体的方式&#xff0c;主要是为了内存中排序&#xff0c;LayoutKind有两个属性Sequential和Explicit&a…
阅读更多...
js recude求和

js recude求和

let unReadCount resultList.reduce((pre, cur) > {return pre cur.unReadCount}, 0)
阅读更多...
智能遥测终端普适型RTU的主要功能特点及应用

智能遥测终端普适型RTU的主要功能特点及应用

智能遥测终端机是普适型RTU 研发的融合4G、Bluetooth、串口等多种通 信方式、数据采集存储传输于一体的智能遥测终端。产品内置数据采集器&#xff0c;实现内部模数转换&#xff0c; 提供增量式雨量接口、RS232、RS485&#xff0c;采集、存储、数据处理、远程传输为一体&#x…
阅读更多...
WebLogic Server 12c相对JBoss EAP 6的优势

WebLogic Server 12c相对JBoss EAP 6的优势

1.多数据中心部署和集群 WebLogic Server 12c内置对灾难恢复架构的支持&#xff1b;JBoss EAP 6只能通过比较昂贵的第三方工具实现。 WebLogic Server 12c支持高级LAN集群&#xff0c;对当机服务器的监测并内置通用的报警框架&#xff1b;JBoss EAP 6只有有限的LAN集群&#xf…
阅读更多...
最新文章

Copyright @ 2022~2023