- Call和apply,bind
两者都是用来改变当前函数的this指向,区别是call的参数可以直接用逗号分割,apply的参数需要封装在数组内,bind与call用法区别只在,需要最后加()来调用 - 作用域
全局作用域,函数作用域,块级作用域(var声明变量可以在外部访问) - 数据类型
值类型:Number, String, Boolean, null, undefined, Symbol
引用类型:Object, Array, Date, Function,… - 闭包
有权访问另一个函数局部变量的函数,创建方法是在一个函数内创建另一个函数 - Null, undefined
null: 表示没有这个对象,对应数字0,原型链的重点
undefined: 表示缺少值,对应数字NaN,变量没有声明值的时候,函数没有返回值时 - Position定位
相对定位,绝对定位,固定定位,static默认值,
粘性定位:滚动时超出四个方向上的阈值变为固定定位,否则是相对定位 - 水平垂直居中
弹性盒子,绝对定位,表格table-cell,直接计算margin - 懒加载,预加载
懒加载:一上来不加载资源,当符合某些条件时才加载,比如一段时间后或用户快要看到这张图片时
预加载:一上来就加载图片,用户需要查看时直接从本地缓存中渲染 - setInterval() 时间不准
解决方法:动态计算时差,使用多线程方案 - 数组去重O(n)
创造对象,用arr[i]给数组添加属性
其他方法:双重循环splice,Set, indexOf() - 函数柯里化
fn(x, y) -> fn(x)(y) - Chrome最小字体12px
zoom, -web-kit-transform: scale()(最佳), - BFC
块级格式化上下文,页面上的独立的容器,里面的元素不会影响外面的内容,内部元素的margin会重叠,计算高度时浮动元素也会被计算
触发条件:float,display,position,overflow有特殊的设置
应用:解决margin重叠,使两个元素处于不同的BFC中。解决高度塌陷 - 数据类型检测
typeof: 函数,array,null等都会输出Object
instanceof: 类是否在实例的原型对象上,不能检测基本数据类型
constructor属性:缺点是这个属性可以被随意更改
Object.prototype.toString.call()最好的 - 普通函数和箭头函数区别
写法不同,this指向不同,没有arguments对象 - Map和Set
Map有键值对,键可以是字符串或对象
WeakMap 只能接受对象作为键值
Set类似数组,但没有重复值 - Promise
异步编程解决方案,es6新特性,表示一个容器里装着一个未来才会结束的事件,可以查看事件状态信息
没有res()或rej():pending
res()执行后:fullfiled
rej()执行后:rejected
then函数第一个参数接收res()返回的值,第二个参数接收rej()返回的值,自己本身也是一个promise对象,可以继续链式调用then() - Object.create(a,b)
创建一个原型为a的对象 - 流式布局
也叫百分比布局,宽高设置为百分比 - 响应式布局
设置viewpoint,媒体查询配合rem,vhvw,百分比,flex - 防抖和节流
防抖:相隔很短时间内不会触发
节流:相隔很短时间内只会触发一次 - 回流和重绘
回流:布局发生变化,节点树需要重构
重绘:部分节点发生变化,不影响布局
优化:
1. 读取,写入dom节点尽量写在一起
2. Dom缓存
3. 用css class一次性改变样式
4. 用documentFragement操作dom
5. 只有在必要时才显示、隐藏元素
6. 使用虚拟dom库 - 虚拟dom
用js对象构建一个dom结构,再用这个结构构建dom树。状态变更时,利用diff()算法比较差异,找到差异的地方对dom树做修改 - 原型,原型链
实例的__proto__,class的prototype,原型链是指一个对象的原型以及原型的原型,一直网上找,原型链的终点是null - 继承
ES6:class Student extends People{}
ES5:
1.原型链继承:A.prototype = new B(),缺点是子类实例可以篡改父类的属性和方法
2.构造函数:B.call(this)
3.组合式:构造函数+A.prototype = new B(),缺点是B的直接的属性和方法会被重复添加
4.原型式:var a = Object.create(b),缺点是子类实例可以篡改父类的属性和方法
5.寄生组合式:构造函数+ A.prototype = Object.create(B.prototype); A.prototype.constructor = A - 浅拷贝深拷贝
浅拷贝:拷贝对象的属性时,基本数据类型直接拷贝,属性为对象则只拷贝其地址
Object.assign(target, source)
深拷贝:拷贝多层,多层嵌套的对象全部可以拷贝出来 - 高度塌陷
设置为BFC,
伪元素:after{content:””;display:block;clear:both} - 前端工程化的理解
提高项目的可维护性,稳定性,减少资源浪费,使开发所需要的技术规范化。
webpack:模块打包工具,更方便的引入插件,管理依赖 - Reduce函数
累加器 var sum = arr.reduce(function(total, current){return total+current}) - 事件冒泡捕获
冒泡:事件从target元素向父级元素传递的过程
捕获:时间从根元素向下传递的过程
阻止冒泡event.stopPropagation()
阻止默认行为:event.preventDefault(),IE:event.returnValue = false - 浏览器兼容
- 雪碧图
把比较小的图片都整合在同一个图片中,使用时通过background-position属性来设置为想要的图片 - 浏览器内核
safari: webkit, firefox: gecko, IE: trident,chrome:blink,opera:blink - defer和async
defer:js在dom解析完成后执行
async:js与dom异步加载 - 事件循环
同步任务加入执行栈,异步任务加入任务队列,执行栈中的同步任务执行完成后,会把任务队列中完成的异步任务放到执行栈中执行,不停的重复这一步 - 宏观任务,微观任务
都是异步任务,先执行微观,再执行宏观。
宏观:settimeout, setinterval, setimmediate, I/O
微观:process.nexttick, promise中的then - Const原理
自己整理的前端笔记——HTML,CSS,JS篇
于 2022-11-14 21:03:26 首次发布