部分内容由豆包生成 笔记总览本笔记整理了Java和前端基础的学习内容涵盖核心概念、原理和实践要点。☕ Java 学习笔记一、Java基础1. 数组数组的特点连续的内存空间引用数据类型长度在创建时确定后续不能改变大小根据类型有默认值String类型默认nullint类型默认0char类型nullboolean默认false通过下标访问数据三种创建数组的形式直接确定长度int[] arr {1, 2, 3};String[] brr {JJ};先分配空间后赋值int[] arr new int[5];arr[0] 1;arr[1] 2;声明但不初始化int[] arr;指向null数组遍历普通for循环通过下标改变的是真实的数组值增强for循环通过下标改变的是数组的副本2. 数据类型Java数据类型分为两大类基本数据类型byte、short、int、long、float、double、boolean、char八大类型引用数据类型类、接口、数组三种编程语言分为 •强类型语言C、C、Java、C#、GO — 难学、性能好 •弱类型语言Python、PHP、JavaScript — 简单好学底层无法使用真实数组内存消耗大3. 面向对象Java是面向对象的语言与C语言面向过程不同一个类可以创建多个对象类是创建对象的模板通过对象操作数据不会影响类本身的数据非静态方法必须依托对象存在值传递Java传递数据方式只有值传递没有引用传递。 例如把对象的地址的值传递给方法参数。二、JVM内存模型与程序执行流程1. Java程序运行流程.java和.class文件本质上在磁盘上需要传到内存中执行程序包括指令和数据从磁盘传到内存再传到CPU执行程序进入内存要分配存储空间由操作系统分配为进程开辟空间2. JVM内存模型Java程序运行在JVM虚拟机上操作系统给JVM开辟内存空间。 JVM把申请到的空间分成三部分虚拟机栈方法执行的内存模型堆存放对象实例线程共享方法区存储类信息、常量、静态变量等进程与线程•进程正在执行的程序操作系统资源调度的基本单位 •线程程序的执行过程 • 一个进程包含多个线程 • 一个栈对应一个线程的执行过程 • 程序的执行过程 方法的不断入栈出栈三、多线程与并发1. 多线程基础线程启动继承Thread类创建对象后调用start()方法start()方法是把线程加入就绪队列执行顺序不确定CPU调度决定线程之间相互独立谁也不会等待谁并发与并行并发两个或多个事件在同一时间段发生宏观上同时发生微观上交替发生并行两个或多个事件在同一时刻发生线程切换线程分配的时间片到了以后该线程被换出。 线程在栈中数据不动只是CPU寄存器的指向从该线程指向下一个线程。线程等待t1.join()main方法等待t1线程执行完毕后再继续执行。2. 多线程场景与性能适合多线程的场景CPU有大量浪费的情况如网络爬虫等待数据返回时CPU空闲不适合多线程的场景图像处理CPU处理图像时一直占着总线多线程相当于单线程 解决方法把图片切碎存进高速缓存中减少上下文切换上下文切换有开销需要在并行收益和切换开销之间找平衡。3. 锁机制synchronized锁只能锁引用类型不能锁基本类型方法执行完后自动解锁对象锁修饰非静态方法锁住的是对象本身t1给整个对象上锁后其他线程既不能调用该对象的m1也不能调用m2对象锁只能锁住本对象的方法类锁修饰静态方法锁住的是类本身Class对象一个线程执行加锁的静态方法时会阻塞其他线程执行该类中任何加锁的静态方法死锁两个线程互相持有对方需要的锁导致都无法继续执行。避免方法对象要锁就锁全部或者分开加锁加定时锁。volatile锁只保证读不保证写轻量级的synchronized保证可见性一个线程更新后其他线程的缓存失效禁止指令重排序通过内存屏障实现指令重排序与计算机组成原理的流水线技术有关流水线技术会导致指令顺序打乱。 流水线技术的好处一次性调整好一种电路的逻辑后执行一个批次的任务节省电路切换的时间开销。4. CAS操作CASCompare-And-Swap是写后读的一种硬件实现线程在更新值回内存前先检查该内存位置的值是否与之前读取的预期值相同相同则更新成功否则更新失败重新读取后再尝试CAS缺陷高并发下效果差一个线程更新成功其他线程都得重新计算经常伴随死循环使用更新不成功一直重新算5. 缓存与内存高速缓存支持多核CPU极大增加了传输速率极大缩短运算距离缺点导致并发覆盖问题缓存行cache分配存储的最小基本单位是缓存行一个缓存行64字节512bit操作缓存行会独占导线缓存行填充如果整个缓存行的数据都归同一个变量读取时不会有其他线程竞争总线读取速度会快很多。 缓存行填充把剩下的字节都占满减少排队延迟。缓存一致性volatile保证可见性的底层原理 缓存一致性 内存屏障线程一更新缓存后先通过总线告诉其他缓存内容已更新其他缓存将自己的内容设置为无效状态然后再更新主存四、集合框架1. 集合框架概述Java集合框架主要包括两种类型的容器Collection存储一个元素集合Map存储键/值对映射2. List - ArrayList特点动态数组实现可以存储任何引用类型不能存基本类型需用包装类如Integer、Double、Boolean、String等常用方法方法说明.add(Object element)向列表尾部添加指定元素.add(int index, Object element)在指定位置插入元素.size()返回列表的元素个数.get(int index)返回指定位置的元素index从0开始.set(int i, Object element)替换索引i位置的元素返回被替换的元素.clear()从列表中移除所有元素.isEmpty()判断列表是否包含元素.contains(Object o)判断列表是否包含指定元素.remove(int index)移除指定位置的元素返回被删元素.iterator()返回迭代器遍历方式普通for循环for (int i 0; i list.size(); i) { System.out.println(list.get(i)); }增强for循环for (String name : list) { System.out.println(name); }迭代器遍历IteratorString ite list.iterator(); while(ite.hasNext()){ System.out.print(ite.next()); }3. Map - HashMap特点键值对存储key不允许重复只能有一个空的key常用方法方法说明.put(K key, V value)将键/值映射存放到Map集合中.get(Object key)返回指定键所映射的值没有则返回null.size()返回key-value的组数.clear()清空Map集合.isEmpty()判断Map中是否有数据.remove(Object key)删除指定key的数据并返回对应value.containsKey(Object key)判断是否含有key.containsValue(Object value)判断是否含有value.putAll(Map map1)添加另一个Map的所有数据.replace(key, value)替换指定key的value 前端基础学习笔记一、HTML 基础1. HTML文档结构与Emmet快捷键文档基本骨架!DOCTYPE html文档类型声明html langen根元素head头部包含meta、title等meta charsetUTF-8字符编码meta nameviewport视口设置title页面标题body页面主体唯一Live Server打开方式右键 → Open with live server地址为127.0.0.1:5500更贴近真实部署环境。Emmet常用缩写缩写说明!生成完整HTML5框架div Tab生成div标签p{hello}生成带文本的p标签li*3生成3个li标签li*3.item$带序号classitem1、item2、item3ulli生成子元素divp生成兄弟元素2. 常用HTML标签文本标签span行内元素横向布局div块级元素换行h1~h6标题标签p段落标签超链接与窗口a href target_blank新窗口打开target_self本窗口打开默认iframe src name窗口名内联窗口配合a标签的target属性在指定窗口打开锚点a namedemo定义锚点位置a href#demo跳转到锚点位置图片img src alt替代文字src图片路径绝对或相对alt加载失败时显示的替代文字列表ul无序列表ol有序列表li列表项表格table表格tr行td单元格属性border边框、cellspacing间距、cellpadding填充thead表头tfoot表尾tbody主体便于单独操作音频audio controls src autoplay loop mutedcontrols显示播放控件autoplay自动播放loop循环播放muted静音3. 表单控件需放在form action提交地址内类型说明input typetext单行文本框input typepassword密码框input typeradio namesex单选框同名互斥input typecheckbox多选框input typefile文件上传input typedate日期选择器二、CSS 样式与布局1. CSS样式添加方式行内样式style属性:值;优先级最高内部样式head中的style标签外部样式独立.css文件通过link relstylesheet href文件路径引入优先级行内 内部/外部后写的覆盖先写的同级别看顺序2. CSS选择器基础选择器选择器说明div { }元素选择器#id名ID选择器唯一.class名类选择器可复用*通配选择器所有元素属性选择器[class]有class属性[class^aa]class以aa开头[class$aa]class以aa结尾[class*aa]class包含aa关系选择器包含选择器div .xx后代所有元素子选择器div .xx仅一级子元素组合选择器div, p, .class同时生效伪元素选择器::before/::after在元素内容前后插入内容::first-line首行样式伪类选择器:hover鼠标悬停状态:focus输入框获得焦点:checked单选/复选框选中状态:nth-child(2n2)结构伪类n从0开始:nth-last-child(3)从最后一个倒数第3个:first-of-type/:last-of-type同类型中的第一个/最后一个优先级规则ID选择器 类选择器 元素选择器 选择器越长越精确优先级越高同级别按书写顺序执行3. 盒子模型组成内容区content内边距padding边框border外边距marginpaddingpadding: 上 右 下 左顺时针可单独设置padding-bottom等borderborder: 1px solid red可单独设置border-top、border-top-color等marginmargin: 上 右 下 左margin: auto水平居中相邻margin取最大值不累加盒模型计算content-box默认width/height只控制内容区paddingborder额外增加盒子总大小border-boxwidth/height控制整个盒子总大小内容区自动缩小box-sizing: border-box可避免padding/border撑大盒子推荐使用。4. 布局方式显示类型块级盒子独占一行支持宽高div、h1~h6、ul、li、p内联级盒子横向排列不支持宽高span内联块级盒子横向排列支持宽高display: inline-block弹性盒子Flexbox父元素设置display: flex子元素默认横向排列。主轴方向flex-direction: row默认从左到右flex-direction: row-reverse从右到左flex-direction: column从上到下flex-direction: column-reverse从下到上主轴对齐justify-content: flex-start开始方向justify-content: flex-end结束方向justify-content: center居中justify-content: space-between两端对齐中间等距justify-content: space-around空白放在元素两侧justify-content: space-evenly所有间隙均匀分布交叉轴对齐align-items: stretch默认拉伸填满父容器高度align-items: flex-start顶部对齐align-items: center垂直居中align-items: flex-end底部对齐align-items: baseline文字基线对齐换行与多行对齐flex-wrap: wrap允许换行align-content多行对齐类似justify-content但作用于多行子元素属性order: 数字排序值越小越靠前flex-grow: 数字拉伸比例按剩余空间分配flex-shrink: 数字压缩比例超出父容器时按比例缩小5. 其他实用技巧英文长单词换行word-break: break-all强制截断重置样式* { margin: 0; padding: 0; }清除浏览器默认边距背景图片background-repeat: no-repeat不平铺background-size: cover填满容器background-attachment: fixed背景不随滚动而滚动background-position背景位置图片不变形object-fit: cover