js篇

requestAnimationFrame 实现的动画效果比 setTimeout 好的原因

requestAnimationFrame是在下一帧动画重绘之前执行传入的函数。能够保证传入的回调函数执行次数通常与浏览器屏幕刷新次数相匹配，一般是每秒钟60次。

但是setTimeout函数执行的间隔时间不一定是约定好的间隔时间，还与当前事件循环中的任务执行的时间有关，如果执行的时间太长的话，setTimeout里面的函数将会被延迟执行。

Map和Set的区别，Map和Object的区别

map：类似于对象，键值对的集合。任何具有 Iterator 接口、且每个成员都是一个双元素的数组的数据结构。 set：类似于数组。存储一个无重复元素的集合。 map的键名可以是任意类型的格式。但是Object键值只能存储字符串类型。对于键值的覆盖。map存储引用类型的键值对。只有当地址相同的键名才会被覆盖。

数组的filter、every、flat的作用是什么

filter：过滤数组 every：判断数组中每个元素都符合条件 flat：展开嵌套数组。

es6有哪些新特性

• 增加块级作用域。const，let。

• 增加promise。来解决回调地狱。

• 增加async await 。让异步代码同步书写。

• 解决NaN不等于NaN，0等于-0等严格相等判断的缺陷。

• 增加set，map数据结构。

• 增加模块化。

• 增加class，创建类的语法糖。

• 前端开发者不得不知的 ES6 十大特性

Promise的all和race有什么区别

• all：传入的promises数组状态全部变为fulfilled时，该promise状态才变为fulfilled。只要有一个promise变为rejected时，该promise状态就变为rejected。

• race：表示传入的promises数组只要一个状态改变，那么该promise状态就跟着变成对应的状态。

箭头函数和普通函数的区别

• 不绑定this。即使通过显示绑定也不能改变this指向。

• 无arguments。

• 不能使用new操作符调用。

• 不能简单返回对象字面量。需要使用()包裹。

let、var和const的区别？如果希望const定义的对象的属性也不能被修改该怎么做？

• let，const。具有块级作用域。前者定义变量，后者定义常量。没有声明提升。

• var不具有块级作用域。具有声明提升。

• 并且const不可以作为for循环的声明。因为他是将上一次变量的结果复制给下一次。所以不能用const。 可以通过Object.defineProperty设置writerable：false或者freeze。

堆和栈的区别

• 堆：用来保存引用类型的数据。如果存在闭包，他还会将闭包中应用的变量存放在堆中一份。

• 栈：用来保存基本数据类型，还有对象类型的地址值。

闭包的原理

内部函数访问外部函数的自由变量。自由变量的集合称为闭包。

广义上讲，js函数就是一个闭包 因为可以访问全局变量。

狭义上讲，函数的嵌套才会构成闭包。

instanceof的实现原理

function myInstanceof(instance, pro) {
        while(true) {
          if(instance.__proto__ === pro.prototype) {
            return true
          }else if(instance.__proto__ === null){
            return false
          }
          instance = instance.__proto__;
        } 
    }

new的实现原理

// 不能使用class构造函数。因为class定义的只能通过new调用
function MyNew(Constructor, ...arg) {
  // 1.创建一个对象
  const newObj = {}
 // 2.绑定prototype
  newObj.__proto__ = Constructor.prototype
 // 3.改变this指向
  Constructor.call(newObj, ...arg)
 // 4.返回新的对象
  return newObj
}

数据类型有哪些？如何判断一个数据是否是数组。

原始数据类型：number，string，boolean，symbol，bigint，null，undefined。

引用数据类型：Object，Array，RegExp，Date，Function等等。

isArray，instanceof，Object.propertype.toString.call(arr)。

分别介绍一下原型、原型链、作用域和作用域链的含义和使用场景。

原型：每个对象都有一个__proto__指向他的原型对象prototype，直到指向null。

原型链：每一个对象的__proto__属性都指向他的原型对象prototype。直到指向null。

这条链式结构就是原型链。并且对象中获取属性和方法都是通过这个指向来查找的。es5类的继承。

作用域

• 全局作用域。

• 函数作用域。

• 块级作用域。

作用域链。就是变量查找的路径。如果需要获取变量的值，那么他首先在自己的作用域中查找。如果没有，去上一层作用域，直到查到全局作用域。如果没有就报错。请注意，这种作用域链式基于词法作用域的，就是根据变量定义的位置决定的，而不是执行的上下文环境。

那他为什么会知道上层作用域是谁呢？

