大前端

前端学习之家-大前端

哈哈哈哈哈

性能优化

es6新特性

let声明变量
const 声明常量
模板字符串
拼接字符串,省去了双引号和+ 就能得到模板
用反引号`表示 ,变量使用${}包裹起来,使用反引号需要进行转义 \加反引号

解构 提取数组或对象中的元素
数组【】
对象{ } 通过对象的属性名 ,顺序不用对应 可以设置默认值
使用对象和数组对字符串进行解构,数组解构以下标进行解构,对象解构字符串属性和方法
数值只能通过对象进行解构,解构数值对象的属性和方法
扩展运算符
数组
对象
字符串
函数功能新增
参数默认值
箭头函数 不需要function关键字创建函数 省略return关键字 this始终指向函数声明时所作作用域下的this值
对象功能新增
for of 遍历的是键值对中的值 for in 遍历的是键值对中的键
class类
导入import 导出 export default
promise 处理异步请求
async await 解决回调地狱
symbol数据类型
set集合
map集合

arguments

arguments是函数的一个内置对象,用来存储传入函数的实参。arguments对象只能在函数中使用。
arguments是一个类数组对象,并不是数组,可以使用arguments.length得到参数的个数,通过索引进行存储参数,但是不能使用数组的方法。可以使用es6数组新增的方法Array.from(arguments)或扩展运算符[…arguments]将arguments转换为数组。
可以使用索引得到单个参数的类型 typeof.arguments[1]。
可以使用for循环对arguments中的参数进行遍历。
使用arguments对未知个数的参数进行求和操作。
callee属性,指向包含arguments参数的正在运行的函数。

箭头函数

箭头函数是es6中新增的语法,是es5中函数表达式的一种更简洁的写法,更适合于需要匿名函数的地方。()=>{}
小括号中存放函数的参数,当参数只有一个时,小括号可以省略,当无参数时需要使用小括号进行占位,代表参数部分。
大括号中放置函数体,当函数体只有一行时,大括号可以省略,默认添加return进行返回操作。
箭头函数中没有super和arguments;箭头函数不能当做构造函数使用(既不能通过new进行调用);箭头函数的this指向不会发生改变,普通函数的this指向调用他的对象,箭头函数的this指向定义他的对象,即永远指向他的父级作用域,即使使用call(),apply(),bind()也不会发生改变;箭头函数不支持重复命名的参数;箭头函数中没有prototype;

浏览器缓存

浏览器缓存机制也就是HTTP缓存机制。该机制时根据HTTP报文的缓存标识进行的。
HTTP报文分为HTTP请求报文(request)和HTTP响应报文(response)。
浏览器与服务器的通信方式为应答模式,即浏览器发起http请求,服务器响应该请求。
浏览器第一次向服务器发起http请求后拿到请求结果,会根据响应报文中HTTP头的缓存标识决定是否缓存结果,若为是则将请求结果和缓存标识存入浏览器缓存中。
浏览器每次发起请求,都会先在浏览器缓存中查找是否有该请求的结果和缓存标识;
浏览器每次拿到返回的请求结果都会将该结果和缓存标识存入浏览器缓存中。

强制缓存:向浏览器缓存查找请求结果,根据结果的缓存规则决定是否使用该缓存结果的过程。
强制缓存的三种情况:浏览器缓存中不存在请求结果和缓存标识,强制缓存失效,直接向服务器发送请求(第一次发起请求);浏览器缓存中存在请求结果和缓存标识,但是结果失效,强制缓存失效,使用协商缓存;浏览器缓存中存在缓存结果和缓存标识,该结果未失效,强制缓存生效,直接返回缓存的结果。
协商缓存:强制缓存失效后,浏览器携带缓存标识向服务器发起请求,服务器根据缓存标识判断是否使用缓存的过程。
协商缓存的两种情况:协商缓存生效,返回304(重定向),资源无更新;协商缓存失效,返回200,资源进行更新,返回请求结果。

防抖和节流

防抖和节流是提高前端性能优化的一种手段。
当用户在一段时间内不停的触发某个事件,导致回调函数不断执行,造成页面抖动,使性能得到浪费。
这时候就需要防抖,防抖就是为事件设置定时器,通过延迟来处理抖动,对于一定时间内重复多次触发的事件,就会重置定时器,最后一次触发事件的定时器结束才会执行事件函数。
不希望事件函数调用不停的输出结果,可以使用节流设置在一段时间内,只输出最后一次事件函数执行的结果。设置一个定时器,设置定时器结束后执行事件函数,然后重置定时器,使函数在下一个定时器结束时执行。

flex布局

flex布局即伸缩盒布局。让元素在盒子中在水平方向排列,不脱离默认文档流。
flex布局的元素:伸缩盒容器 设置display=“flex” ;伸缩盒元素 位于伸缩盒容器中的元素;主轴 默认为x轴,伸缩盒布局中伸缩盒元素沿主轴进行排列;交叉轴 与主轴垂直的轴 ;剩余空间 伸缩盒容器中伸缩盒元素未占用的空间,默认会将剩余空间留给最后一个元素。
伸缩盒容器规则

css单行居中,多行左对齐

grd布局

css三角形

选择器优先级

事件冒泡

事件循环

闭包

vue router原理

webpack打包过程

数组查找不重复的元素

vue 钩子函数

按钮,优化用户交互效果

输入一个url后会发生什么

session和cookie的区别

get和post的区别

http和HTTPS的区别

对程序开发的理解

跨域

数据中出现次数超过一半的元素

vue双向原理

vue从创建到销毁的过程

vue父子组件传值

vuex 原理

css垂直居中

发表评论:

Copyright Your WebSite.Some Rights Reserved.