前端基础入门知识点

vwei
92 阅读13分钟

HTML

请描述<script>、<script async>和<script defer>的区别。​

  • <script> - HTML 解析中断，脚本被提取并立即执行。执行结束后，HTML 解析继续。
  • <script async> - 脚本的提取、执行的过程与 HTML 解析过程并行，脚本执行完毕可能在 HTML 解析完毕之前。当脚本与页面上其他脚本独立时，可以使用async，比如用作页面统计分析。
  • <script defer> - 脚本仅提取过程与 HTML 解析过程并行，脚本的执行将在 HTML 解析完毕后进行。如果有多个含defer的脚本，脚本的执行顺序将按照在 document 中出现的位置，从上到下顺序执行。 注意：没有src属性的脚本，async和defer属性会被忽略。
    参考​:
    www.growingwiththeweb.com/2014/02/asy…
    stackoverflow.com/questions/1…
    bitsofco.de/async-vs-de…

div盒子模型

  1. 标准盒子模型 padding + margin +border + content(内容宽度) 这时的width（宽）height（高）为内容的content的
  2. 怪异盒子模型（IE盒子模型） 内容宽度（padding +content+ boder）+margin 这时的width（宽）=内边距（padding）+ 边框（border）+内容（content），height（高）=内边距（padding）+ 边框（border）+内容（content）
    Box-size：content-box 为默认盒子属性 标准盒子模型
    Box-size：border-box 怪异盒子模型 ie盒子模型
    即box-sizing属性可以指定盒子模型种类，content-box指定盒子模型为W3C（标准盒模型），border-box为IE盒子模型（怪异盒模型）。

CSS

BFC（块级格式上下文）

开启BFC 里面和外面互不影响 ，外边距会重叠开启bfc后两个bfc外边距模块不会重叠

开启BFC
  1. float 除none外的值
  2. position ：absolute fixed
  3. display:inline-block、tables-cell、flex、table-caption
  4. overflow：除了visible
应用场景
  1. 清除浮动
  2. 解决边框重叠问题
  3. 避免某元素被浮动元素覆盖

清除浮动

开启一个BFC 高度为0的div元素

{ Content:""; Visibility:hidden; Hright:0; }

伪元素结合 ::after 伪元利用 BFC清除浮动 overflow hidden | auto

增加一个空div 元素设置样式 ::after{ content:""; display:block; clear:both; }

css3动画效果

利用属性 animation：myfirst 绑定
@keyframes myfirst{ From {} To{} } （注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。)

Flex 布局

设置 flex 布局后所有的子元素自动生成容器成员 称为flex 项目 简称为项目，容器默认有水平主轴（main axis）左边main start 右边main end 竖直交叉轴（cross axis）最上边为cross start 最下边为 cross end。项目默认按照主轴排列。

Flex direction ：
  1. row 按照水平主轴方向从左到右排列（默认）
  2. row-reserve 按照水平主轴从右到左排列
  3. column 按照交叉轴方向从上到下排列
  4. column-reserve 按照交叉轴方向从下到上排列
Flex-wrap 项目默认排列在轴线上 如果一条轴线排列不下，如何换行。
  1. nowrap 不换行
  2. wrap 换行从上到下排列即轴线上排列不下会换行到下面排列，多的依次向下排列（以主轴为例）
  3. wrap-reverse 换行从下到上排列即轴线上排列不下会换行到上面。
Flex-flow: 是flex-direction和flex-wrap 简写（语法糖）
Flex-flow：flex-direction|flex-wrap 默认为 row nowrap
Justify-context 定义主轴对齐方式
  1. flex-start 左对齐（默认）
  2. lex-end 右对齐
  3. space-between：两端对齐，项目间距相等。
  4. space-around 每个项目的两端间距相等。
Align-items 定义交叉轴上对齐方式
  1. flex-start 交叉轴起点对齐
  2. flex-end 交叉轴终点对齐
  3. flex-center 交叉轴中点对齐
  4. baseline 项目第一行文字对齐
  5. stretch（默认） 如果项目没有设置高度或为auto 则铺满屏幕
Align-self 允许单个项目与其他项目不一样的对齐方式

.item { align-self: auto | flex-start | flex-end | center | baseline | stretch;}

Flex flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]}

Flex：1 每个项目平均分布

选择器的优先级

  1. !import 优先级最高
  2. 内联样式>id>.class、属性选择器、伪类、伪元素选择器>标签选择器>*>继承

