前端性能优化

性能优化

性能优化原则

  1. 多使用内存、缓存或其他方法
  2. 减少CPU计算量,减少网络加载耗时
  3. 空间换时间(适用于所有编程的性能优化)

从何入手?

让加载更快

  • 减少代码体积:压缩代码

  • 减少访问次数:合并代码、SSR服务端渲染、缓存

  • 使用更快的网络:CDN

    让渲染更快

  • CSS放在HEAD,JS放到body最后面

  • 尽早开始执行js,使用ContentLoaded触发

  • 懒加载(图片懒加载、上滑加载更多)

  • 对DOM查询进行缓存

  • 频繁DOM操作合并到一起进行插入DOM结构

  • 节流throttle 防抖debounce

相关推荐
孩子 你要相信光4 分钟前
css之一个元素可以同时应用多个动画效果
前端·css
huangql52015 分钟前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js
Days205031 分钟前
LeaferJS好用的 Canvas 引擎
前端·开源
小白菜学前端1 小时前
vue2 常用内置指令总结
前端·vue.js
林_深时见鹿1 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
椒盐螺丝钉1 小时前
Vue组件化开发介绍
前端·javascript·vue.js
koooo~1 小时前
v-model与-sync的演变和融合
前端·javascript·vue.js
matlab的学徒1 小时前
Web与Nginx网站服务(改)
linux·运维·前端·nginx·tomcat
从零开始学习人工智能1 小时前
快速搭建B/S架构HTML演示页:从工具选择到实战落地
前端·架构·html
虫虫rankourin2 小时前
在 create-react-app (CRA) 创建的应用中使用 react-router-dom v7以及懒加载的使用方法
前端·react.js