下面分三块说清楚：HLS（m3u8）、本地 MP4、FMP4 分别是什么，以及它们之间的区别。

一、HLS 源（m3u8）

是什么

• HLS（HTTP Live Streaming） 是苹果提出的一套流媒体传输方案（协议 + 约定），不是某一种”文件格式”。
• 对外暴露的是一个 m3u8 地址（播放列表），例如：https://xxx/live/stream.m3u8。
• 浏览器或播放器先请求这个 m3u8，再根据里面的信息去拉取真正的媒体切片（TS 或 fMP4）。

怎么工作

1. m3u8 文件

   • 纯文本，里面是一份”清单”：
     • 各切片的 URL（相对或绝对）
     • 可选：多码率列表（主列表 + 子列表）
   • 直播时：m3u8 会不断更新，追加新切片、去掉旧切片。

2. 切片

   • 常见两种：
     • TS（.ts）：MPEG-TS 封装，HLS 最传统的形式。
     • fMP4（Fragmented MP4）：HLS 也支持用 fMP4 做切片（和下面说的 FMP4 是同一类格式）。

3. 播放流程

   • 请求 m3u8 → 解析出切片 URL → 按顺序请求切片 → 解封装、解码 → 通过 MSE 喂给 <video> 或直接给 Safari 播放。
   • 在非 Safari 浏览器里，通常用 hls.js 做”请求 m3u8 + 拉切片 + MSE”这件事。

特点

• 协议/方案：定义了”怎么列清单（m3u8）+ 怎么拉切片（HTTP）”。
• 传输：走 HTTP/HTTPS，用普通 GET 请求即可，适合 CDN、缓存。
• 直播/点播：都支持；直播靠不断更新 m3u8、追加新切片。
• 前端：Safari 可原生播 m3u8；其它浏览器一般用 hls.js 等库。

二、本地 MP4（普通 MP4）

是什么

• 就是大家平时说的 MP4 文件（如 video.mp4），标准叫法接近 ISO Base Media（MP4 容器）。
• 一个完整文件里包含：元数据（moov） + 一整段媒体数据（mdat），通常是”整片编码好再封装”的形态。

怎么工作

1. 结构

   • moov：时长、码率、关键帧、索引等，告诉播放器”怎么解码、怎么 seek”。
   • mdat：音视频帧数据。
   • 很多 MP4 会把 moov 放在文件末尾（方便边下边生成），也有放在开头的。

2. 播放

   • 浏览器直接：<video src="/video/360_vr.mp4">。
   • 由浏览器自己请求文件、解析 moov、按需读 mdat、解码播放；不需要 m3u8、不需要 MSE，也不需要 hls.js。

特点

• 格式：一种封装格式（容器），里面一般是 H.264 + AAC。
• 传输：一个 URL 对应一个完整文件，用 HTTP 范围请求（Range）可以拖进度、断点续传。
• 典型用途：本地文件、点播、下载后播放；不做直播（没有”不断追加新切片”的概念）。
• 前端：所有主流浏览器原生支持，无需额外库。

三、FMP4（Fragmented MP4 / fMP4）

是什么

• FMP4 是 MP4 的一种”切片化”用法，还是 MP4 容器，但按片段组织，而不是”一个 moov + 一大块 mdat”。
• 每个”片段”可以独立解码、按顺序拼接播放，适合流式、直播。

怎么工作

1. 结构

   • Init segment（初始化段）：相当于 moov，只发一次，描述编码、分辨率、轨道等。
   • Media segments（媒体段）：一段段的小块数据（几秒到十几秒），按时间顺序追加。
   • 没有”一个巨大的 mdat”，而是很多小段，所以可以边生成边推、边收边播。

2. 谁在用 FMP4

   • HLS：可以用 fMP4 做切片（m3u8 里列的是 fMP4 的 URL），替代 TS。
   • DASH：常用 fMP4 作为媒体格式。
   • WebSocket / 自定义推流：服务端直接推送 fMP4 二进制（如你们用的 BorunFmp4Player），不经过 m3u8，用 MSE 接进 <video>。

特点

• 格式：还是 MP4 容器，但是”分片版”的用法。
• 传输：不绑定协议——可以用 HTTP（HLS/DASH）、也可以用 WebSocket、甚至内存/文件。
• 典型用途：直播、低延迟流、自适应码率；点播也可以。
• 前端：不能直接 video.src = fMP4 文件，需要 MSE（Media Source Extensions） 把 init segment + 多个 media segment 喂给 <video>，所以需要脚本（hls.js、BorunFmp4Player 等）配合。

四、三者对比（简要）

五、和你们项目的关系（一句话对应）

• HLS（m3u8）：后台给一个 m3u8 地址，前端用 hls.js 去拉 m3u8 和切片（TS 或 fMP4），再通过 MSE 播。——你们现在用的就是这种。
• 本地 MP4：后台或静态服务给一个 .mp4 地址，前端直接 src="/video/360_vr.mp4"，不接流、不切片。
• FMP4：
  • 要么作为 HLS 的切片格式（m3u8 里列的是 fMP4），仍由 hls.js 拉；
  • 要么由后台通过 WebSocket 直接推 fMP4 片段，前端用 BorunFmp4Player + MP4Box 接 MSE 播放，不走 m3u8。

如果你愿意，我也可以按”协议/格式/前端代码”画一张更简的对比图（或只针对 HLS vs 本地 MP4 vs FMP4 三种”源”的差异再精简成一页说明）。

Vue

初始化

vue

1
2

<script src="https://unpkg.com/vue@next"></script>
<div id="root"></div>

js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

const app = Vue.createApp({
    data() {
      return {
        inputValue: '',
        list: []
      }
    },
    methods: {
      handleAddItem() {
        this.list.push(this.inputValue);
        this.inputValue = '';
      }
    },
    template: `
      <div>
        <input v-model="inputValue" />
        <button
          v-on:click="handleAddItem"
          v-bind:title="inputValue"
        >
          增加
        </button>
        <ul>
          <todo-item
            v-for="(item, index) of list"
            v-bind:content="item"
            v-bind:index="index"
          />
        </ul>
      </div>
    `
  });
  app.component('todo-item', {
    props: ['content', 'index'],
    template: '<li>{{index}} -- {{content}}</li>'
  });
  app.mount('#root');

