前端哪些事

起步，背知识点,头大

知识点

HTML

语义化

header
nav
footer
article
select

canvas 画布

本地存储 localStorage sessionStorage cookie
localStorage 持久性 ，每个域名有独立的存储空间 5mb， 用于长期保存的数据，用户设置和缓存数据。
sessionStorage 在浏览器会话内保持，每个域名有独立的存储空间 5mb ，临时保存的数据，表单数据保留，会话状态。
cookie 过期时间内保存，即使浏览器关闭。4kb 客户端与服务器通信。 客户端与服务器通信。

video和audio的使用

浏览器缓存

强缓存 协商缓存

强缓存是指浏览器直接从本地缓存中获取资源，而不是向服务器发送请求。
通过HTTP请求头字段控制:
Cache-Control: max-age=,no-cache (不使用强缓存，可以使用协商缓存) , no-store (不缓存) , public (可以被所有缓存区缓存) , private (只能被用户缓存)
Expires:(缓存过期时间，在这个时间之前，直接从缓存中获取资源，不再向服务器发送请求)

协商缓存是指浏览器向服务器请求资源时，会先向服务器询问资源是否更新，如果资源更新，则返回新的资源，否则返回304 Not Modified。
通过两个字段控制:
浏览器向服务器请求第一次会携带：
Last-Modified:(服务器在响应头返回资源的最后修改时间)
ETag:(服务器在响应头返回资源的唯一标识 hash)
第二次会添加:
If-Modified-Since:(浏览器携带的上次请求的资源最后修改时间)
If-None-Match:(浏览器携带的上次请求的资源的唯一标识)
比较有无改变没有返回HTTP/1.1 304 Not Modified

补充http协议和osl七层概念模型

url:统一资源定位符，用来标识互联网上的资源。
主机 ， 端口 ，路径 ，参数 ，片段(锚点) ，协议

1.浏览器从Url中解析出域名, 根据域名查询DNS解析出IP地址(涉及本地DNS缓存, 域名解析服务器),建立TCP连接(浏览器客户端与服务器通信服务器一直监听80，433端口), 三次握手, 构造http请求,填充上下文信息到头部,发起请求, 服务器处理请求并根据请求返回响应,浏览器解析并渲染用户页面,发送其他资源请求。

osl七层模型:
应用层: 应用层主要是为应用软件提供服务，比如HTTP、FTP、SMTP、DNS等。
表示层: 主要是负责数据格式的表示，比如ASCII、EBCDIC、JPEG、MPEG等。
会话层: 主要是建立、维护和管理通信会话，比如Socket、RPC等。
传输层: 主要是负责数据传输，比如TCP、UDP等。
网络层: 主要是负责网络互连，比如IP、ARP、RARP、OSPF、ICMP等。
数据链路层: 主要是负责数据传输，比如PPP、HDLC、VLAN等。
物理层: 主要是负责传输介质的物理特性，比如光纤、无线电等。

http1.0 无法复用tcp连接
http1.1 增加长连接, 通过设置Keep-Alive可以保持HTTP连接,如果客户端想关闭HTTP连接，可以在请求头中携带Connection: false来告知服务器关闭请求。

http1.1 增加管道机制。允许多个请求同时发送到服务器，不能并行响应。
但是服务器必须按照客户端请求的先后顺序依次回送相应的结果，以保证客户端能够区分出每次请求的响应内容。
假设先发送html后发送css请求,服务器先渲染好css后渲染好html,服务器还是要等html渲染完成后先响应html在响应css。
会造成队头堵塞,不是真正的并行。

一次连接做的,相当于流水线。
举例 有1，2，3三个响应 响应时间都是1s,处理时间 1是5s , 2是3s , 3是1s
服务器接收1，2，3请求，5s处理完1发送响应 6s发送2响应 7s发送3响应 8秒结束
服务器3，2，1请求，1s处理完3发送响应 2s时处理 3s发送2响应 4s处理5s发送1响应, 6秒结束。

