面试之css和js

css篇

https://juejin.im/post/5ce607a7e51d454f6f16eb3d#heading-16

• 在正常水平布局下，如果没有设置宽度，仅仅设置高度是可以的，此时的宽度充满整个屏幕，但是不能不设置高度，如果不设置高度就会从整个布局消失。
• css盒模型：box-sizing
• link标签和import标签的区别？
  1.link标签是html标签，在页面加载时会被一起加载，没有兼容性，权重高于import,link不仅仅可以有链接,还可以有ref等,而import只能有链接.
  2.import是css提供的，在页面加载完才会被加载，ie5以上才兼容。
• flex布局：看博客
• bfc（重点掌握，面试必问）
• 水平居中和垂直居中的方法（这个要总结着记，分水平和垂直，水平又分块级元素和行内元素，还要分定高和不定高）
• 块级元素和行内元素：行内元素的非。。元素的无法设置宽度和高度，在在垂直方向上padding和margin无效
• visibility=hidden：将元素隐藏，不会改变元素的位置，事件点击无效, opacity=0：将元素隐藏，不会改变元素的位置，事件点击有效，display:none：会改变页面布局。
• 布局之定位：（包括z-index）
  1.z-index（层叠上下文）：如果两个同级元素的此属性具有同样的值，那么将依据它们在HTML文档中流的顺序层叠，写在后面的将会覆盖前面的。需要注意的是，父子关系是无法用z-index来设定上下关系的，一定是子级在上父级在下（？？）
  关于z-index：
  https://juejin.im/post/5b876f86518825431079ddd6
  2.首先，z-index属性值并不是在任何元素上都有效果。它仅在定位元素（定义了position属性，且属性值为非static值的元素）上有效果。
  判断元素在Z轴上的堆叠顺序，不仅仅是直接比较两个元素的z-index值的大小，这个堆叠顺序实际由元素的层叠上下文、层叠等级共同决定。
  3.设置为auto时不会产生层叠上下文。（注意区别层叠上下文（层叠关系）和层叠顺序，）
• 布局之浮动
• css3新增（html5新增前面也有说到，自习看看别忘记）：CSS3的新特性中，在布局方面新增了flex布局，在选择器方面新增了例如first-of-type,nth-child等选择器，在盒模型方面添加了box-sizing来改变盒模型，在动画方面增加了animation，2d变换，3d变换等，在颜色方面添加透明，rbga等，在字体方面允许嵌入字体和设置字体阴影，最后还有媒体查讯等
  4.文档流：按照其在html中的位置顺序决定排布的过程，即块级元素独占一行，内联元素不独占一行
• css优先级 !importment>内联样式>id选择器样式>类选择器样式>元素选择器
• 三栏布局
• 画个三角形？正方形？
  最简单的就是放个图片。
  https://www.cnblogs.com/lou-0820/p/10558799.html
• 了解重绘和重排吗，知道怎么去减少重绘和重排吗，让文档脱离文档流有哪些方法
  DOM的变化影响到了预算内宿的几何属性比如宽高，浏览器重新计算元素的几何属性，其他元素的几何属性也会受到影响，浏览器需要重新构造渲染书，这个过程称之为重排，浏览器将受到影响的部分重新绘制在屏幕上 的过程称为重绘，引起重排重绘的原因有：
  添加或者删除可见的DOM元素，
  元素尺寸位置的改变
  浏览器页面初始化，
  浏览器窗口大小发生改变，重排一定导致重绘，重绘不一定导致重排，
  减少重绘重排的方法有：
  不在布局信息改变时做DOM查询
  使用csstext,className一次性改变属性
  使用fragment
  对于多次重排的元素，比如说动画。使用绝对定位脱离文档流，使其不影响其他元素

js篇