css选择器

  1. id选择器（id="id1" #id1{}）
  2. 类选择器（class="lei" .lei{}）
  3. 属性选择器（<div test></div> div[test]{} <div test="test"></div> div[test="test"]{} ）
  4. 伪类选择器(:active :targer )
  5. 标签选择器（div｛｝）
  6. 后代选择器（div p{}）
  7. 通配符选择器(*)
  8. >只选取父元素的儿子
  9. +相邻选择器
  10. 不可继承属性：Width height border padding margin
  11. Css优先级如何计算
  12. Class选择器：10，
  13. Id选择器：100，
  14. 标签、伪元素：1
  15. *：0，
  16. 元素选择器：1，
  17. 行内样式：1000

Display：

  1. none
  2. flex
  3. line
  4. block
  5. line-block
  6. table
  7. table-row
  8. table-column
  9. table-item

继承

继承就是指子节点默认使用父节点的样式属性。 不可继承的属性太多了不要背，记住可以继承的属性有哪些就行了。可以继承的属性很少，只有颜色，文字，字体间距行高对齐方式，和列表的样式可以继承。

  1. 所有元素可继承：visibility和cursor。
  2. 内联元素可继承：line-height、color、font、font-family、font-size、font-style、letter-spacing、word-spacing、white-space、font-variant、font-weight、text-decoration、text-transform、direction。
  3. 终端块状元素可继承：text-indent和text-align。
  4. 列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
  • 透明度 opacity 子元素可继承 透明色 background （255，255，255，0.5）不可继承

CSS3新增伪类：

  1. p:Nth-child（2）其父元素里的p，第2个p元素
  2. p:frist-child 其父元素里的p，第一个p元素
  3. p:frist-of-type(2)其父元素的p，p类型元素的第二个p元素
  4. P:last-of-type(2)其父元素的p，p类型元素的倒数第二个p元素

z-index 层叠上下文

假定用户正面面向浏览器的视窗或网页，html元素是沿着其相对的用户的一条虚构的Z轴排开。层叠上下文就是对这些HTML元素的一个三维构想。
文档中的层叠上下文满足以下任一个条件的元素想成

  1. 文档根元素（<html>）
  2. position值为absolute（绝对定位）或relative（相对定位）且z-index值不为auto的元素；
  3. position值为fixed（固定定位）或sticky（粘滞定位）的元素
  4. flex（flexbox） 容器的子元素，且z-index值不为auto
  5. grid容器的子元素，且z-index值不为auto
  6. opacity属性值效益1的元素
  7. mix-blend-mode属性值不为normal的元素
  8. 以下任一属性值不为none的元素：
  • transform
  • filter
  • perspective
  • clip-path
  • mask/msk-image/mask-border
  1. isolation属性值为isolate的元素
  2. -webkit-overflow-scrolling属性值为touch的元素
  3. will-change 值设定了任一属性而该属性在 non-initial 值时会创建层叠上下文的元素（参考这篇文章）；
  4. contain 属性值为 layout、paint 或包含它们其中之一的合成值（比如 contain: strict、contain: content）的元素。

可以看成子元素为父元素的版本号

  • Root
    • DIV #2 - z-index 为 2
    • DIV #3 - z-index 为 4
      • DIV #5 - z-index 为 1，在一个 z-index 为 4 的元素内层叠，所以渲染次序为 4.1
      • DIV #6 - z-index 为 3，在一个 z-index 为 4 的元素内层叠，所以渲染次序为 4.3
      • DIV #4 - z-index 为 6，在一个 z-index 为 4 的元素内层叠，所以渲染次序为 4.6
    • DIV #1 - z-index 为 5

JavaScript

this 指向

  1. 谁调用this 指向谁
function Person（name）｛
this.name = name;
｝
Var obj = new Person（"李四"）

这里的this指向实例对象obj对象

var obj1 = {
name:'张三'
say:function(){
this.name(这里的this指向obj1)
    }
}
  1. 在非严格模式下普通的函数 的this指向window
Call apply bind 更改this指向
  1. call(this,接受的数值)
  2. apply(this,接受的数组)
  3. settimeout().bind(this) 返回一个新的函数

let, var, const 区别

  1. let 有块级作用域，没有变量提升，不能声明同名变量。
  2. var 没有块级作用域，有变量提升，可以声明同名变量。
  3. const 有块级作用域，声明后必须赋值，赋值后不能改变（常量），没有变量提升，不能声明同名变量。
    共同点 都约定用 let var const 声明的变量不能使用 delete删除