就是响应时进行下载，而不是等待请求完成后再响应。和3，2，1请求缩短时间类似，因为响应只能顺序进行，但下载可以并行。
现代浏览器通过浏览器开启多个TCP连接，并行发送多个请求，响应资源下载并行，实现并发。(6-8个连接) 平衡性能与网络资源。

http2.0 通过帧封装 ,可以乱序发送,最后通过steamID 拼接数据包。
多路复用(允许在同一个TCP连接上并行发送多个请求和响应)，头部压缩(cache避免不必要的重复,浏览器服务器缓存一张head表,减少请求头大小)，服务器推送(服务器主动推送资源给客户端,减少客户端请求)，请求优先级(服务器可以指定资源的优先级,处理请求顺序)。

web worker (网页辅助角色)

javascript语言采用的是单线程模型。随着计算机的计算力提高，单线程的限制很大，web worker允许主线程创建worker线程，二者互不干扰，worker线程可以执行一些计算任务，后台运行完成后传递给主线程(UI),主线程(UI)的交互就会更流畅，不会被干扰或阻塞。

缺点是消耗资源，用完需要关闭。

同源限制

Worker 线程运行的脚本文件，必须与主线程的脚本文件同源。

Dom限制

不能使用window document等对象，可以访问navigator和location对象。

navigator对象能访问的属性有：
AI:(navigator.userAgent：返回当前浏览器的用户代理字符串。
navigator.language：返回浏览器的首选语言。
navigator.onLine：返回一个布尔值，表示浏览器是否在线。)

location对象能访问的属性有：
(location.href：返回当前 URL 的完整字符串。
location.protocol：返回当前 URL 的协议（如 http: 或 https:）。
location.host：返回当前 URL 的主机名和端口号。
location.hostname：返回当前 URL 的主机名。
location.port：返回当前 URL 的端口号。
location.pathname：返回当前 URL 的路径部分。
location.search：返回当前 URL 的查询字符串部分。
location.hash：返回当前 URL 的片段标识符部分。)

通信要靠信息，不在同一个上下文环境。

脚本限制

Worker 线程不能执行alert()方法和confirm()方法，但可以使用 XMLHttpRequest 对象发出 AJAX 请求。

文件限制

Worker 线程无法读取本地文件，即不能打开本机的文件系统（file://），它所加载的脚本，必须来自网络(http(s):// )。

代码实现

主线程

let worker = new Worker('worker.js');
worker.postMessage('Hello World');
worker.postMessage({method: 'echo', args: ['Work']});
worker.onmessage = function(event) {
  console.log(event.data);
};
worker.terminate(); // 关闭 主线程

Worker 线程

self.addEventListener('message', function (e) {
  self.postMessage('You said: ' + e.data);
  self.close(); // 关闭 worker 线程
}, false);

构造函数的参数是一个脚本文件，该文件就是 Worker 线程所要执行的任务。由于 Worker 不能读取本地文件，所以这个脚本必须来自网络。如果下载没有成功（比如404错误），Worker 就会默默地失败。

上传大文件使用，但是大文件有异步，(参考)
场景就主线程有很多复杂计算时使用。

iframe(嵌套网页)

嵌套广告，地图，外部内容。
src 属性可以指定嵌入的网页的 URL。
wdith height
frameborder=”0” | “1” 边框显示 0(false) 1(true)
sandbox=”allow-forms allow-scripts allow-same-origin”
allowfullscreen=”true” 全屏显示
importance
refererpolicy HTTP 头部的 referer 信息

(no-referrer：不发送 Referer 字段。
origin：只发送来源页面的协议、主机和端口部分。
unsafe-url：发送完整的 URL（默认行为）。)

也可javaScript 动态创建。

css

w3c盒模型和IE盒子模型

W3c盒子模型只包括内容区域，不包括内边距、边框和外边距。
怪异盒子模型 包含内容，内边距、边框。 不包含外边距。

文档流 float flex(一维) gird(二维)

