前端体系知识内容范围

接下来的学习方向则从右到左依次进行学习，借鉴一张霖呆呆的体系图。

HTML

HTML5新增特性

www.w3school.com.cn/html5/index…

HTML的新特性

1 用于绘画的 canvas 元素
2 用于媒介回放的 video 和 audio 元素
3 对本地离线存储的更好的支持
4 新的特殊内容元素，比如 article、footer、header、nav、section
5 新的表单控件，比如 calendar、date、time、email、url、search
6 拖放

video

1 只支持Ogg、MPEG 4、WebM三种格式。
2 标签属性有 autoplay、controls、height、width、loop、preload、src。
3 方法有play()、pause()、load()、canPlayType。

audio

1 只支持Ogg Vorbis、MP3、Wav。
2 标签属性有autoplay、controls、loop、preload、src。

audio 元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式
<audio controls="controls">
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>

拖放(Drag 和 drop)

1 元素添加draggable=true才可进行拖放。
2 元素拖动函数ondragstart，当前元素dataTransfer.setData() 方法设置被拖数据的数据类型和值
3 ondragover 拖动元素放置的位置，必须阻止放置后元素的默认事件。
4 ondrop放置被拖数据发生的事件。

Canvas

画布是一个矩形区域本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成

SVG

1 SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
2 SVG 用于定义用于网络的基于矢量的图形
3 SVG 使用 XML 格式定义图形
4 SVG 图像可通过文本编辑器来创建和修改
5 SVG 图像可被搜索、索引、脚本化或压缩
6 SVG 是可伸缩的
7 SVG 图像可在任何的分辨率下被高质量地打印
8 SVG 可在图像质量不下降的情况下被放大

内容

SVG 有一些预定义的形状元素：

- 1 矩形 <rect>
- 2 圆形 <circle>
- 3 椭圆 <ellipse>
- 4 线 <line>
- 5 折线 <polyline>
- 6 多边形 <polygon>
- 7 路径 <path>

地理定位

1 geolocation 用于获得用户的地理位置。
2 geolocation.getCurrentPosition() 方法来获得用户的位置。getCurrentPosition接受两个参数，第一个参数是一个函数，第二个参数用来返回错误信息。

表单

输入类型

1 email
2 url
3 number
4 range
5 Date pickers (date, month, week, time, datetime, datetime-local)
6 search
7 color

number & range 类型还有属性

max:允许的最大值
min:允许的最小值
step:数字间隔
value:默认值

表单属性

-1 autocomplete

2 autofocus
3 form
4 form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
5 height 和 width
6 list
7 min, max 和 step
8multiple
9 pattern (regexp)
10 placeholder
11 required

如何理解HTML语义化

让人更容易读懂（增加代码可读性）
让搜索引擎更容易读懂（SEO）

块状元素 & 内联元素

display:block/table；有div h1 h2 table ul ol p等
display:inline/inline-block;有span img input button等

CSS

颜色

含义：指定颜色是通过使用预定义的颜色名称，或 RGB、HEX、HSL、RGBA、HSLA 值

RGB

1 定义：rgb(red, green, blue) ,定义了 0 到 255 之间的颜色强度
2 用法：rgb(0, 0, 0)

RGBA

1 定义：rgba(red, green, blue, alpha) alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字
2 用法：rgba(255, 99, 71, 0.2)

HEX

1 定义：使用00 和 ff 之间的十六进制值
2 用法：#ff6347

HSL

1 定义：hsla(hue, saturation, lightness) ，对应着色相、饱和度和明度的参数值
色相是0-360的度数，0表红色，120表绿色，240表蓝色。
饱和度是百分比值，0%表灰色阴影，100%表全色。
明度是百分比值，0%表黑色，50%表正常值，100%表白色
2 用法：

盒模型宽度计算

