性能优化原则

相关链接:【运行环境】加载资源的形式

性能优化

1 性能优化原则

多使用内存、缓存或其他方法

减少CPU计算量,减少网络加载耗时

(适用于所有编程的性能优化----空间换时间)

2 从何入手

  • 性能优化-让加载更快
    减少资源体积:压缩代码
    减少访问次数:合并代码,合并图片(雪碧图)SSR服务端渲染,缓存(配置webpack的时候增加contenthash . 打包的时候 如果文件更改了 才重新加载 没有变化则用缓存)
    使用更快的网络:cdn
  • 性能优化-让渲染更快
    css放在head ,js放在body 下面
    尽早开始执行js, 用DOMContentLoaded触发
    懒加载(图片懒加载 上滑加载更多)
    对DOM查询进行缓存
    频繁DOM操作,合并到一起插入DOM结构
    节流 throttle 防抖 debounce . (让渲染更加流畅)
    ● 缓存
    webpack 配置缓存资源
    静态资源增加hash 后缀,根据文件内容计算hash
    文件内容不变,则hash不变,则url 不变
    url和文件不变,则会自动触发http 缓存机制,返回304
    ● SSR
    服务器端渲染:将网页和数据一起加载,一起渲染
    非SSR(前后端分离):先加载网页 ,再加载数据,再渲染数据
    早先的JSP ASP PHP ,现在的vue react SSR 都是服务端渲染
    ● 缓存DOM查询
  • 多个DOM操作一起插入到DOM结构中
相关推荐
CCblandy3 小时前
一致性哈希到底省了多少搬迁?本机实测 3 轮:取模 6→7 搬 85.8%,V=128 只搬 14.3%,虚拟节点太少会被倾斜骗
后端·python·云原生·性能优化·架构
Linux实战笔记5 小时前
压测后我对GraphQL vs REST API 设计改了灵活查询与性能权衡
性能优化·graphql·rest api·接口设计·n+1 问题
CCblandy1 天前
Agent 工具调用怎么编排?本机实测:并行只到 2.63 倍,慢的先发省 30ms,CPU 活加 worker 无效
人工智能·后端·python·性能优化
用AI来创业吧1 天前
网站建设公司哪家好:报价差 3 倍,差在哪四项成本上(选型笔记)
笔记·性能优化·软件工程·安全威胁分析
yunwei371 天前
eBPF 入门实践教程:BPF Token,安全的委托式权限与程序加载
linux·后端·性能优化
CSharp精选营1 天前
SaveChanges 一万行?换批量操作快 10 倍
性能优化·efcore·批量操作·csharp·executeupdate
爱喝水的鱼丶2 天前
SAP-ABAP:S/4 HANA ABAP 新特性入门:与 ECC ABAP 的核心差异、架构优势与学习路径规划
运维·数据库·性能优化·sap·abap·hana·开发交流
余槐i2 天前
PostgreSQL 函数索引报错 must be immutable:3种绕法与代价
数据库·后端·sql·postgresql·性能优化
余槐i2 天前
Skills 增至 30 个,Claude Code 反而变慢:token 与加载实测
性能优化·开发工具·ai agent·claude code·agent skills
xiaoqiMikko2 天前
fastjson 1.2.84 的补丁关掉了一个缓存:addAccept 包前缀白名单下,反序列化慢了 13~28 倍
java·后端·性能优化