默认布局
float 浮动
flex 弹性布局
giri 网格布局
定位 position absolute relative fixed(固定在视窗的某个位置) sticky(滚动到特定位置固定在页面上，父容器固定不是fixed相对视窗)

选择器

内联>id选择器>类选择器 | 伪类选择器 | 属性选择器 >标签选择器 | 伪元素选择器 > *

伪元素不会渲染到dom上，不会改变dom结构
一个选择器中只能使用一个伪元素。伪元素必须紧跟在语句中的简单选择器/基础选择器之后。
before after

BFC(块级格式化上下文)和IFC(内联格式化上下文)

BFC 是一个独立的渲染区域。
当一个块容器只包含行内级元素时，会创建一个 IFC

响应式布局 (RWD)

1. 媒体查询
   @media 媒体类型 and (媒体特征)

(all：适用于所有设备。
print：适用于打印预览模式。
screen：适用于电脑屏幕、平板电脑、智能手机等。
speech：适用于屏幕阅读器。)

(width：视口宽度。
height：视口高度。
device-width：设备屏幕的宽度。
device-height：设备屏幕的高度。
orientation：设备方向（portrait 或 landscape）。
resolution：设备的分辨率。
aspect-ratio：视口的宽高比。
device-aspect-ratio：设备屏幕的宽高比。)

小于600px red 601-1024px blue

@media (max-width: 600px){
    body{
        background-color: red;
    }
}
@media (min-width: 601px) and (max-width: 1024px){
    body{
        background-color: blue;
    }
}

弹性网格布局

flex-grow、flex-shrink 和 flex-basis

.container {
  display: flex;
  flex-wrap: wrap;
}
.item {
  flex: 1 1 200px; /* 每个项目至少200px宽，并且可以增长和收缩 */
}

动画，过渡

transition 过渡

.box {
    width: 100px;
    height: 100px;
    transiton-property: all; /* all 所有属性  width color */
    transiton-duration: 0.5s; /* 过渡时间 */
    transiton-timing-function: ease; /* 过渡速度  
    ease linear ease-in ease-out ease-in-out  cubic-bezier(0.25, 0.1, 0.25, 0.1) p1 p2 p3 p4 自定义贝塞尔曲线 */
    transiton-delay: 0s; /* 延迟时间 */

    /* 简写 */
    transiton: all 0.5s ease 0s;
}

animations 动画

@keyframes slide {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(200px);
    }
}

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation-name: slide;
  animation-duration: 2s;
  animation-timing-function: ease;
  animation-delay: 1s;
  animation-iteration-count: infinite; /* infinite 无限循环  数字表示次数(1,2,3...)  */
  animation-direction: normal; /* 方向  normal 正常方向(0-100%) reverse 反方向(100-0%) alternate 交替播放  alternate-reverse 反方向交替播放 */
  animation-fill-mode: both; /* none  恢复初始状态  forwards 动画结束后,保持最后一帧  backwards 动画开始前,保持第一帧  both 动画结束后保持最后一帧，动画开始前保持第一帧 */
  animation-play-state: running; /* 播放状态  running 播放  paused 暂停  可以用javascript改变属性控制播放状态*/ 
}

javascript

闭包

闭包是一个函数能记住并访问它的词法作用域。
它允许将函数与其所操作的某些数据（环境）关联起来。这显然类似于面向对象编程。

function makeAdd(x){
 return function(y){
   return x + y;
 }
}
let  add5 =makeAdd(5);
let  add10 =makeAdd(10);
 console.log(add(10)); // 15
 console.log(add10(10)); //20

如果不是某些特定任务需要使用闭包，在其他函数中创建函数是不明智的，因为闭包在处理速度和内存消耗方面对脚本性能具有负面影响。

例如，在创建新的对象或者类时，方法通常应该关联于对象的原型，而不是定义到对象的构造器中。原因是这将导致每次构造器被调用时，方法都会被重新赋值一次（也就是说，对于每个对象的创建，方法都会被重新赋值）。

原型链