MVVM设计模式，M -> Model 数据， V -> View 视图， VM -> ViewModel 视图数据连接层

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// createApp 表示创建一个 Vue 应用, 存储到 app 变量中
// 传入的参数表示，这个应用最外层的组件，应该如何展示
// MVVM 设计模式，M -> Model 数据， V -> View 视图， VM -> ViewModel 视图数据连接层
const app = Vue.createApp({
  //M -> Model 数据
  data() {
    return {
      message: 'hello world'
    }
  },
  //V -> View 视图
  template: "<div>{{message}}</div>"
});
// vm 代表的就是 Vue 应用的根组件
const vm = app.mount('#root');

vm.$data.message
vm.$option

生命周期函数

生命周期函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

 //生命周期函数:在某一时刻会自动执行的函数
 const app = Vue.createApp({
   data() {
     return {
       message: 'hello world'
     }
   },
   //在实例生成之前
beforeCreate(){
},
   //在实例生成之后
created(){
},
//在组件内容被渲染到页面之前
beforeMount(){
},
//在组件内容被渲染到页面之后
mounted(){
},
//当数据发生变化时
beforeUpdate(){
},
//当数据发生变化,页面重新渲染之后
updated(){
},
//当vue应用失效时
beforeUnmount(){
},
//当vue应用失效,DOM完全销毁之后
unmounted(){
},
   template: "<div>{{message}}</div>"
 });
 // vm 代表的就是 Vue 应用的根组件
 const vm = app.mount('#root');

常用模板语法

• 差值表达式
• v-once 只绑定第一次
• v-html
• v-bind (:) 绑定到标签的属性,使用动态数据
• v-on (@) 绑定到标签的事件 (方法放在methods)
• v-if v-show
• v-model 数据绑定
• 动态参数
• 修饰符
  动态参数,动态属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

const app = Vue.createApp({
    data() {
      return {
        name: "title",
        msg:"111",
        event:"cilck"
      }
    },
    methods: {
      handleClick() {
        alert('click')
      }
    },
    template: `<div :[name]="msg" @[event]="handleClick"></div>`
  });

修饰符.prevent阻止默认行为 等价于e.prevnetDedault()

1
2
3
4
5

template: `
      <form action="https://www.baidu.com" @click.prevent="handleClick">
        <button type="submit">提交</button>
      </form>
    `

数据,方法,计算属性和侦听器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

// data & methods & computed & watcher
 // computed 和 method 都能实现的一个功能，建议使用 computed，因为有缓存
 // computed 和 watcher 都能实现的功能，建议使用 computed 因为更加简洁
 const app = Vue.createApp({
   data() {
     return {
       message: "hello world",
       count: 2,
       price: 5,
       newTotal: 10,
     }
   },
   //侦听器 侦听data值的变化,可以添加定时器
   watch: {
     // price 发生变化时，函数会执行
     price(current, prev) {
       this.newTotal = current * this.count;
     }
   },
   //计算属性
   computed: {
     // 当计算属性依赖的内容发生变更时，才会重新执行计算
     total() {
       return Date.now() + this.count;
       // return this.count * this.price
     }
   },
   //差值表达式和@绑定事件时可以直接使用
   methods: {
     formatString(string) {
       return string.toUpperCase();
     },
     // 只要页面重新渲染，才会重新计算
     getTotal() {
       return Date.now();
       // return this.count * this.price;
     },
   },
   template: `
    <div>{{total}} {{message}} {{newTotal}} </div>
   `
 });
 const vm = app.mount('#root');

样式

1
2
3
4
5
6
7
8

<style>
    .red {
      color: red;
    }
    .green {
      color: green;
    }
  </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

const app = Vue.createApp({
   data() {
     return {
       classString: 'red',
       classObject: { red: false, green: true },
       classArray: ['red', 'green', {brown: false}],
       styleString: 'color: yellow;background: orange',
       styleObject: {
         color: 'orange',
         background: 'yellow'
       }
     }
   },
   template: `
     <div :style="classString"> Hello World </div>
     <div :style="classArray"> Hello World </div>
     <div :style="classArray"> Hello World </div>
     <div :style="styleString"> Hello World </div>
     <div :style="styleObject"> Hello World </div>
  <demo />
   `
 });
 app.component('demo', {
   template: `
     <div :class="$attrs.class">one</div>
     <div :class="$attrs.class">two</div>
   `
 })

条件渲染

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

const app = Vue.createApp({
    data() {
      return {
        show: false,
        conditionOne: false,
        conditionTwo: true
      }
    },
    template: `
      <div v-if="show">Hello World</div>
      <div v-if="conditionOne">if</div>
      <div v-else-if="conditionTwo">elseif</div>
      <div v-else>else</div>
      <div v-show="show">Bye World</div>
    `
  });

列表渲染

list (item,index) in listArray
对象 (value, key, index) in listObject
:key唯一key,提高性能,复用DOM

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

const app = Vue.createApp({
    data() {
      return {
        listArray: ['dell', 'lee', 'teacher'],
        listObject: {
          firstName: 'dell',
          lastName: 'lee',
          job: 'teacher'
        }
      }
    },
    methods: {
      handleAddBtnClick() {
        // 1. 使用数组的变更函数 push, pop, shift, unshift, splice, sort, reverse
        // this.listArray.push('hello');
        // this.listArray.pop();
        // this.listArray.shift();
        // this.listArray.unshift('hello');
        // this.listArray.reverse();
        // 2. 直接替换数组
        // this.listArray = ['bye', 'world']
        // this.listArray = ['bye', 'wolrd'].filter(item => item === 'bye');
        // 3. 直接更新数组的内容
        // this.listArray[1] = 'hello'
        // 直接添加对象的内容，也可以自动的展示出来
        // this.listObject.age = 100;
        // this.listObject.sex = 'male';
      }
    },
    template: `
      <div>
        <template
          v-for="(value, key, index) in listObject"
          :key="index"
        >
          <div v-if="key !== 'lastName'">
            {{value}} -- {{key}}
          </div>
        </template>
        <div v-for="item in 10">{{item}}</div>
        <button @click="handleAddBtnClick">新增</button>
      </div>
    `
  });