事件循环 event、loop

JS是单线程同一时间只能做一件事情。

程序从上到下执行 先执行主线程代码遇见宏任务放入对应的宏任务队列 遇见微任务放入对应的微任务队列 当 当前执行栈执行完毕时会立刻先处理所有微任务队列中的事件，然后再去宏任务队列中取出一个事件。同一次事件循环中，微任务永远在宏任务之前执行。

JS执行的时候分为主线程和分线程，**初始代码在主线程中执行，回调代码在分线程中执行。**先执行初始化代码遇到回调代码压入回调队列中待执行。先执行初始化代码在执行回调代码。当主线程执行时间较长时会影响回调代码比如settimeout当主线程执行时间超过定时时间可能会立即执行。

宏任务：异步 Ajax 请求、setTimeout、setInterval、文件操作、其它宏任务
微任务：Promise.then、.catch 和 .finally process.nextTick、其它微任务
Js 执行时先执行主线程初始代码遇到宏任务把宏任务执行排队，遇到微任务压入回调队列。主线程同步代码执行完毕后执行清空微任务队列。微任务执行完后调用宏任务队列中的宏任务执行。遇到微任务再入回调队列。。

在一个事件循环中，异步事件返回结果后会被放到一个任务队列中。然而，根据这个异步事件的类型，这个事件实际上会被对应的宏任务队列或者微任务队列中去。并且在当前执行栈为空的时候，主线程会 查看微任务队列是否有事件存在。如果不存在，那么再去宏任务队列中取出一个事件并把对应的回到加入当前执行栈；如果存在，则会依次执行队列中事件对应的回调，直到微任务队列为空，然后去宏任务队列中取出最前面的一个事件，把对应的回调加入当前执行栈…如此反复，进入循环。
我们只需记住 当 当前执行栈执行完毕时会立刻先处理所有微任务队列中的事件，然后再去宏任务队列中取出一个事件。同一次事件循环中，微任务永远在宏任务之前执行。