• 闭包：一句话可以概括：闭包就是能够读取其他函数内部变量的函数，或者子函数在外调用，子函数所在的父函数的作用域不会被释放。
  https://www.jianshu.com/p/102e44f35b3b
  1.创建闭包最常见的方式就是在函数内部创建一个函数，并且return这个函数（所以函数内部创建的那个函数才是闭包？？）
  2.闭包的作用域链包含着它自己的作用域，以及包含它的函数的作用域和全局作用域。
  3.闭包的注意事项：通常，函数的作用域及其所有变量都会在函数执行结束后被销毁。但是，在创建了一个闭包以后，这个函数的作用域就会一直保存到闭包不存在为止
  4.在javascript中，如果一个对象不再被引用，那么这个对象就会被垃圾回收机制回收；(null行为？)
  如果两个对象互相引用，而不再被第3者所引用，那么这两个互相引用的对象也会被回收。
  5.闭包只能取得包含函数中的任何变量的最后一个值(这个不好理解，匿名函数和自调函数也不太理解，多看看上面那个文章)
  6.闭包中的this对象：匿名函数的作用域为全局环境
  7.内存泄露（程序中己动态分配的堆内存由于某种原因程序未释放或无法释放，造成系统内存的浪费，导致程序运行速度减慢甚至系统崩溃等严重后果。）:
  (1)闭包会引用包含函数的整个变量对象，如果闭包的作用域链中保存着一个HTML元素，那么就意味着该元素无法被销毁。所以我们有必要在对这个元素操作完之后主动销毁。
  (2)当函数内部的定时器引用了外部函数的变量对象时，该变量对象不会被销毁。(注意外部函数是值得包含闭包的那个函数，也就是包含定时器的那个函数，定时器:settimeout)
  8.闭包的应用
  （1）应用闭包的主要场合是：设计私有的方法和变量。私有变量包括函数的参数、局部变量和函数内定义的其他函数
  (2)匿名函数最大的用途是创建闭包，并且还可以构建命名空间，以减少全局变量的使用。从而使用闭包模块化代码，减少全局变量的污染。
  9.运用闭包的关键：闭包引用外部函数变量对象中的值；
  在外部函数的外部调用闭包。
  10.缺陷：闭包的缺点就是常驻内存会增大内存使用量，并且使用不当很容易造成内存泄露。
  如果不是因为某些特殊任务而需要闭包，在没有必要的情况下，在其它函数中创建函数是不明智的，因为闭包对脚本性能具有负面影响，包括处理速度和内存消耗。