当试图访问对象属性时,不止在对象上找, 还会在它的原型链上找。
(JavaScript 对象是动态的属性（指其自有属性）“包”。JavaScript 对象有一个指向一个原型对象的链。当试图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾。)

const obj = {
    a: 1,
    b: 2,
    __proto__: {
        c: 3,
        d: 4,
        __proto__: {
            e: 5,
        }
    }
}
console.log(obj.a, obj.b,obj.c,obj.d,obj.e); // 1 2 3 4 5

所有函数都有一个名为 prototype 的特殊属性。

Object.prototype.foo = "bar"
//向对象原型上添加属性 foot value =bar
const a= {
  a: 1,
}
const b = Object.create(a)
console.log(b.a) // 1

补充知识

// hasOwnProperty() 方法用于判断一个对象是否有自有属性
console.log(b.hasOwnProperty("a")) // false
console.log(a.hasOwnProperty("a")) // true

const arr = [1, 2, 3]
// instanceof 操作符用于判断一个对象是否是另一个对象的实例
console.log(arr instanceof Array) // true
console.log(arr instanceof Object) // true 但是Object也是true 因为数组也是对象

console.log(a instanceof Object) // true
console.log(a instanceof Array) //false

//判断对象类型的方法 通用 Object.prototype.toString.call(obj) 返回 [object Object| Array |Function |Number |String |Boolean]
console.log(Object.prototype.toString.call(arr) === "[object Array]")
console.log(Object.prototype.toString.call(a) === "[object Object]")

//Es6 Array.isArray() 方法用于判断一个对象是否为数组
//推荐
console.log(Array.isArray(arr)) // true

//
// Object.getPrototypeOf() 方法用于获取对象的原型
// Object.setPrototypeOf() 方法用于设置对象的原型 不经常使用

//使用类构造函数创建对象原型 extends (感觉脱离了原型链 ,类继承更易读,偏向java了)
class Polygon {
  constructor(height, width) {
    this.height = height
    this.width = width
  }
}

class Square extends Polygon {
  constructor(sideLength) {
    super(sideLength, sideLength)
  }

  get area() {
    return this.height * this.width
  }

  set sideLength(newLength) {
    this.height = newLength
    this.width = newLength
  }
}

const square = new Square(2)
// square ---> Square.prototype ---> Polygon.prototype ---> Object.prototype ---> null

内存管理

分配内存 使用内存 释放内存
javascript自动分配和释放内存，不需要手动管理内存。

垃圾回收机制

1. 计算垃圾回收机制(无法释放循环引用的对象) 不使用
2. 标记清除算法 把对象是否被需要简化为对象是否被引用
   /root/ -> A -> B -> …一直找引用对象 缺点: 不能被从根对象查询的到的对象都将被清除。

执行机制

任务队列

同步任务 sychronous
异步任务 asychronous

执行栈(存放同步任务) 任务队列(异步任务)

事件循环
执行栈完成->任务队列->执行栈->任务队列

举例: 一次完整的事件循环过程

1. 执行栈为空，开始执行同步任务，遇到异步任务，将异步任务添加到任务队列。
2. 执行栈执行完同步任务，开始执行异步任务，遇到回调函数，将回调函数添加到任务队列。
3. 执行栈执行完异步任务，开始执行回调函数，执行完毕。
4. 开始下一轮事件循环。

每一次宏任务中完成后都会清空微任务队列, 然后下一次宏任务。

Vue相关的

响应式封装 effect()

const dep =new Set()
function track(){
  dep.add(effect1)
  dep.add(effect2)
}
function trigger(){
  dep.forEach(effect => effect())
}
track() //收集依赖
effect1() // 先执行一次
effect2() // 先执行一次
trigger() // 改变时触发

proxy和Reflect

const obj = {
    name: 'Alice',
    age: 30
};

const handler = {
    get(target, key, receiver) {
        console.log(`Getting property ${key}`);
        return Reflect.get(target, key, receiver);
    }
};

const proxy = new Proxy(obj, handler);

const name = proxy.name; // 输出: Getting property name
console.log(name); // 输出: Alice