数组方法

  1. Array.tostring() 把数组转化为用逗号隔开的字符串
  2. Array.join(‘规定的字符')把数组转化为用规定的字符隔开的字符串
  3. Array.Push() 向数组最后推入一个值
  4. Array.pop() 删除数组最后的一个值,并返回它
  5. Array.unshift()向数组最前面推入一个值
  6. Array.shift() 删除数组最前面的值,并返回它
  7. Array.concat(arr，arr1) 用于连接数组 返回一个新数组
  8. NewArr = arr1.concat(arr2,arr3)
  9. Array.splice(添加新元素的位置，删除的个数，新元素) 可以接受 多个参数 array.splice(-1,0,6) 在倒数第二个位置上添加新元素数字6。-1为数组的倒数第二的位置。
  10. Array.slice(起始位置，止点位置) 可接受一个或两个参数 当只有一个参数时会返回参数位置到最后数组 两个参数时返回起始位置到止点位置数组，起始位置数值要小于止点位置数值，返回的数组不包括参数位置的元素。可接受负数，当参数为负数时返回从后往前压入新数组。Arr.slice(-1)为数组最后一个元素。
  11. Array.lenght返回数组长度
  12. Array.forEach(function(element(数组元素),index(数组索引值),array(遍历的数组)){},改变回调函数中的this指向参数，省略则this指向全局对象)
  13. Array.filter(function(element(数组元素),index(数组索引值),array(遍历的数组)){ return element（数组元素）操作条件 },改变回调函数中的this指向参数，省略则this指向全局对象)
  14. Array.sort(function(a,b){return a-b})如果a-b>0 b排在a前面如果 a-b<0则a排在b前面 a-b=0位置不变 （从小到大排列）15. Array.sort(function(a,b){return b-a})（从大到小）
  15. Array.some(function(element(数组元素),index(数组元素的索引),array(遍历的数组)){ Element数组中正在处理的元素 },回调函数this指向参数) 该方法返回一个布尔值 测试数组中是否有满足条件的元素。
  16. Array.map(function(element，index，array){ Return element for new_array 数组中正在处理的元素 },回调函数this指向参数) 每个元素执行回调函数，返回一个新数组。

数组扁平化

  1. 利用扩展运算符
  2. 利用join()、toString()方法 变为字符串再用splice 变为数组 此时数组中的元素为字符串 使用map遍历利用Number(element)转换为数字

垃圾回收机制

  1. 标记-清除 当进入环境会被标记，当执行完毕后会被标记离开环境，被回收。
  2. 引用-计数 当引用类型引用一次+1 引用对象指针指向其他前面的引用对象计数-1 0则会被回收。 引起内存泄漏的因素
因占用内存比较多，没有及时释放。
  1. 滥用闭包
  2. 事件监听
  3. 绑定事件
  4. 意外的全局变量
  5. 定时器

Javascript 事件监听

  1. element.AddEventListener("事件如（click，mousemove等）"，"callback触发事件的回调函数"，事件是捕获还是冒泡默认是false 冒泡 true 捕获)
    1. 冒泡是从里向外 输出
    2. 捕获是从外向里 输出

举个栗子:

<div>
<button>点我</button>
</div>

var btn = document.getElementsByTagName('button')[0]
            btn.addEventListener('click',function(){
                alert("hello btn ,my friend")
            },false)
            var divBtn = document.getElementsByTagName('div')[0]
            divBtn.addEventListener('click',function(){
                alert("hello div,my friend")
            },false)

默认是false 冒泡 先输出 hello btn ,my friend 后输出 hello div,my friend 当设置为true 捕获时 则先输出 hello div,my friend 后输出 hello btn ,my friend

事件委托

把事件委托给别人去做 提高性能 利用冒泡 把事件加到父级上。

闭包

  • 函数嵌套 内部函数引用外部函数的值 形成闭包 。
  • 看产生闭包数量，就是外部函数调用次数。
    闭包作用：
  1. 延长局部变量的寿命（保护）
  2. 使外部能够访问到内部变量 使用 谷歌浏览器调试工具可以看到
    理解一 内部函数就是闭包
    理解二
    闭包内的变量不会被回收

原型链

  • 实例对象的隐示原型(proto)等于构造函数的显示原型(prototype)

Promise 使用

Promise 可以链式调用

立即执行

let promise = new Promise（function(resolve){
成功调用
resolve();
},function(reject){
失败调用
reject()
}）
then 接受两个回调函数 成功走第一个回调函数 失败走第二个回调函数
promise.then(（Resolve）=>{ 
成功走这
},(reject)=>{
失败走这
})
.then语法糖 (捕获错误)
promise.catch(()=>{
})

ES6

  1. 模板字符串 ${}

  2. let const 都有块级作用域 没有变量提升 const声明的变量为常量

  3. 函数有默认值

  4. Function sayName（name="张三"）｛ Console.log（name） ｝

  5. Promise

  6. async awit

  7. 箭头函数 （注意箭头函数的this指向问题 箭头函数没有this上下文对象 this为上一层的）

  8. for of

  9. improt

  10. export defalut

  11. Class

  12. proxy

项目里出现的问题

出现 this 指向问题 实例对象.函数 = function(){ this指向实例}

  1. 使用 箭头函数 实现 让this 指向 全局 vuecom 实例对象.函数 = ()=>{ this指向vuecom}

  2. bind 改变 实例对象.函数 = function(){ this指向实例}.bind(this)

多个IP 使用代理 proxy baseURL 为空

CSS

透明度 opacity 子元素可继承 透明色 background （255，255，255，0.5）不可继承

--dev与--save用途

npm install --dve(devDependencies) =>开发时所依赖 --save(dependencies) =>运行时所依赖 在 package.json 文件里面提现出来的区别就是：

使用 npm i 【包名】 --save-dev 安装的包，会被写入到 devDependencies 对象里面去；

而使用 npm i 【包名】 --save 安装的包，则被写入到 dependencies 对象里面去。

那么 package.json 文件里面的 devDependencies 和 dependencies 对象有什么区别呢？

devDependencies 里面的插件(比如各种loader，babel全家桶及各种webpack的插件等)只用于开发环境，不用于生产环境，因此不需要打包；而 dependencies 是需要发布到生产环境的，是要打包的。

关于项目打包引用sdn减轻打包体积

  1. 路由模式必须为hash
  2. Vue.config.js配置 （npm 安装webpack-bundle-analyzer 打包分析插件）
  3. 使用官网的sdn或者bootcdn在public文件下的index.html文件中引入
Vue.config.js配置
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
    publicPath: './',
    configureWebpack: {
        externals: {
            'element-plus': 'ElementPlus',
            'vue': 'Vue'
        },
        plugins: [
            new BundleAnalyzerPlugin()
        ]
    }
}
avatar
文章
阅读
粉丝