offsetWidth = (内容宽度 + 内边距 + 边框），无外边距
box-sizing = border-box 
width(宽度) + padding(内边距) + border(边框) = 元素实际宽度
height(高度) + padding(内边距) + border(边框) = 元素实际高度

margin 纵向重叠问题

相邻元素的margin-top和margin-bottom会发生重叠
空白内容
也会重叠

margin负值问题

margin-top和margin-left 负值，元素向上，向左移动
margin-right负值，右侧元素左侧，自身不受影响
margin-bottom负值，下方元素上移，自身不受影响

BFC理解和应用

Block format context ,块级格式化上下文
一块独立渲染区域，内部元素的渲染不会影响边界以外的元素

形成BFC的常见条件

float不是none
position 是absolute 或fixed
overflow 不是 visiblie
display 是flex inline-block

float布局

flex-direction
justify-content
align-items
flex-wrap
align-self

CSS 定位

absolute和relative定位

relative依据自身定位
absolute依据最近一层的定位元素定位（absolute relative fixed body）

水平居中

inline 元素：text-align:center
block元素：margin:auto
absolute元素：left:50% + margin-left负值

垂直居中

inline元素：line-height的值等于height的值
absolute元素：top：50% + margin-top负值（需要知道子元素的宽和高）
absolute元素：transform（-50%，-50%）
absolute元素：top left bottom right = 0 + margin：auto

CSS-图文样式

line-height如何继承

写具体数值，如30px 则继承该值
写比例。如2/1.5 ，则继承该比例（自身font-size * 父级line-height）
写百分比，如200% ，则继承该算出来的值 (父级font-size * 父级line-height 的值)

长度单位

px 绝对长度单位
em 相对于长度单位，相对于父元素
rem 相对于长度单位，相对于根元素，常用于响应式布局

响应式布局的常用

media-query,根据不同的屏幕宽度设置根元素 font-size
rem,基于根元素的相对单位

rem的弊端

'阶梯'性

网页视口尺寸

window.screen.height //屏幕高度
window.innerHeight //网页视口高度
document.body.clientHeight //body高度

Javascript

值类型和引用类型

值类型是栈的值使用，引用类型是使用地址

常见值类型

let a //undefined
const s= 'abc'
const n=100
const b= true 
const s= Symbol('s')

常见引用类型

const obj = {x:100}
const arr = ['a','b']
const n=null //特殊引用类型，指针指向为空地址

//特殊引用类型，但不用于存储数据，所有没有 ‘拷贝、复制函数’这一说
function fn(){}

typeof那判断哪些类型

识别所有值类型
识别函数
判断是否是引用类型（不能细分引用类型的具体信息）

变量计算 -- 类型转换

字符串拼接
==
if语句和逻辑运算

class

class的构建

constructor
属性
方法

// 类
class Student {
    constructor(name, number) {
        this.name = name
        this.number = number
        // this.gender = 'male'
    }
    sayHi() {
        console.log(
            `姓名 ${this.name} ，学号 ${this.number}`
        )
        // console.log(
        //     '姓名 ' + this.name + ' ，学号 ' + this.number
        // )
    }
    // study() {

    // }
}

// 通过类 new 对象/实例
const xialuo = new Student('夏洛', 100)
console.log(xialuo.name)
console.log(xialuo.number)
xialuo.sayHi()

继承

class People {
    constructor(name) {
        this.name = name
    }
    eat() {
        console.log(`${this.name} eat something`)
    }
}

// 子类
class Student extends People {
    constructor(name, number) {
        super(name)
        this.number = number
    }
    sayHi() {
        console.log(`姓名 ${this.name} 学号 ${this.number}`)
    }
}
// 实例
const xialuo = new Student('夏洛', 100)
console.log(xialuo.name)
console.log(xialuo.number)
xialuo.sayHi()
xialuo.eat()

原型

原型关系

每个class都有显示原型prototype
每个实例都有隐式原型 proto
实例的_proto_指向对应class的prototype

基于原型的执行规则

先在自身属性和方法寻找
如果找不到自动去_proto_去寻找

原型链

作用域和闭包

作用域

全局作用域
函数作用域
块级作用域（ES6新增）

自由变量

一个变量在当前作用域没有定义，但被使用了
向上级作用域，一层一层一次寻找，直至找到为止
如果到全局作用域都没有找到，则报错xx is not defined

闭包

作用域应用的特殊情况，有两种表现：
函数作为参数被传递
函数作为返回值被返回

// 函数作为返回值
function create() {
    const a = 100
    return function () {
        console.log(a)
    }
}

const fn1 = create()
const a = 200
fn1() // 100

// 函数作为参数被传递
function print(fn) {
    const a = 200
    fn()
}
const a = 100
function fn() {
    console.log(a)
}
print(fn) // 100

// 所有的自由变量的查找，是在函数定义的地方，向上级作用域查找
// 不是在执行的地方！！！

this

在class方法中调用
箭头函数
this是在函数执行的时候调用，不是在函数定义的时候调用

异步和单线程

JS是单线程语言，只能同时做一件事
浏览器和nodejs已支持JS启动进程，如web worker
JS和DOM渲染共同一个线程，因为JS可修改DOM结构

应用场景

网络请求，如ajax图片加载
定时任务，如setTimeout

vue 的知识点

computed和watch

computed有缓存，data不变则不会重新计算
watch默认浅监听
watch监听引用类型，拿不到oldval

class和style

使用动态属性
使用驼峰式写法

事件

修饰符

生命周期

父组件中引入子组件生命周期的走向是？

 加载渲染过程：父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
 销毁过程：父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

$nextTick

Vue是异步渲染
data改变之后，DOM不会立刻渲染
$nextTick会在DOM渲染之后被触发，以获取最新DOM节点

动态组件

:is='component-name' 用法
需要根据数据，动态渲染的场景

 <component :is="NextTick"/>

 import NextTick from './NextTick'

异步组件

import（）函数
按需加载，异步加载大组件

components:{
    FormDemo: () => import('../BaseUse/FormDemo')
}

mixin 问题

变量不明确，不利于阅读
多mixin可能会造成命名冲突
mixin和组件可能会出现多对多的关系，复杂度较高

前端路由原理

hash-window.onhashchange
H5 history - history.pushState 和 window.onpopstate

hash的特点

hash变化会触发网页跳转，即浏览器的前进，后退。
hash变化不会刷新页面，SPA必需的特点
hash永远不会提交到server端

H5 history

用url规范的路由，但跳转不刷新页面
history.pushState
window.onpopstate

Vue的响应式

Vue2

核心API-Object.defineProperty

Object.defineProperty的缺点

深度监听，需要递归到底，一次性计算量大
无法监听新增属性/删除属性（Vue.set Vue.delete）

模板编译

前置知识：width语法
vue template complier 将模板编译为render函数
执行render函数生产vnode

width语法

改变{}内自由变量的查找规则，当做obj属性来查找
如果找不到匹配的obj属性，就会报错
width要慎用，他打破了作用域规则，易读性变差

初次渲染过程

解析模板为render函数
触发响应式，监听data属性getter setter
执行render函数，生成vnode，patch（elem，vnode）

更行过程

修改data，触发setter
重新执行render函数，生成newVnode
patch（vnode，newVnode）

异步渲染

回顾$nectTick
汇总data的修改，一次性更新视图
减少DOM操作次数，提高性能

diff算法

Vue3

ref

生成值类型的响应式数据
可用于模板和reactive
通过.value修改值
这是修改的

为何需要.value

ref是一个对象（不丢失响应式）,value存储值
通过.value属性的get和set实现响应式
用于模板、reactive时，不需要.value,其他情况都需要
使用对象使用地址引用，可实现数据的链接关系

toRef

针对一个响应式对象（reactive封装）的prop
创建一个ref，具有响应式
两者保持引用关系

<template>
    <p>toRef demo - {{ageRef}} - {{state.name}} {{state.age}}</p>
</template>

<script>
import { ref, toRef, reactive } from 'vue'

export default {
    name: 'ToRef',
    setup() {
        const state = reactive({
            age: 20,
            name: '双越'
        })

        const age1 = computed(() => {
            return state.age + 1
        })

        // // toRef 如果用于普通对象（非响应式对象），产出的结果不具备响应式
        // const state = {
        //     age: 20,
        //     name: '双越'
        // }

        const ageRef = toRef(state, 'age')

        setTimeout(() => {
            state.age = 25
        }, 1500)

        setTimeout(() => {
            ageRef.value = 30 // .value 修改值
        }, 3000)

        return {
            state,
            ageRef
        }
    }
}
</script>

toRefs

将响应式对象（reactive封装）转为普通对象
对象的内阁prop都是对应的ref
两者保持引用关系

<template>
    <p>toRefs demo {{age}} {{name}}</p>
</template>

<script>
import { ref, toRef, toRefs, reactive } from 'vue'

export default {
    name: 'ToRefs',
    setup() {
        const state = reactive({
            age: 20,
            name: '双越'
        })

        const stateAsRefs = toRefs(state) // 将响应式对象，变成普通对象

        setTimeout(() => {
            state.age = 25
        }, 1500)

        return stateAsRefs
    }
}
</script>

为何需要toRef和toRefs

初衷：不丢失响应式的情况下，把对象数据分解/扩散
前提：针对的是响应式对象（reactive封装的）非普通对象
注意：不创造响应式，而是延续响应式

watch和watchEffect的区别

两者都可监听data属性变化
watch需要明确监听哪个属性
wtchEffect会根据其中的属性，自动监听其变化

PatchFlag

编译模板时，动态节点做标记
标记，分为不同的类型，如TEXT PROPS
diff算法时，可以区分静态节点，以及不同类型的动态节点

hoistStatic

将静态节点的定义，提升到父作用域，缓存起来
多个相邻的静态节点，会被合并起来
典型的拿空间换时间的优化策略

Vite

Vite为何启动快

开发环境使用ES6，无需打包 -- 非常快

面试考点

Vue组件如何通讯

父子组件props和this.$emit
自定义事件event. $on event.$ off event.$emit
vuex

双向数据绑定v-model的实现原理

input元素的value = this.name
绑定input事件 this.name = $event.target.value
data更新触发re-render

自定义实现v-model

何时需要使用beforeDestory

解除自定义事件event.$off
清除定时器
解绑自定义的DOM事件，如window scroll等

简述diff算法过程

patch(elem,vnode)和patch(vnode,newVnode)
patchVnode 、addVnodes 、removeVnodes
updateChildren(key的重要性）

Vue3升级了哪些重要的功能

createApp
emits属性
生命周期
多事件
Fragment
移除.sync、filter
异步组件的写法
Teleport
suspense
composition API (reactive、ref相关、readonly、watch和watchEffct、setup、生命周期钩子函数)

Vue3为何比Vue2快

Proxy响应式
PatchFlag
hiostStatic
cacheHandler
SSR优化
tree-shaking

Webpack

多入口

 entry: {
        index: path.join(srcPath, 'index.js'),
        other: path.join(srcPath, 'other.js')
    },
     plugins: [
        // 多入口 - 生成 index.html
        new HtmlWebpackPlugin({
            template: path.join(srcPath, 'index.html'),
            filename: 'index.html',
            // chunks 表示该页面要引用哪些 chunk （即上面的 index 和 other），默认全部引用
            chunks: ['index', 'vendor', 'common']  // 要考虑代码分割
        }),
        // 多入口 - 生成 other.html
        new HtmlWebpackPlugin({
            template: path.join(srcPath, 'other.html'),
            filename: 'other.html',
            chunks: ['other', 'vendor', 'common']  // 考虑代码分割
        })
    ]

抽离CSS文件

 // 抽离 css
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,  // 注意，这里不再用 style-loader
                    'css-loader',
                    'postcss-loader'
                ]
            },
            
