css

说一下css的盒模型。

在HTML页面中的所有元素都可以看成是一个盒子

  • 盒子的组成：内容（content）、内边距（padding）、边框（border）、外边距（margin）

盒模型的类型：

  • 标准盒模型
    margin + border + padding + content

  • IE盒模型
    margin + content（border + padding）

  • IE盒模型的优点就是盒子实际的宽高就是自己设置的宽高，无需在进行计算，它的padding包含在content中

控制盒模型的模式：box-sizing：content-box（默认值 - 标准盒模型）、border-box（IE盒模型）;

css选择器的优先级？

  • css的特性：继承性、层叠性、优先级

优先级：写css样式的时候，会给同一个元素添加多个样式，此时谁的权重高就显示谁的样式

标签、类/伪类/属性、全局选择器、行内样式、id、!important

!important > 行内样式 > id > 类/伪类/属性 > 标签 > 全局选择器

隐藏元素的方法有哪些？

  1. display：none;
  • 元素在页面上消失，不占据空间
  1. opacity：0;
  • 设置了元素的透明度为0，元素不可见，占据空间位置
  1. visibility：hidden;
  • 让元素消失，占据空间位置，一种不可见的状态

  1. position：absolute;

  2. clip-path（剪切）

px和rem的区别是什么？

px是像素，显示器上给我们呈现画面的像素，每个像素的大小是一样的，绝对单位长度

rem，相对单位，相对于html根节点的font-size的值，直接给html节点的font-size：62.5%；1rem = 10px；（16px * 62.5% = 10px）

什么是重绘和回流？两者区别？

  • 重排（回流）：当渲染树中的⼀部分(或全部)因为元素的规模尺⼨，布局，隐藏等改变⽽需要重新构建。这就称为回流(reflow)。

  • 重绘：当渲染树中的⼀些元素需要更新属性，⽽这些属性只是影响元素的外观，⻛格，⽽不会影响布局的，则就称为重绘。

二者区别：回流必将引起重绘，⽽重绘不⼀定会引起回流。⽐如：只有颜⾊改变的时候就只会发⽣重绘⽽不会引起回流
当⻚⾯布局和⼏何属性改变时就需要回流

让一个元素水平垂直居中的方法有哪些？

  1. 定位加平移
1
2
3
4
5
父：position: relative; 
子：position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  1. 弹性布局
1
2
3
4
父:
display: flex;
justify-content: center;
align-items: center;

  1. 子盒子定位时，top,left,right,bottom都设置为0，然后margin: auto; 也能实现居中

  2. table布局

将父元素设置 display:table-cell 子元素设置 display: inline-block

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style>
  .father {
    width: 400px;
    height: 400px;
    background-color: pink;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }

  .son {
    width: 200px;
    height: 200px;
    background-color: aquamarine;
    display: inline-block;
  }
</style>
<div class="father">
  <div class="son"></div>
</div>
  1. grid网格布局
1
2
3
display: grid;
align-items: center;
justify-content: center;

css哪些属性可以继承？哪些不可以继承？

  • 子元素可以继承父元素的样式
  1. 字体的一些属性：font
  2. 文本的一些属性：line-height
  3. 元素的可见性：visibility：hidden
  4. 表格布局的属性：border-spacing
  5. 列表的属性：list-style
  6. 页面样式的属性：page
  7. 声音的样式属性

有没有用过预处理器（sass和less）？

  • 基本概念

    • 1.sass，less都是CSS的预处理器，其基本思想就是用编程的思路编写CSS代码。增加了变量，嵌套，函数，语句，继承等概念。有助于模块化开发，例如写一个换肤的效果，以前我们需要写多套css样式，现在引入了变量的概念，只需要写一套css，改变变量就可以了。
    • 2.浏览器对sass和less是不识别的，在vscode中下载插件easy less/easy sass 将编写好的sass和less文件转化成css文件，在项目开发中会用npm下载其他的插件。

  • 区别

    1. 编译环境不同
    2. 变量符不一样 less是用@,sass是用$
    3. sass支持条件语句，可以使用if{}else{},for{}循环等等。而less不支持。
    4. Sass和Less的工具库不同 Sass有工具库 Compass, Less有UI组件库Bootstrap

