DOCTYPE 的作用
- 全称: Document Type Declaration 说人话就是
文档类型声明
, 用来在HTML或者xml文档中来声明文档的类型,简单说就是告诉浏览器或者解析器文档的类型和版本,一遍正确的渲染和解析文档内容- 主要作用:
- 文档类型定义: 声明文档类型,使浏览器正确解析和渲染,不同文档类型触发不同的渲染模式
- 渲染模式的切换: 标准模式(strict Mode)准寻CSS和HTML的标准渲染,混杂模式(Quirks Mode)会根据旧版本浏览器的行为进行渲染,以保持向后兼容,此模式就是为了做兼容用的,一般不用
- 正确解析: 帮助浏览器正确的解析文档结构和元素,这对确保页面在不同浏览器中呈现一致的内容非常重要
- ! 快捷键生成的就是:
<!DOCTYPE html>
- 扩展: 啥玩意是混杂模式,和标准模式有啥不一样
- 早起浏览器的渲染方式不同,导致页面不一样,就引入了混杂模式解决这个问题,具体如下:
- 盒模型: 某些浏览器可能会使用不同的盒模型解析元素的宽度和高度
- 默认样式: 不同浏览器的元素默认样式不同,混杂模式采用就浏览器的默认样式(文本默认左对齐,列表有默认间距和标志,a标签蓝色带下划线,访问后变紫)
- 布局算法: 混杂模式使用不同的布局算法,以匹配旧浏览器的行为
- 浮动和定位: QM下浮动和定位可能会与标准不同
- 在扩展: 除了HTML外,还有什么类型
- HTML的不同版本: 4.01 Strict 、4.01 Transitional
- XHTML的不同版本: 1.0Frameset
- XML:文档
script的defer和async属性的区别
- 用来控制js脚本的加载和执行方式
- defer(用于页面交互的js脚本):
- 浏览器遇到
defer
会继续渲染页面,同时异步加载脚本文件,脚本文件的执行会在文档解析完成后进行- 多个带有
defer
的脚本的执行顺序就按照他们在文档中的顺序执行- 通常用在整个文档解析后再加载执行的脚本,一般写在
<head>
头区域,不影响页面加载速度- async():
- 浏览器遇到
async
脚本时,异步下载脚本文件,下载完成后立即暂停后续文档解析并执行脚本,然后回复文档解析- 多个
async
的执行顺序内部确定,那个先下载完那个先执行- 适用于不依赖页面解析的脚本,可以提高页面的加载速度,但要注意脚本之间的依赖问题
- 具体的区分根据脚本和页面的依赖关系:
- 加载依赖关系: 页面加载后才需要的脚本或资源,可以被延时加载,用
defer
, 不影响页面渲染- 运行时依赖关系: 有些脚本可能需要再页面加载后立即执行,例如修改页面内容或也爱你初始化时进行某些操作,如: 初始化界面组件,在Input中绑定事件、设置默认值
defer 和 async 的加载是在 DOMcontentloaded事件之前还是之后完成
- 都在
DOMContentLoaded
事件前进行加载的,但顺序有所不同- defer : 脚本的加载是在DOM构建完成前,但执行会在事件之后
- async:脚本加载在DOM构建完成前,完立即执行,执行时可能在事件之前也可能在之后,取决于加载速度
浏览器登录时session和cookie的原理
- cookie原理:
- 输入用户名和密码进行登录
- 服务器验证用户的身份,如果验证通过,生成一个包含用户标识信息的加密令牌,并将令牌存储在响应的Cookie中
- 浏览器收到响应后,将cookie存储在本地中,以后每次发起请求时,浏览器会自动在请求头中附带相应的cookie信息
- 服务器在收到请求时会解析Cookie中的令牌,根据令牌验证用户身份,如果令牌有效,服务器会对用户进行授权并响应请求
- session原理:
- 登录
- 服务器验证用户身份,如果验证通过,会在服务器端创建一个会话对象,用来存储用户的标识信息
- 服务器会生成一个唯一的session ID, 并将这个session ID存在响应的Cookie中,或者将其作为查询参数附加在URL中
- 浏览器在收到请求后,会经session ID存在本地,以后每次发起请求,浏览器都会自动在请求头中附带session id
- 服务器收到请求后会根据session ID 找到对应的会话对象,然后根据会话对象中的用户标识信息进行验证和授权
css布局中的物理像素,逻辑像素,像素密度
- 物理像素: 是显示屏上的实际硬件单元,通常是指显示屏上的像素点,他们是构成图形,文字的基本单位 ,分辨率越高的屏幕,物理像素越密集,图像更清晰
- 逻辑像素: 开发使用的设计稿的尺寸就是逻辑像素,他是相对于视口的一个抽象单位,用来定义元素大小和位置
- 像素密度: 表示在一个逻辑像素中包含的物理像素数量,也就是设备像素比:DPR, 屏幕的分辨率越高,DPR就越高,DPR有整数有小数,一般直接舍弃小数部分保留整数就好
为什么要用CSS预处理器
- 变量和计算:预处理器允许使用变量来存储颜色,字体,尺寸等,方便修改,可以再样式表中计算盒子模型的变化以及颜色的变化
- 嵌套规则: 预处理器允许在样式表中嵌套路由规则,使代码更加结构化,减少选择器的冗余,太高维护性
- Mixins: 混入是一种可重复使用的代码块,可以在需要的地方引用
- 继承: 允许创建一个选择器,继承其他选择器的样式,这样可以减少样式表中的冗余代码,使样式变更更方便
- 模块化和可组合性: 预处理器可以将样式拆分成多个模块,提高代码的课维护性和课重复性,模块变化的样式可以更好的组合和重用
- 自动加前缀: 预处理器根据浏览器的兼容性,添加相应的CSS前缀,简化了写兼容性代码的过程
js中的数据类型
基本数据类型
- string 、 Number 、 Boolean 、 NUll 、Undefined 、 Symbol
- Symbol : 常用于对象的属性键名
引用数据类型
- Object 、 Array 、 Function 、 Date、 RegExp
基本数据类型和引用数据类型在存储上有什么区别
基本数据类型
- 存储方式: 值直接存在变量的栈内存中
- 复制行为: 将一个基本类型的变量赋值给另一个变量,会直接复制值到新变量中,之后两者互不影响
- 比较: 基本类型基于值比较,只要值相等就视为相等
引用数据类型
- 存储: 引用数据类型存储在堆内存中,变量中存储的是堆内存中的引用
- 复制: 复制的是被复制变量中存的堆内存的和引用地址,所以两个变量指向同一个地址,互相影响
- 比较: 引用数据类型基于引用比较,两个变量引用的对象有相同的属性和值,但你不是同一个引用依旧会被视为不相等
====> 引出深拷贝和浅拷贝问题#
为什么要这么设计,堆和栈有什么区别
原因:
- 栈内存的访问速度快,因为他是线性、紧凑的内存结构,基本数据类型的值比较小且固定,适合存在栈中,一遍访问和操作
- 引用数据类型的大小通常是不固定的,可能会随着数据的增加发生变化,因此存在堆中可以更加灵活的分配内存空间
- 引用数据类型可能具有不同的生存周期,需要灵活的内存管理,在堆中,可以根据引用计数来判断何时释放内存,从而避免内存泄漏
- 共享和复用: 多个变量可以共享引用地址,节省内存空间,且对象被多个变量引用,提供更强打的灵活性
总的来说:基于优化内存管理和访问速度,做的一种权衡,基本数据类型存储速度快,但限制了大小和复杂性,应用数据类型在堆中可以处理更大的,更复杂的数据,但访问时想能开销较大
js中的堆存储也像c一样开辟一片连续的空间吗
js 堆内存管理的特点:
- 动态分配: js的堆内存管理是动态的,他会根据对象的大小和生命周期自动分配和回收内存,这与C的手动控制内存分配不相同
- 垃圾回收: js引擎自动进行垃圾回收,清楚不在被引用的对象,从而释放占用的堆内存,这避免了手动释放的需求,但引入了一些性能开销
- 引用计数:js引擎会使用引用计数来追踪对想的引用关系,一遍再没有引用时自动释放对象,但无法处理循环引用的复杂情况
- 非连续分配: js的堆内存不要求连续的物理内存块,这使对象的大小和生命周期可以更灵活地管理,但也可能导致一些空间碎片