plugins:[
 // 抽离 css 文件
        new MiniCssExtractPlugin({
            filename: 'css/main.[contenthash:8].css'
        })
]
optimization:{
 // 压缩 css
 minimizer: [ new OptimizeCSSAssetsPlugin({})],
}

抽离公共代码

 optimization: {
        // 分割代码块
        splitChunks: {
            // 缓存分组
            cacheGroups: {
                // 第三方模块
                vendor: {
                    name: 'vendor', // chunk 名称
                    priority: 1, // 权限更高，优先抽离，重要！！！
                    test: /node_modules/,
                    minSize: 0,  // 大小限制
                    minChunks: 1  // 最少复用过几次
                },

                // 公共的模块
                common: {
                    name: 'common', // chunk 名称
                    priority: 0, // 优先级
                    minSize: 0,  // 公共模块的大小限制
                    minChunks: 2  // 公共模块最少复用过几次
                }
            }
        }
    }

module chunk bundle 的区别

module - 各源码文件，webpack中一切皆模块
chunk - 多模块合并成的，如enrty import（） splitchunk
bundle - 最终的输出文件

webpack 性能优化

构建速度

优化babel-loader
IngorePlugin
noParse
happyPack
ParallelUglifyPlugin
自动刷新
热更新
DllPlugin