事件绑定

1

<div @click="handleClick(), handleClick2()">123</div>

修饰符

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// event, $event
// 事件修饰符：stop, prevent, capture, self, once, passive
// 按键修饰符：enter, tab, delete, esc, up, down, left, right
// 鼠标修饰符：left, right, middle
// 精确修饰符：exact
const app = Vue.createApp({
  methods: {
    handleClick() {
      console.log('click')
    },
  },
  template: `
    <div>
      <div @click.ctrl.exact="handleClick">123</div>
    </div>
  `
});

双向数据绑定

v-model

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

// input, textarea, checkbox, radio, select
 // 修饰符 lazy, number, trim
 const app = Vue.createApp({
   data() {
     return {
       message: 'hello',
       checkbox1:true,
       checkbox2:[]
     }
   },
   template: `
     <div>
       {{message}}
       <input v-model="message"  />
       <textarea v-model="message"  />
       <input type="checkbox" v-model="checkbox1"  />
       <input type="radio" v-model="checkbox1"  />
       <select v-model="message" >
        <option>A</option>
        <option>B</option>
        <option>C</option>
       </select>
       <select v-model="message" multple>
        <option>A</option>
        <option>B</option>
        <option>C</option>
       </select>
       <input v-model.lazy="message"  />
     </div>
   `
 });

ref获取DOM

ref获取DOM节点

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// ref 实际上是获取 Dom 节点引用 的一个语法
const app = Vue.createApp({
  data() {
    return { count: 1}
  },
  mounted:{
   this.$refs.count
  },
  template: `
    <div>
      <button ref="count">Add</button>
    </div>
  `
});

ref获取DOM节点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

 // ref 实际上是获取 Dom 组件引用 的一个语法
 const app = Vue.createApp({
	data() {
		return {
			count: 1
		}
	},
	mounted() {
		this.$refs.common.sayHello()
	},
	template: `
	   <div>
		 <common-item ref="common"/>
	   </div>
	`
});
app.component('common-item', {
	methods: {
		sayHello(){
			console.log("hello");
		}
	},
	template: `<div>sayHello</div>`
});

provide / inject

传一个值给子组件的子组件,可以多次用动态传值props接受来完成,也可以用Provide / Inject

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

const app = Vue.createApp({
  data() {
    return { count: 1}
  },
  template: `
    <div>
      <child :count="count" />
    </div>
  `
});
app.component('child', {
  props: ['count'],
  template: `<child-child :count="count"/>`
});
app.component('child-child', {
  props: ['count'],
  template: `<div>{{count}}</div>`
});

Provide / Inject完成上述例子,同时provide传递的数据是一次性的,不是双向数据绑定的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

// provide / inject
const app = Vue.createApp({
  data() {
    return { count: 1}
  },
  provide() {
    return {
      count: this.count,
    }
  },
  template: `
    <div>
      <child :count="count" />
      <button @click="count += 1">Add</button>
    </div>
  `
});
app.component('child', {
  template: `<child-child />`
});
app.component('child-child', {
  inject: ['count'],
  template: `<div>{{count}}</div>`
});

JS 基础

精读
《看透JavaScript_原理_方法与实践》.pdf

Js是什么

• 面向对面的语言
• 脚本语言
• 事件驱动的语言

面向对象

• 网页中的大部分东西都是对象,
• 同时js中也有为了方便操作自身提供的对象
• 可以自定义对象,js中的函数也是一种对象,js的目标就是操作这些对象

脚本语言

脚本主要功能是操作不是创造,js只是修改一个页面,而且js不像c之类的语言有main函数,真正的入口函数main在浏览器程序里。
脚本语言是一堆命令的集合,一般会有个解释器,负责从头到尾所有语句的解释,然后根据解释后端语句进行操作。例如：给一个页面所有文本框添加监听函数，解释器会找到所有文本框，然后添加监听函数，这就叫解释执行。他是由解释器将内容翻译后根据其含义进行相关操作的，也就是操作是由解释器完成的，不是把脚本编译后来执行的
js是比较复杂的脚步语言，他和编译型语言一样，有自己的变量、函数，js执行过程和编译器一样首先生成语法树，然后解释器生成一条条中间码，最后一条条执行。
随着前端功能发展的越来越复杂，解释器进化成JavaScript引擎。

事件驱动

事件驱动指js引擎不是在看到代码之后马上执行,而是在合适的时间才去执行。
指当某个时间发生之后，相应的操作才会执行，这就是事件驱动。例如一个输入框的内容发生了变化， 这就是一个事件。
事件驱动包含三个关键内容：事件，事主和处理方法。

Js的三个内容

• js
  • ES
  • DOM
  • BOM

ECMAScript

2015 年 6 月份发布，正式名称是 ES2015 ，因为是第 6 版，所以也可以称为 ES6 。为了规范不同浏览器厂商对js脚本语法的实现。

DOM

DOM是document Object Model的缩写，表示文档对象模型，定义了文档对象的结构及其操作方法等内容。
ES 是一种面向对象的语言，它要操作的目标是对象，而 DOM 就是将 HTML 文档转换（或者称对应）成 ES 可以操作的对象的一种模型 。

BOM