JavaScript

JS由哪三部分组成？

ECMAScript：js的核心内容，描述了语言的基础语法，比如var，for，数据类型（数组、字符串），

文档对象模型（DOM）：把整个html页面规划为元素构成的文档

浏览器对象模型（BOM）：对浏览器窗口进行访问和操作

JS有哪些内置对象？

String Boolean Number Array Object Function Math Date RegExp…

  1. Math
  • abs() 绝对值
  • sqrt() 开平方
  • max() 最大值
  • min() 最小值
  1. Data
  • new Data() 实例化时间
  • getMonth()：获取对象的月份
  • getFullYear()：获取对象的年份方法，获取到的年份一般是4位数，如2019。
  • getMinutes()：获取分钟数，范围0-59。
  • getSeconds():获取秒数，范围0-59。
  1. Array
  1. String
  • content()
  • length
  • slice()
  • split()

操作数组的方法有哪些？

push() pop() sort() splice() unshift() shift() reverse() concat() join() map() filter()

哪些方法会改变原数组？
push() pop() unshift() shift() sort() reverse()

JS对数据类的检测方法方式有哪些？

1、typeof:主要用来检测基本数据类型

2、instanceof:用于检测构造函数中的原型(prototype)属性是否出现在某个实例对象的原型链上

语法结构：实例对象 instanceof 构造函数名字
返回值：布尔
举例：

1
2
console.log( [] instanceof Array )
console.log( new Array )

3、constructor：用于检测实例对象是否由某个构造函数实例化出来的

语法：实例对象.proto.constructor == 函数名
返回值：布尔
举例：

1
a.__proto__.constructor == A

4、Object.prototype.toString().call()：能判断具体的类型数组

检测对象的时候不用加call也可以
别的数据类型必须用call，否则的话就变成转成字符串的方法了

说一下闭包，闭包有什么特点？

  • 闭包：闭包就是能够读取其他函数内部变量的函数

    • 1、外层函数嵌套了内层函数
    • 2、内层函数对外层函数的活动变量(AO)进行访问
    • 3、内层函数执行、创建上下文，此时就形成了闭包 => 闭包就是一个环境
      一句话概括:
      或者说:闭包就是可以访问其它函数内部数据的函数
      或者说:当一个嵌套的内部(子)函数引用了嵌套外部(父)函数的变量(函数)时 内部(子)函数执行就产生了闭包

  • 闭包需要满足三个条件：

    1. 访问所在作用域；
    2. 函数嵌套；
    3. 在所在作用域外被调用。

  • 优点：

  • 延长作用域链(局部变量的生命周期)、缓存数据、避免全局污染
  • 闭包应用1：让函数外部可以操作函数内部的数据
  • 闭包应用2：定义S模块
  • 具有特定功能的js文件
  • 将所有的数据和功能都封装在一个函数内部(私有的)
  • 只向外暴露一个包含n个方法的对象或函数
  • 模板的使用者,只需要通过模块暴露的对象调用方法来实现对应的功能
  • 缺点:
  • 比较耗费内存、使用不当会造成内存溢出的问题
  • 优点同时就是缺点 容易造成内存泄漏
  • 常见的js内存泄漏陷阱:闭包、遗漏的定时器、定义过多的全局变量
1
2
3
4
5
6
7
8
9
10
function fn() {
  var num = 1;
  return function () {
    num++
    this.innerHTML = num
  }
}
for (let i = 0; i < btns.length; i++) {
  btns[i].onclick = fn()
}
1
2
3
4
5
6
7
8
9
10
function fn() {
  var num = 10;
  function fun() {
    console.log(num);
  }
  return fun;
}
var f = fn();
f()

说一下原型链

前端的内存泄露怎么理解？

如何实现一个深拷贝？

scrtip标签里的async和defer有什么区别？

用递归的时候有没有遇到过什么问题？

promise的内部原理是什么？它的优缺点是什么？

token的登录流程。

页面的渲染过程是怎样的？

精灵图和base64区别是什么？

了解过JWT吗？

svg格式了解多少？

npm的底层环境是什么？

有没有做过无感登录？

大文件上传是怎么做的？

了解过diff算法和虚拟DOM吗？