babel-loader

  rules: [
            {
                test: /\.js$/,
                loader: ['babel-loader?cacheDirectory'], //开启缓存
                include: srcPath,//明确范围
                // exclude: /node_modules/
            },
]

IngorePlugin避免使用无用模块

 plugins:[
 // 忽略 moment 下的 /locale 目录
        new webpack.IgnorePlugin(/\.\/locale/, /moment/),
 ]

happyPack多进程打包

JS单线程，开启多进程打包
提高构建速度（特别是多核CPU）

  module: {
        rules: [
            // js
            {
                test: /\.js$/,
                // 把对 .js 文件的处理转交给 id 为 babel 的 HappyPack 实例
                use: ['happypack/loader?id=babel'],
                include: srcPath,
                // exclude: /node_modules/
            },
        ]
    },
    plugins: [
        // happyPack 开启多进程打包
        new HappyPack({
            // 用唯一的标识符 id 来代表当前的 HappyPack 是用来处理一类特定的文件
            id: 'babel',
            // 如何处理 .js 文件，用法和 Loader 配置中一样
            loaders: ['babel-loader?cacheDirectory']
        }),

        // 使用 ParallelUglifyPlugin 并行压缩输出的 JS 代码
        new ParallelUglifyPlugin({
            // 传递给 UglifyJS 的参数
            // （还是使用 UglifyJS 压缩，只不过帮助开启了多进程）
            uglifyJS: {
                output: {
                    beautify: false, // 最紧凑的输出
                    comments: false, // 删除所有的注释
                },
                compress: {
                    // 删除所有的 `console` 语句，可以兼容ie浏览器
                    drop_console: true,
                    // 内嵌定义了但是只用到一次的变量
                    collapse_vars: true,
                    // 提取出出现多次但是没有定义成变量去引用的静态值
                    reduce_vars: true,
                }
            }
        })
    ],

产出代码

作用

体积更小
合理分包，不重复加载
速度更快，内存使用更少

使用技巧

小图片base64编码
bundle加hash
懒加载
提取公共代码
IngorePlugin
使用CDN加速
使用production
Scope Hosting

使用production

自动开启代码压缩
Vue React 等自动删掉调试代码（如开发环境的warning）
启动Tree-Shaking （ES6 Module 才生效）

ES6 Module 和Commonjs 区别

ES6 Module静态引入，编译时引入
Commonjs动态引入，执行时引入
只有ES6 Module 才能静态分析，实现Tree-Shaking

babel-polyfill

是core-js和regenerator的集合 7.4之后弃用了

问题

会污染全局代码，需要使用bable-runtime