前端开发技巧与优化-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43378800/article/details/100563721

1.用css的方式给按钮设置禁用

disabled
设置鼠标不可点击 cursor: not-allowed
鼠标原有的事件不能实现 pointer-events:none

2.hashchange 是什么

当URL的片段标识符更改时，将触发hashchange事件 (跟在＃符号后面的URL部分，包括＃符号)

3.ssh协议

SSH协议使用加密技术确保client和server之间的连接安全
所有的认证，命令，输出，以及文件传输都会被加密，加密是为了抵御来自互联网的攻击

4.防抖和节流

防抖
- 为什么会产生:当页面上下滚动的时候,页面上的数据会立马触发
```
window.onscroll =function (){
   console.log('我被触发了')
 }
```
- 怎么防抖:当事件一直被触发的时候,不执行函数,当事件触发停止一会之后,再执行函数

   let timer = null;
    window.onscroll = function () {
      if (timer) {
        clearInterval(timer)
      } 
        timer=setTimeout(() => {
          console.log('我被触发了')
        }, 200);
    }

节流

什么是节流
- 当事件持续触发的时候,必须经过一段时间再执行,否则一直发送请求,会很浪费性能

怎么节流

当持续触发事件的时候,也要经过一段时间再触发

 function jieliu(tm, fn) {
 // 这段时间的开始时间
 let beginTime = Date.now()
 return function () {
   // 得到当前时间
   let nowTime = Date.now()
   // 得到两个时间的时间差
   let space = nowTime - beginTime
   // 判断 时间间隔是否大于等于 tm 如果大于等于了，需要执行一次函数
   if (space >= tm) {
     fn()
     // 重置开始时间
     beginTime = Date.now()
 		  }
	 	}
   	 }
   	 		// 给页面添加滚动事件
   	 window.onscroll = jieliu(500, () => {
 		console.log('onscroll')
   	})

5.你对async和await的理解

用来处理异步请求,即你发的异步请求,也需要像同步那样,等异步返回完结果后再往下执行
- async
  - 异步的缩写,用来声明一个函数是异步的
- await
  - 等待的意思,声明在异步函数的内部
- 结果：
  - 异步代码会返回一个结果：操作完成后的结果
- 特点：
  - 异步代码虽然是以同步的方式进行书写，但是依旧是异步执行的
  - await 修饰的对象一定要返回一个 promise 对象

代码例子 :

async getCateList() {
   // 发送到请求得到数据
   var res = await myrequest({
     url: 'https://.....'
   })
   // 解构
   let { message, meta } = res.data
   // 判断
   if (meta.status === 200) {
     this.cateNavList = message
     console.log(this.cateNavList)
   }
 }

6.解决浏览器跨域问题

什么叫跨域:网络域喝浏览器有同源策略(cros),即:协议相同,域名相同,端口相同三者成立才叫同源,三者其一不同源,就是跨域
jsonp --只支持get,不支持post dataType: ‘jsonp’
就是在程序中添加HTTP头 Response.Headers.Add("Access-Control-Allow-Origin", "*")

7.页面卡顿怎么解决

F12,打开控制台,找到network,再刷新网页,看那个文件加载的比较慢

8.解决浏览器的兼容问题

css兼容
- 写样式的时候,加前缀如下划线_,星号*
- 超出盒子高度就overhidden
web喝移动端的兼用
- 使用响应式布局
  - flex
  - rem
js的兼容
- 太多了…

9.写一个冒泡排序

let temp;
for (let i=0;i<arr.length;i++){
	for (let j=0;j<arr.length-i;j++) {
		if (arr[j]>arr[j+1]){
			temp=arr[j];
			arr[j]=arr[j+1];
			arr[j+1]=arr[j];
		}
	}
}

10.数组去重

set的方法

var arr1=[1,2,3,4,3,1]
   var arr2=[2,3,4]
     function getaArr(a,b){
       var obj=[]
       obj=Array.from(new Set([...a,...b]))
       return obj
     }
     console.log(getaArr(arr1,arr2))

双重遍历

  function getArr(arr) {
      for (var i = 0; i < arr.length; i++) {
        for (var j = i + 1; j < arr.length; j++) {
          if (arr[i] === arr[j]) {         
            arr.splice(j, 1);
            j--;
          }
        }
      }
      return arr;
    }
    var arr = [1, 2, 3, 4, 3, 1];
    getArr(arr)
    console.log(getArr(arr))

11.对象的循环
Object.keys
作用：获取对象中所有的属性，以一个数组的形式进行展示

13.数组中常用到的方法

arr.concat() 连接两个数组
arr.jion() 用于指定字符型进行分割
arr.pop() 删除最后一个元素,返回一个新的对象
arr.push() 向尾部添加一个新的元素
arr.reserve() 颠倒数组的顺序
arr.sort() 进行排序
arr.splice() 删除元素,或者添加元素
arr.Tostrig() 转换为字符串

14.::before和:after中的双冒号和单冒号的区别

单冒号: 伪类
双冒号: 伪元素
作用:
- 可以在元素的前面或者后面加上指定的内容
- 可以用来画三角形
- 清楚浮动的影响
- …

15.比较typeof和instanceof

相同
- 用于判断变量是否为空或者什么类型
不同
- typeof
  - 返回的值是一个字符串,用于说明类型
  - 用法 typeof(Array)!="undefined"
  - 局限性:对于Array、null等,返回的是object
- instanceof
  - 用于判断变量是否属于某个对象的实例
  - 用法var a=new Array()
    console.log(a instanceof Array)