JS 的功能并不仅限于对文档的操作，有时候还 需要对浏览器直接进行操作，例如，查 看当前页面的 URL 地址 、控制浏览器前进或后退，以及从 H TML5 中获取位 置信息和Web Socket 等都需要对浏览器进行操作，常用的alert 、 setTimeout 和 setlnterval 也需要浏览器来完成。
ES 对浏览器操作的处理方法和对文档操作的处理方法相同，依然是将浏览器转换为 一个对象，这就是浏览器对象（ Browser Object ），它所对应的模型称为浏览器对象模型 (Browser Object Mode, BOM ）

HTML5

HTML5 的主要贡献是扩展了 HTML 的标签（同时也去掉了 一些旧有的标签），例如，新增 section、article 、header 、footer 、audio 、video 以及备受关注的 canvas 标签，当然相应地扩展了 DOM 。 另外HTML5 也对 BOM 进行了扩展，使 JS 操作浏览器的功能更加强大，而且促进了BOM 的标准化 。

JS的结构

JS 的核心是对象，每个对象都可以包含0个或多个由名值对组成的属性。
!Drawing 2024-04-13 15.01.30.excalidraw
对象的属性有两种类型:基础类型(直接量)和对象类型.基础类型的属性不再包含属性,对象类型的属性还可以包含自己的属性,此时,该对象既是一个对象另一个对象的属性。
JS 中的对象又可以分为 function 和 object 两种类型（注意都是小写），这 一点非常重要 。
💡JS 中的 object 类型对象是使用 function 类型对象创建的。JS中经常使用的 String 、Array 和 Date 等对象其实 都是 function 类型的对象，就连Object 对象也是function类型的对象，而使用它们创建出来的对象就是object类型。可以使用typeof查看。

• typeof
  • number
    • Number
    • NaN
  • string
    • string
  • object
    • Object
    • null
    • Array
  • function
    • Function
  • undefined
    • Undefined
  • boolean
    • Boolean
  • symbol
    • Symbol

Js的内存模型

JS 的本质是一个对象，一个对象可以包含多个属性，对象的属性可以分为直接量和对象 两种类型，而对象又分为 object 对象和 function 对象两种类型。
直接量和对象两种类型的属性在内存中的保存方式不同 。 直接量是直接用两块内存分别保存属性名和属性值，而对象需要三块内存，分别保存属性名、属性地址和属性内容。
!Drawing 2024-04-13 15.41.18.excalidraw
对于对象类型的属性来说，属性名只是指向了保存对象的内存地址，而并不是指向实际的对象，从下面的例子就可以看出这一点 。

1
2
3
4
5
6
7
8

function F() { this.v = 1; }
var f = new F () ; 
var fl = f; 
console.log(fl.v);//输出 1
fl.v=2 ; 
console.log(f.v); //输出 2
f = null; 
console.log(fl.v); //输出 2

!Drawing 2024-04-13 23.18.15.excalidraw

技术栈

整个大前端技术栈还是非常庞大复杂的，不过总的来说还是万变不离其宗，发现问题解决问题。

• 基础知识
  • JavaScript 00 JavaScript
  • css 00 CSS
  • HTML5 00 JavaScript
• 前端框架/库
  • vue3 Codes/vue/00 Vue
  • element-ui | element+
  • electron 00 electron
  • jquery
  • layui
  • bootcss
• 前端工程化 00 前端工程化
  • 17 TypeScript
  • 前端构建工具
    • Webpack
    • Grunt
    • Vite
  • CSS 预处理器
    • sass
    • lass
  • eslint
  • 状态管理
    • vuex
    • pinia
• 前端可视化库
  • d3 01 d3
  • echarts
  • baidu/map
  • leaflet
• 综合能力
  • 00 网络
  • Codes/前端工程化/git
  • 编程英文
  • ps
  • python
• 算法
• 其他
  • qt
  • powershell

核心知识点

本文统计所有前端核心知识点，需要熟背，同时也是方便打印

links

JavaScript方法.xlsx
前端核心.docx- 核心知识点概览

toc

• 核心知识点概览
• JavaScript 核心方法
• JavaScript Date&Math 方法
• 宿主函数
• 前端各技术的比较
  • vue2 和 vue3
  • 不同前端框架
  • vite 和 webpack
  • Vuex 和 pinia
  • es6+/css3/html5
  • ts 和 js
  • canvas 与 svg

截图

核心知识点概览.png
JavaScript Date&Math 方法.png
宿主函数.png
JavaScript核心方法.png

前端

JavaScript & html

1. function 创建(2),作用(3),子类型(3)
2. object 创建(3),属性(3),创建属性,属性的描述 2*4
3. Array of from isArray length prototype
4. Array.prototype 修改添加 5 ，查找 5，遍历 4，排序 2，合并，其他
5. Object 创建 2，获得对象的属性 5，修改对象的属性 2，其他 3
6. Object.prototype constructor, hasOwnProperty, isPrototypeOf,propertyIsEnumerable,toString,valueOf
7. String length, name, ptototype, fromCharCode, fromCodePoint, raw
8. String.prototype 查找 11 ，拼接，截取 3，替换，转换 5，分割，填充，重复
9. RegExp 属性 source，flags，global，ignoreCase，multiline，lastIndex
10. RegExp 方法 exec，test，toString
11. Promise 状态 pending, fulfilled，rejected ；方法 all race
12. 方法统计
    • 正则相关 match，matchAll，replace，search，split ，includes，startsWith 和 endsWith
    • 回参新数组 4
    • 修改原数组 8
13. 闭包 嵌套函数，内部函数可以引用外部函数的参数和变量。参数和变量不会被垃圾回收机制收回 js闭包
14. 原型链 原型链是 JavaScript 中实现继承的主要方式之一。在 JavaScript 中，每个对象都有一个内部属性，称为 Prototype，这个属性引用了另一个对象。这个被引用的对象被称为原对象的“原型”。通过这种方式，对象可以继承和共享属性和方法。原型链
    1. 原型对象 每个 JavaScript 对象都有一个原型对象，除了 Object.prototype，它是所有对象的最终原型。
    2. 对象的原型访问 可以通过对象的 __proto__ 属性或者 Object.getPrototypeOf(obj) 方法访问一个对象的原型。
    3. 继承 当尝试访问一个对象的属性或方法时，如果该对象本身没有这个属性或方法，JavaScript 引擎会沿着原型链向上查找，直到找到该属性或方法或者到达原型链的末端
    4. constructor 在 JavaScript 中，constructor 属性是每个对象都具有的一个属性，它指向创建该对象的构造函数。这个属性在对象的原型上定义，因此所有通过同一个构造函数创建的对象都会共享同一个 constructor 属性。
    5. prototype
    6. Prototype __proto__
    7. 四个等式
15. 运算符js运算符
    • instanceof object instanceof constructor
    • typeof（9）typeof obj 回参 string
    • ++前置后置
    • delete object['property'] 回参布尔
    • ?? ??=
16. 运算顺序js运算顺序 括号，一元，算数，关系，相等，逻辑，赋值，逗号
17. 类型转换 js类型转换
18. js 选择器 5
    • getElementById
    • getElementsByClassName
    • getElementsByTagName
    • querySelector
    • querySelectorAll
19. 事件循环 （Event Loop）16 多线程
    • 事件循环：如果调用栈为空，事件循环会从微任务队列中取出任务执行，直到微任务队列为空。微任务执行完成后，事件循环会检查调用栈是否为空。如果调用栈为空且微任务队列为空，事件循环会从任务队列中取出任务执行。
    • 调用顺序 调用栈 (后进先出 )->任务队列(先进先出) 不等于执行顺序
      • 同步任务 调用栈
      • 微任务 微任务队列 Promise 回调 MutationObserver
      • 宏任务 任务队列 setTimeout setInterval I/O UI 渲染
      • requestAnimationFrame
      • 重绘
20. es6 （5）98 es6新内容
    1. 类
    2. 模块
    3. 新增语法 6
    4. 新增对象 5/7
    5. 原有对象新增属性
21. this （6）
    • 全局
    • 普通函数
    • 对象的属性
    • 构造函数
    • 箭头函数
    • call，apply，bind 逆向调用
22. 正则正则表达式
    • 表达式 3 [abc] [0-9] (x|y)
    • 元字符 \d \s \b \uxxxx ^ $ . \w
    • 量词 6 n+ n* n? {n} {n,} {n, m}
23. HTML5 html5新功能
    1. 语义化标签
    2. 多媒体 2 多媒体
    3. canvas 和 svg canvas
    4. 表单增强 3
    5. Web 存储 3
    6. 地理位置Geolocation API地理位置
    7. WebSocket 15 WebSocket
    8. 拖放 API Drag and Drop API 拖拽
    9. 异步脚本加载
       • <script async> 下载完成后立即执行 多个 async 脚本的执行顺序不确定
       • <script defer> 延迟到 HTML 解析完成后执行 多个 defer 脚本会按顺序执行
24. Cookie 属性cookie
    1. Expires < Max-Age
    2. Domain
    3. Path
    4. Secure
    5. HttpOnly
    6. SameSite
25. 严格模式 5 js严格模式
    1. with
    2. arguments.callee
    3. 删除不可删除的属性会报错
    4. eval
    5. this 指向全局对象
26. DOM 事件09 DOM事件
    1. 事件：用户界面，鼠标事件，键盘，表单
    2. 事件流：捕获阶段，目标阶段，冒泡阶段
    3. 事件冒泡（Event Bubbling）是浏览器中事件传播的一种机制，指的是当一个事件在 DOM 树中发生时，该事件会从事件的目标元素（事件的起始点）开始，逐级向上传播到根元素的过程。
    4. 阻止 e.stopPropagation()，e.cancelBubble = true (IE)
    5. 阻止默认 e.preventDefault()，e.returnValue = false  (IE)
27. canvas
    1. 初始化
    2. 方法
       1. 绘制矩形
       2. 绘制路径
28. 内部函数
29. ie
30. observer
    1. Event Observers
    2. Mutation Observers（DOM 变化监听器）
    3. Intersection Observers（视口监听器）
    4. Resize Observers（尺寸监听器）
    5. Performance
31. Performance API

CSS

1. CSS 选择器 CSS 选择器
   1. 基本选择器 #.tag ，
   2. 组合选择器 后代 ，子代 >，相邻兄弟 +，通用兄弟 ~
   3. 伪类选择器 链接，结构 :nth-child(n)，动态 :focus
   4. 伪元素选择器 ::before
2. CSS 选择器权重! important 10000，内联 1000，id100，类属性伪类 10，元素伪元素 1，通用，子，兄弟，后代 0
3. CSS 动画 CSS 动画
   1. 渲染过程 样式计算、布局、绘制和合成
   2. 关键帧动画 @keyframes+animation
   3. GPU 加速 transform，opacity ;will-change
   4. 重排
      1. DOM 结构变化
      2. 元素尺寸变化
      3. 内容变化
      4. 样式计算
      5. 其他滚动条，元素聚焦
   5. 重绘 是指在元素的几何属性没有变化，但是元素的外观（如颜色、阴影、边框颜色等）发生变化时，浏览器需要重新绘制元素的过程 CSS滤镜效果
4. CSS 居中居中
   1. 居中 水平 3，垂直 2
   2. 水平垂直 flex，grid，绝对定位+transform，table-cell，margin
5. CSS3 CSS3 新内容
   1. 布局相关 2
   2. 动画与效果 3
   3. 视觉效果 3
   4. 字体与文本 2
   5. 其他特性 3
6. flex 布局flex
   1. 容器 flex container
      • flex-direction：定义主轴的方向（是水平还是垂直）。
      • flex-wrap：定义项目是否应该在必要时换行。
      • flex-flow：flex-direction和flex-wrap的简写形式。
      • justify-content：定义项目在主轴上的对齐方式。
      • align-items：定义项目在交叉轴上的对齐方式。
      • align-content：定义多行项目在交叉轴上的对齐方式。
   2. 项目 flex items
      • order：定义项目的排序顺序。数值越小，越靠前。
      • flex-grow：定义项目的放大比例。如果容器有多余的空间，项目可以放大。
      • flex-shrink：定义项目的缩小比例。如果容器空间不足，项目可以缩小。
      • flex-basis：定义项目在主轴上的初始大小。
      • align-self：允许单个项目有与其他项目不同的对齐方式。
      • flex：flex-grow、flex-shrink和flex-basis的简写形式，默认值为0 1 auto。
   • 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做 main start，结束位置叫做 main end；交叉轴的开始位置叫做 cross start，结束位置叫做 cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
7. 盒模型盒模型
   1. content 内容区域
   2. padding 内边距
   3. border 边框
   4. margin外边距 ：上2. 流布局 Flow Layoutyout
   • 块级元素（Block-level Elements）
     • 独占一行
     • 高度宽度
     • 内边距和外边距
   • 行内元素（Inline Elements）
     • 同一行显示
     • 高度宽度由内容决定
     • 内边距和外边距左右
   • 行内块元素（Inline-block Elements）
     • 同一行显示
     • 高度宽度
     • 内边距和外边距
   • display
   • float浮动元素会脱离文档流，可能导致父元素高度塌陷。
   • clear需要通过清除浮动（clear: both;）来解决
8. 高度塌陷
   • 原因
     • 浮动元素：当父元素只包含浮动的子元素时，父元素的高度会塌陷，因为浮动元素脱离了文档流
     • 绝对定位：如果子元素使用绝对定位 (position: absolute)，它将脱离文档流，这也会导致父元素的高度不能正确计算
     • 行内元素：父元素仅包含行内元素（如 <span> 等），这些元素的高度会很小，从而导致父元素高度塌陷。
     • flexbox 特殊情况：在使用 Flexbox 但没有适当地设置子元素的 Flex 属性时，可能导致子元素无法正确占据父元素的高度
   • 解决方案
     • 清除浮动：可以通过在父元素上添加一个 .clearfix 类，并在CSS中定义相应的样式来清除浮动元素对父容器的影响
     • 使用伪元素：在父元素的 ::after 伪元素中添加 content: ""; display: table; clear: both; 样式，以清除浮动
     • 设置父元素高度：
     • 使用 min-height
9. 主题切换
10. CSS 变量
11. 相对绝对

网络

8. TCP/IP 协议
   1. 链路层 以太网、Wi-Fi、PPP
   2. 网络层 IP
   3. 传输层 TCP、UDP
   4. 应用层 HTTP、FTP、DNS、SSH
9. OSI（开放系统互连）七层模型：物理层，数据链路层，网络层，传输层，回话层，表示层，应用层
10. 协议
    1. tcp（传输控制协议）提供可靠的、面向连接的、有序的字节流服务，适用于对数据可靠性要求较高的场景
    2. udp 提供无连接的、不可靠的、基于数据报的服务，适用于对实时性要求较高的场景
    3. ip为网络中的设备提供唯一的地址标识（IP 地址），并负责将数据包从源主机传输到目标主机
    4. http 客户端和服务器之间的通信
    5. dns 互联网中用于将域名转换为IP地址的服务
11. http HyperText Transfer Protocol，超文本传输协议
    • http 请求 请求头，请求体；
    • http 响应 状态行，相应头，响应体
    • 特点 无状态，无连接，媒体独立，简单快速
    • http2/3 二进制分帧、多路复用、服务器推送、头部压缩，性能和可靠性
    • https Secure
12. WebSocket 在单个 TCP 连接上进行全双工通信的方式
    • 特点
      • 长连接 持久连接
      • 全双工通信 服务器和客户端之间同时进行数据的发送和接收
      • 基于 HTTP 的握手->WebSocket 握手-> WebSocket 连接
      • 支持二进制数据传输Blob 或 ArrayBuffer
    • WebSocket API
      • 属性
        • readyState 0,1,2,3
        • bufferedAmount表示已发送但尚未被浏览器传输的数据量（以字节为单位）
        • extensions表示服务器选择的 WebSocket 扩展
        • protocol
        • url
      • 方法
        • constructor(url, [protocols])
        • send(data) 向服务器发送数据
        • close([code], [reason])
      • 事件 socket.addEventListener('open',(e)=>{}) 等价 ws.onopen
        • open：当 WebSocket 连接成功建立时触发。
        • error：当 WebSocket 连接发生错误时触发。
        • message：当从服务器接收到数据时触发。
        • close：当 WebSocket 连接关闭时触发。
    • 工作流握手, 数据传输，关闭
    • 心跳用于维持客户端与服务器之间长连接的一种保活机制
      • 客户端建立连接
      • 客户端定时发送心跳数据包
      • 服务器在设定时间内没有收到心跳，会发送关闭连接请求
      • 服务器定时发送心跳数据包，客户端接收并返回响应
      • 客户端在设定时间内没有收到心跳，会重新连接

Vue

13. 基础 01 Vue 基础
    1. 初始化
    2. 常用模板语法
    3. 生命周期函数
    4. 数据和方法 data() & methods
    5. 计算属性和侦听器 computed & watcher
14. 组件 02 Vue 组件
    1. 组件 component
       1. 全局，局部
       2. 命名方式
    2. 组件传值
    3. 插槽 slot 和具名插槽
    4. 动态组件和异步组件
15. 动画
16. 高级语法 04 Vue 高级语法
    1. 混入 mixin
    2. 自定义指令directive
    3. 传送门 teleport
    4. render
    5. plugin
17. composition api 05 Vue3 Composition API
    1. setup
    2. ref 和 reactive
    3. toRef 和 toRefs
    4. context 参数
    5. 计算属性 computed
    6. watch 和 watchEffectect
    7. provide, inject
    8. 模版 ref
18. Vue 特点
    1. 数据绑定
    2. 虚拟 DOM
    3. 事件
    4. 计算属性和侦听器
    5. 指令系统
    6. keep-alive
    7. $属性 6，$ 方法 8 vue的$
19. Vue 组件通信
    • props 和 $emit
    • none-props 和 $attrs
    • 插槽 slot
    • Vuex/Pinia
    • provide/inject
20. Vue 生命周期函数
    1. Vue2
       • 创建 beforeCreate，created
       • 挂载 beforeMount，mounted
       • 更新 beforeUpdate，updated
       • 销毁 beforeDestroy，destroyed
       • keep-alive activated，deactivated
    2. Vue3
       • setup 在 created，移除创建 2 个
       • 挂载beforeMount，mounted
       • 更新 beforeUpdate，updated
       • 销毁 beforeUnmount，unmounted
       • keep-alive activated，deactivated
       • 渲染onRenderTracked，onRenderTriggered
21. Vuex
    • state 存储应用的状态
    • mutations 用于同步修改状态的方法
    • actions 用于异步操作，最终通过调用 mutations 修改状态
    • getters 类似于 Vue 的计算属性，用于派生状态
    • 顺序
      1. dispatch 方法，派发一个 action，名字叫做change
      2. 感知到 change 这个action，执行store 中 actions 下面的 change 方法
      3. commit 提交一个叫做 change 的数据改变
      4. mutation 感知到提交的change改变，执行 change 方法改变数据
22. pinia State（状态）：存储需要共享的数据。Getters（计算属性）：基于状态的派生值。Actions（操作方法）：用于修改状态的函数
23. Vue 插件 Vue-devtools，router，Vuelidate，Axios，状态管理，lazyload

其他

1. 兼容性 兼容性解决方案 前端兼容性
   • CSS 解析差异 3
   • JavaScript API
   • 响应式布局
   • 图片兼容性
   • 字体兼容性性
2. 安全 https，数据加密，安全储存，权限控制，输入验证
3. 跨域 CORS 域名、协议或端口不同
   1. CORS 头部
   2. jsonp 淘汰
   3. 文档域
   4. PostMessage
   5. WebSocket
   6. 代理服务器
4. 登录鉴权
   1. cookie 自动携带，服务器存储；安全风险，太小，
   2. token（JWT JSON Web Token）无状态，安全，支持跨域；需要手动携带，有存储风险
   3. Session 安全，服务控制；服务器负担，跨域限制
   4. OAuth2.0 标准化，安全；复杂
5. electron00 electron
   1. 常见 API
      1. app 生命周期事件，Electron 应用的入口模块
      2. BrowserWindow创建和管理应用中的窗口 webPreferences
   2. 通信 ipcMain 和 ipcRenderer
   3. 开发流程
   4. 其他模块
      1. dialog
      2. menu 和 MenuItem 模块
      3. shell 模块用于在系统中打开外部链接、文件管理器等
      4. clipboard 模块用于读写系统剪贴板的内容
      5. powerMonitor 模块用于监听系统电源状态，如系统唤醒、待机
      6. systemPreferences 模块用于访问系统偏好设置，如颜色模式
      7. globalShortcut 模块用于注册全局快捷键，即使应用不活跃时也能捕获键盘输入
      8. fs
      9. chokidar 监听文件变化
   5. 缓存
   6. 打包
6. D3 Data-Driven Documents d3
   1. 选择元素select,selectAll
   2. 数据绑定data
   3. 设置属性和样式styleattr
   4. 事件监听on
   5. 动画和过渡transition()
   6. 加载外部数据
7. SVG（可缩放矢量图形）setAttribute
   1. 特点
      1. 矢量图形
      2. 可交互性
      3. 可嵌入性
8. 性能
   1. 网络
      1. 减少 HTTP 请求次数
         1. 合并文件
         2. 内链资源：小图片或 cssjs 代码内链或 data URI
         3. 按需加载代码分割Code Splitting，懒加载Lazy Loading
      2. 缓存优化
         1. 合理的缓存策略：静态资源 Cache-Control 强缓存
         2. CDN？
         3. 预加载 link preload&prefetch
      3. 减少资源大小
         1. 图片优化：现代图片格式，压缩图片大小，雪碧图
         2. 代码压缩：代码压缩，移除注释，空格，tree sharing
   2. 开发
      1. 优化 html 和 css
         1. 重排重绘减少，尽量使用 GPU 加速友好的 transform 和 opacity
         2. CSS 预处理器
         3. 避免选择器过深，3-4 作用
      2. 优化 JavaScript
         1. 减少全局变量
         2. 优化 DOM 操作，减少操作 DOM 次数
         3. web workers 来计算耗时任务
         4. 避免内存泄露
            1. 定时器
            2. 事件监听器
            3. DOMNODE
         5. 防抖截流
         6. SSR 服务端渲染
         7. 虚拟滚动
         8. 真分页
      3. 使用现代化工具
         1. 渲染优化
            1. 计算属性和监听器可以减少组件渲染
            2. v-if 和 v-show
            3. 虚拟滚动
            4. 虚拟 DOM，diff 算法
         2. 加载优化
            1. 路由懒加载
            2. 异步组件
            3. 代码分割
         3. 状态管理
            1. 缓存计算结果
         4. 响应式优化
            1. 使用 shallowReactive 和 shallowRef
         5. 组件优化
            1. keep-alive 组件或路由
            2. 减少过于复杂的组件
         6. 工具和策略
            1. vue devtools
               1. 组件加载时间
               2. 录制动作：滚动，按钮
            2. SSR
            3. PWA
            4. Performance API
10. TS
11. 浏览器渲染流程
12. 命名规范

编程英文

直接从翻译软件生词本导出的 csv 文件

00 CSS

📍 导航：前端开发 MOC > CSS

• CSS 选择器
• CSS 动画
• CSS 预处理器
• CSS3 新内容
• display
  • flex
  • grid
• 居中
• 响应式
• 盒模型

CSS 常见问题

元素隐藏

在CSS中，有多种方法可以让一个元素隐藏，以下是几种常见的方法：
一、使用display属性

1. display: none;
   • 这是最常用的隐藏元素的方法。当设置为none时，元素不会在页面中占据任何空间，就像它不存在一样。例如：

     1 2 3

     .hidden-element { display: none; }

     在HTML中，假设有一个<div>元素：

     1	<div class="hidden-element">这是一段隐藏的文字</div>

     这个<div>元素会被完全隐藏，页面布局会忽略它的存在，周围的元素会像它不存在一样进行布局。

二、使用visibility属性

1. visibility: hidden;
   • 使用这个属性隐藏元素时，元素在页面中仍然占据空间，只是变得不可见。例如：

     1 2 3

     .invisible-element { visibility: hidden; }

     对应的HTML代码：

     1	<div class="invisible-element">这是一段不可见但占位的文字</div>

     这个<div>元素虽然看不见，但是它原来所占据的位置还在，周围的元素布局不会改变。这种方法适用于需要保留元素占位，但又不想显示内容的场景。

三、使用opacity属性

1. opacity: 0;
   • 将元素的透明度设置为0，也可以达到隐藏的效果。元素看起来是透明的，但实际上它还在页面中，并且仍然可以响应事件（如点击事件）。例如：

     1 2 3

     .transparent-element { opacity: 0; }

     HTML示例：

     1	<button class="transparent-element">点击我</button>

     这个按钮看起来是透明的，但是用户仍然可以点击它。这种方法在制作一些特殊的交互效果时很有用，比如制作一个透明的点击区域。

四、使用position和left/top属性（将元素移出可视区域）

1. 通过将元素的位置设置到页面可视区域之外，也可以实现隐藏效果。例如：

   1 2 3 4

   .out-of-view-element { position: absolute; left: -9999px; /* 或者 top: -9999px */ }

   HTML代码：

   1	<div class="out-of-view-element">这是一段移出可视区域的文字</div>

   这个<div>元素被绝对定位到页面左侧很远的地方，超出了用户的可视范围，从而达到了隐藏的目的。这种方法在一些特殊的布局技巧中会用到，比如制作屏幕阅读器友好的隐藏文本。

高度塌陷

浏览器兼容性造成的高度塌陷问题通常是由于不同浏览器对CSS属性的解析和渲染存在差异导致的。以下是一些常见的原因和解决方案：

造成高度塌陷的原因：

1. 浮动元素：当父元素只包含浮动的子元素时，父元素的高度可能会塌陷，因为浮动元素脱离了文档流。
2. 绝对定位：绝对定位的子元素也会导致父元素的高度不能正确计算，因为它们不再占据空间。
3. 行内元素：父元素仅包含行内元素时，这些元素的高度较小，可能导致父元素高度塌陷。
4. Flexbox布局的特殊情况：在使用Flexbox布局时，如果未正确设置容器的高度，可能会导致子元素高度不确定。

解决方案：

1. 清除浮动（clearfix）：
   • 使用伪元素清除浮动，创建一个新的块级格式化上下文（BFC），从而包含浮动元素。例如：

     1 2 3 4 5

     .clearfix::after { content: ""; display: table; clear: both; }

   • 这种方法可以避免父元素高度塌陷，并且具有良好的浏览器兼容性。
2. 设置overflow属性：
   • 给父元素设置overflow属性为auto或hidden，这样可以创建一个新的BFC，包含浮动元素，解决高度塌陷问题。
3. 处理绝对定位：
   • 如果子元素使用绝对定位，确保父元素有相对定位，使父元素能够正常包裹子元素。
4. 使用块级元素：
   • 如果父元素只包含行内元素，可以通过添加块级元素或将行内元素的display属性设置为block来防止高度塌陷。
5. Flexbox布局：
   • 使用Flexbox可以有效避免高度塌陷问题。为父元素设置display: flex;，并设置适当的flex-direction。
6. 确保有内容填充：
   • 确保父元素中确实含有内容（即使是空的块元素），这样会有助于保持高度的计算。
7. 使用min-height属性：
   • 为父元素设置一个最小高度，以防止高度塌陷，即使内容很少或没有内容时也能保持一定的高度。
8. CSS属性增加权重：
   • 通过设置min-height和height属性，增加CSS的权重，使得浏览器能够根据其识别能力来正确解析高度。
     通过上述方法，可以有效地解决浏览器兼容性造成的高度塌陷问题，并确保页面在不同浏览器中都能正确渲染。

0.1px的边框实现

在网页设计中，0.1px的边框实现通常是为了在不同的设备和浏览器上保持设计的一致性，尤其是在高分辨率的显示屏上。以下是几种实现0.1px边框的方法：

1. CSS3的border属性：
   使用CSS3的border属性可以直接设置边框宽度为0.1px。例如：

   1 2 3

   .thin-border { border: 0.1px solid #000; }

   但是，这种方法在某些浏览器中可能不生效，因为0.1px可能小于浏览器的最小渲染单位。
2. 使用box-shadow：
   如果直接设置border不起作用，可以尝试使用box-shadow来模拟边框：

   1 2 3

   .thin-border { box-shadow: inset 0 0 0 0.1px #000; }

   这种方法通常在大多数浏览器中都能工作，并且可以很好地模拟边框效果。
3. SVG：
   使用SVG（可缩放矢量图形）也可以实现非常细的边框。例如：

   1 2 3

   <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> <rect width="100" height="100" stroke="black" stroke-width="0.1" fill="transparent"/> </svg>

   这种方法可以提供非常精确的边框宽度控制，但是需要使用SVG图像，并且可能不适合所有情况。
4. **使用outline： outline`属性也可以用于创建边框，但它通常用于焦点轮廓，不过可以用来模拟边框：

   1 2 3

   .thin-border { outline: 0.1px solid #000; }

   但是outline是不可继承的，并且默认情况下是可见的，所以可能需要额外的样式来控制其显示。
5. 媒体查询和高分辨率屏幕：
   对于高分辨率屏幕，可以使用媒体查询来调整边框宽度：

   1 2 3 4 5

   @media (min-resolution: 2dppx) { .thin-border { border: 0.5px solid #000; } }

   这种方法可以根据屏幕的分辨率动态调整边框宽度。
6. 使用transform缩放：
   有时候，通过缩放元素可以使得0.1px的边框在视觉上更加明显：

   1 2 3 4

   .thin-border { border: 0.2px solid #000; transform: scale(1.5); }

   这种方法通过缩放元素来增加边框的可见性，但可能会影响元素的其他视觉属性。
   每种方法都有其适用场景和限制，你可能需要根据具体的项目需求和目标浏览器的支持情况来选择最合适的方法。
   前端性能优化

CSS百分比参照问题

• 参照父元素宽度的元素：padding margin width text-indent
• 参照父元素高度的元素：height
• 参照父元素属性:font-size line-height
• 特殊：相对定位的时候，top(bottom) left(right)参照的是父元素的内容区域的高度与宽度，而绝对定位的时候参照的是最近的定位元素包含padding的高度与宽度