每个执行上下文中的变量环境中都有一个outer属性指向外部执行上下文。所以就依靠这个指向查找的。并且作用域链是由词法作用域决定的。

css篇

css和js两种方式实现div右移1000px动画

.box {
      width: 100px;
      height: 100px;
      background-color: skyblue;
      animation: animate 1s forwards;
    }
    @keyframes animate {
      0% {
        transform: translate(0, 0);
      }
      100% {
        transform: translate(1000px, 0);
      }
    }

js实现

const box=document.getElementsByClassName("box")[0];
    box.style.width="100px";
    box.style.height="100px";
    box.style.backgroundColor="red"
    box.style.position="relative";
    box.style.left="0";
    let id=setInterval(() => {
      if(parseInt(box.style.left)==1000) {
        clearInterval(id);
      }
      let left=parseInt(box.style.left);
      box.style.left=left+10+"px";
    },10)

visibility、display、opacity的区别

三者都可以隐藏元素。

• opacity: 0。元素不可见，但是还会占据空间，而且，需要注意，此时给它绑定事件，它会触发。

• display: none。直接把元素隐藏了，不占据任何空间，也不响应任何事件。

• visibility:hidden，元素不可见，但是还会占据空间，虽然它占据空间，但是如果给它绑定事件，它也不会触发。

单行截断css

这个就是为文本添加省略号，这个还挺常用。

更多实现，请查看这里。

添加单行省略号

width: 必须;
white-space: nowrap//不让内容折行
overflow: hidden;//溢出隐藏
text-overflow: ellipsis;//添加省略号

添加多行省略号

div {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;//最多2行，2行装不下就用...省略
  -webkit-box-orient: vertical;
}

flex布局

flex布局，老生常谈了。基本现在的布局都是用它了。

是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。

容器属性

• flex-direction：布局排列的方向

• flex-wrap：是否换行

• flex-flow：flex-direction 和 flex-wrap 组合。

• align-items: 侧轴的排列方式。

• justify-content: 主轴的排列方式

• align-content: 整个容器在侧轴的排列方式。注意和align-items的区别。align-items只是在当前行的排列，而不是相对于整个容器。

align-content和align-items区别请查看mdn

项目属性介绍请查看这里

flex：1

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。

flex: 1 = flex: 1 1 0%
flex: 2 = flex: 2 1 0%
flex: auto = flex: 1 1 auto
flex: none = flex: 0 0 auto，常用于固定尺寸不伸缩

transition、transform、translate的区别

• transition: 设置过度。

• transform: 一些变换。平移，旋转，斜切等等。

• translate: transform一个属性，用于设置x,y方向的平移。

如何画一条 0.5px 的边框

怎么画一条0.5px的边（更新）

说一下BFC

浅析BFC原理及作用

parent元素宽高不定，实现scale固定宽高比始终为4：3

这个不知道什么意思？？？希望可以在评论区留言。

CSS垂直居中的方案

CSS垂直居中的12种实现方式

伪元素和伪类的区别

总结伪类与伪元素 | AlloyTeam

position的几个属性和含义

CSS position 属性

我自己也总结了一篇文章

说一下盒模型

一个元素，最终显示在页面上，都是一个类似于盒子一样的。具有margin, padding, content, border值。

盒子模型分为两种，一个是正常的盒子模型，一类是怪异盒子模型。

• box-sizing: content-box。他设置的宽度就只是包括content。

• box-sizing: border-box。他设置的宽度包括padding + border + content。 这里需要注意一下。当子元素未设置宽度时，他的宽度和父元素的一样。并且添加margin, padding, border都不会增大元素总宽度，只会减少content来使宽度不变。双飞翼布局就利用了这一点。

响应式布局方案

前端响应式布局原理与方案（详细版）

三栏式布局方案

• flex布局

• 双飞翼布局。

• 圣杯布局。 双飞翼和圣杯都是通过设置浮动，并且将中间内容放在前面展示。这样做的好处之一是在网络不好的情况下，让中间的内容先展示。

二者的区别就是如何让中间元素的内容不被两边布局的容器遮住。

• 双飞翼布局是在外层包裹一个div元素，让其宽度为100%，然后由于盒子模型的特性，内部元素设置margin后，会自动将剩余空间分配给内部元素作为宽度。

• 圣杯布局直接设置padding值，将内容挤出覆盖的部分。但是需要社会中ie的怪异盒子模型。box-sizing: border-box。

如何提高动画的渲染性能

这样使用GPU动画

xdm，一起加油啊。正确进大厂。