vue2 Object.defineProperty()
无法直接对新增的属性进行监听
this.$set() 方法可以解决这个问题
不能对数组监听,vue2重写了数组部分方法。通过继承数组对象的子类重写, 并将数据对象数组原型替换为重写后的数组子类原型实现数组监听。

vue3 proxy()

双向绑定就是通过数据劫持和发布者-订阅者模式实现的。

MVVM模式

1. 模型Model
2. 视图View

3. 视图模型ViewModel

   虚拟Dom Virtual DOM

   Vnode 虚拟节点
   更新10次DOM操作, 不会立刻更新dom ,将10次更新的diff内容用js对象表示, 最后一次更新时将diff内容应用到真实DOM上。

   路由实现原理

4. hash路由 # (Hash 路由是通过URL中的哈希（#）部分来实现路由的。当哈希部分发生变化时，浏览器不会向服务器发送请求，而是会触发hashchange事件。通过监听这个事件，前端代码可以动态地更新页面内容。)

5. history路由 (History 路由是通过HTML5提供的History API实现的。History API提供pushState()和replaceState()方法来改变URL，并触发popstate事件。通过监听popstate事件，前端代码可以动态地更新页面内容。)

history.pushState(stateObject, title, url); //javascript对象包含信息,作为事件的state属性 title 新页面标题 url 同源
history.replaceState(stateObject, title, url);

当用户点击浏览器的“后退”或“前进”按钮时，或者在JavaScript中调用history.back()、history.forward()和history.go()方法时，都会触发popstate事件。

// 添加一个新的历史记录
history.pushState({page: 'home'}, 'Home', '/home');

// 修改当前的历史记录
history.replaceState({page: 'about'}, 'About', '/about');

// 监听popstate事件
window.addEventListener('popstate', function(event) {
  const state = event.state;
  // 根据不同的状态加载相应的内容
  switch(state.page) {
    case 'home':
      loadHomeContent();
      break;
    case 'about':
      loadAboutContent();
      break;
    default:
      loadDefaultContent();
  }
});

// 模拟加载内容函数
function loadHomeContent() {
  document.body.innerHTML = 'Home Page';
}

function loadAboutContent() {
  document.body.innerHTML = 'About Page';
}

function loadDefaultContent() {
  document.body.innerHTML = 'Default Page';
}

vue nextTick()

数据发生变化时, vue会重新渲染相关Dom, 更新Dom是异步的, 安排在javascript事件循环下一次tick中,如果立刻操作Dom，会拿旧Dom的状态, 新DOm还没渲染出来。
vue提供了nextTick()方法, 让我们可以在下一次事件循环中执行回调函数, 让Dom更新后再执行回调函数。
人话: 当你发现修改数据后修改Dom时,是旧Dom , 使用nextTick(),在内容编写操作Dom方法代码。

inject 和 provide

父组件
<script setup>
  import { provide ,ref} from 'vue'
  // 父组件
  provide('message', 'Hello, world!')
  provide('name', name) //响应式数据 readonly()修饰name 不希望修改的话
</script>

子组件

<script setup>
  import { inject } from 'vue'
  // 子组件
  const message = inject('message')
  console.log(message) // 'Hello, world!'

  const name = inject('name')
  console.log(name) // 响应式数据

// 如果没有祖先组件提供 "message"
// `value` 会是 "这是默认值"
const value = inject('message', '这是默认值')
</script>

diff算法

vue3 先比较节点数量 再两头比较是否相同。
复杂类型 key锁定 通过最长子序列算法排序判断, 实现更少的修改。

SPA 原理

路由 javascript管理URL和页面状态,实现页面的动态更新,而不需要重新渲染整个页面。
ajax 与服务器进行数据交互, 获取数据, 而不是整个页面。
组件
数据绑定

优点: SPA提供了更流畅的用户体验, 减少了页面刷新的时间, 提高了响应速度。

缺点: SEO不友好, 首屏加载速度慢。
更容易受到XSS攻击。