• 类的创建和继承（函数类？）
  1（类的创建）.function 类名(){//属性和方法} 类名.prototype.方法(){//原型方法} 当类实例化为对象后，就有了方法和属性
  2.继承 （敲熟！）
  (1)原型链继承
  (2)构造函数继承:使用父类的构造函数来增强子类实例，等于是复制父类的实例属性给子类（没用到原型）
  特点：可以实现多继承
  缺点：只能继承父类实例的属性和方法，不能继承原型上的属性和方法。
  (3)组合继承：相当于构造继承和原型链继承的组合体。通过调用父类构造，继承父类的属性并保留传参的优点，然后通过将父类实例作为子类原型，实现函数复用
  特点：可以继承实例属性/方法，也可以继承原型属性/方法
  缺点：调用了两次父类构造函数，生成了两份实例
  (4)寄生组合继承
• 如何解决异步回调地狱：promise，generator，async/await
• 前端的事件流：事件流描述的是从页面中接收事件的顺序,DOM2级事件流包括下面几个阶段。
  https://juejin.im/entry/5826ba9d0ce4630056f85e07
  事件捕获阶段
  处于目标阶段
  事件冒泡阶段
  1.关于又有捕获阶段又有冒泡阶段该怎么触发事件：当容器元素及嵌套元素（有父元素子元素等嵌套），即在捕获阶段又在冒泡阶段调用事件处理程序时：事件按DOM事件流的顺序执行事件处理程序，dom事件流如下，（先捕获，在目标，再冒泡）
  
  当在目标阶段，比如点击子元素，子元素上同时有冒泡和捕获，则按照事件书写的顺序来出发。
  2.添加和删除事件程序（事件程序通常为一个数）:addEventListener\removeEventListener
  3.事件对象：stoppropogation(cancelbubble=true) preventdefault(returnvalue=false) target
• 事件委托(利用事件冒泡。在其父元素上设置事件监听函数)
  每个函数都是对象，都会占用内存，内存中的对象越多，性能就越差。对事件处理程序过多问题的解决方案就是事件委托
  简介：事件委托指的是，不在事件的发生地（直接dom）上设置监听函数，而是在其父元素上设置监听函数，通过事件冒泡，父元素可以监听到子元素上事件的触发，通过判断事件发生元素DOM的类型，来做出不同的响应。
  举例：最经典的就是ul和li标签的事件监听，比如我们在添加事件时候，采用事件委托机制，不会在li标签上直接添加，而是在ul父元素上添加.
• 事件传播机制和dom事件
  https://www.jianshu.com/p/1eb41968c8e3
  好处：比较合适动态元素的绑定，新添加的子元素也会有监听函数，也可以有事件触发机制
• 图片的预加载和懒加载：预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。
  懒加载：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。
• js的new操作符都做了什么：new 操作符新建了一个空对象，这个对象原型指向构造函数的prototype，执行构造函数后返回这个对象。
• bind，call，apply的区别：通过apply和call改变函数的this指向，他们两个函数的第一个参数都是一样的表示要改变指向的那个对象，第二个参数，apply是数组，而call则是arg1,arg2…这种形式。通过bind改变this作用域会返回一个新的函数，这个函数不会马上执行。https://blog.csdn.net/weixin_41144066/article/details/89511285（最主要是看看他的其他的几个博客）
  手写call补充理解：

Function.prototype.myCall = function(context) { //context是一个可选参数
  if (typeof this !== 'function') {
    throw new TypeError('Error')
  }
  //当传入的context为基础类型时，直接挂载fn会报错，因为基础类型没有属性这一说
  if(typeof context !== 'object') context=new Object(context);
 
  context = context || window            //context 为可选参数，如果不传的话默认上下文为 window
  context.fn = this                      //给 context 创建一个 fn 属性，并将值设置为需要调用的函数，因为this指向的是一个对象，是调用该函数的对象，所以指向的就是我们需要调用的函数，因为是我们需要调用的函数调用call函数，并且将这个函数赋给了fn。
  const args = [...arguments].slice(1)   //call 可以传入多个参数作为调用函数的参数，所以需要将参数剥离出来
  const result = context.fn(...args) //因为fn被赋值成了一个函数，函数括号内为参数，所以就可以调用了。
  delete context.fn                      //调用函数并将对象上的函数删除，（记住就好。）
  return result
}

手写apply补充：call和apply只有在参数上不同，apply只有两个参数，第二个参数为数组，为arguments[1].

context.fn = this
  let args = arguments[1]
  let result
  if (args) {
    result = context.fn(...args)
  } else {
    result = context.fn()
  }

手写bind

Function.prototype.bind2 = function (obj) {
    if (typeof this !== "function") { //不是函数不能调用bind方法
      throw new Error("Function.prototype.bind - what is trying to be bound is not callable");
    }
    var that = this;
    var args = [].slice.call(arguments,1);
    var func =  function () {
        that.apply(this instanceof func ? this : obj,args.concat([].splice.call(arguments,0))); //用来判断是不是作为构造函数：this instanceof func === true是则是构造函数
    };
    fNOP.prototype = this.prototype; //利用空函数fNOP实现继承原型链同时又不改变原函数的原型链
    fbound.prototype = new fNOP();
    return func;
};

• js的各种位置 offsettop
• clientX，clientY标识的是鼠标的坐标，分别标识横坐标和纵坐标，并且我们用offsetX和offsetY来表示元素的元素的初始坐标
• 异步加载js：defer async
• js节流和防抖
  https://juejin.im/entry/5b1d2d54f265da6e2545bfa4
  https://juejin.im/post/5c87b54ce51d455f7943dddb#heading-5（重点第二篇）
• js正则表达式
  https://juejin.im/post/5b5db5b8e51d4519155720d2