HTML+CSS

1.如何实现左侧固定、右侧自适应的两栏布局

css计算属性
<!---Html--->
<div>
    <div class="left"></div>
    <div class="right"></div>
 </div>
<!---css--->
.left {
  display: inline-block;
  background: red;
  width: 300px;
  height: 500px;
}
.right {
  display: inline-block;
  background: palegreen;
  width: calc(100% - 300px);
  height: 500px;
}

flex方式
<!---Html--->
<div class="box">
    <div class="left"></div>
    <div class="right"></div>
 </div>
<!---css--->
.box{
  display: flex;
}
.left {
  background: red;
  width: 300px;
  height: 500px;
}
.right {
  flex: 1;
  height: 500px;
  background: forestgreen;
}

左浮动+margin
<!---Html--->
<div class="box">
    <div class="left"></div>
    <div class="right"></div>
 </div>
<!---css--->
.left {
  background: red;
  width: 300px;
  height: 500px;
  float: left;
}
.right {
  margin-left: 300px;
  width: 100%;
  height: 500px;
  background: forestgreen;
}

左浮动+右侧开启BFC
<!---Html--->
<div class="box">
    <div class="left"></div>
    <div class="right"></div>
 </div>
<!---css--->
.left {
  background-color: lightblue;
  width: 300px;
  height: 500px;
  float: left;
}

.right {
  height: 500px;
  overflow: hidden;
  background-color: saddlebrown;
}

2.div垂直水平居中？

flex布局
<!---Html--->
<div class="box">
    <div class="left"></div>
 </div>
<!---css--->
.box{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.left{
  width: 100px;
  height: 100px;
  background: red;
}

定位+margin
<!---Html--->
<div class="box">
    <div class="left"></div>
 </div>
<!---css--->
.box {
  width: 100%;
  height: 100%;
  position: relative;
}
.left {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin: auto;
  margin-left: -50px;
  margin-top: -50px;
  background: red;
}

定位+平移
<!---Html--->
<div class="box">
    <div class="left"></div>
 </div>
<!---css--->
.box {
  width: 100%;
  height: 100%;
  position: relative;
}
.left {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin: auto;
  transform: translate(-50%, -50%);
  background: red;
}

3.css盒子模型包含哪些？

内容区（content）+ 填充（padding）+ 边框（border）+ 空白边（margin）

4.什么是BFC,BFC是怎么出现的？

块级格式化上下文
触发BFC的几种方式
-给元素设置浮动 float: left | right
-给元素设置脱离文档流的定位 position: absolute | fixed
-给元素设置内容溢出 overflow: hidden | scroll |auto
-给元素设置 display: flex | inline-block | table-cell

5.清除浮动有哪些方式？

--添加一个空的标签
--添加伪元素
--父元素添加overflow: hidden;

6.css有哪些选择器？

内联样式、ID选择器、类选择器、元素选择器、伪元素选择器、相邻选择器、子代选择符、兄弟选择符、后代选择符

7.选择器的优先级？

【内联样式】 > 【ID选择器】 > 【类选择器、属性选择器、伪类选择器】 > 【标签选择器 、[伪元素]
!important属性大于所有选择器

8.html新增的标签有哪些？

<header> :头部标签
<nav> :导航标签
<article> :内容标签
<section> :定义文档某个区域
<aside> :侧边栏标签
<footer> :尾部标签
<audio>:音频标签
<video>:视频标签

9.哪些是行内元素，哪些是块级元素？

行内元素：i、span、img、b、input、a
块级元素：div、p、br、h1-h6、ul-li、ol-li、form

10.移动端适配有哪几种方式？

响应式布局，通过媒体监听@media实现一套html配合多套css实现适配；
通过rem或者vw,vh等实现不同的设备按照相同的比例适配；

11.从地址栏输入url这个过程说下发生了什么？

流程：--浏览器的地址栏输入URL并按下回车。
--浏览器查找当前URL是否存在缓存，并比较缓存是否过期。
--DNS解析URL对应的IP。
--根据IP建立TCP连接（三次握手）。
--HTTP发起请求。
--服务器处理请求，浏览器接收HTTP响应。
--关闭TCP连接（四次挥手）。
--渲染页面，构建DOM树。
--强缓存和协商缓存：在第一次发送请求后再次发起请求会经过两个步骤，1.浏览器查看响应头中两个参数的内容( expires 和 cache-control)，如果没有过期且命中缓存，那么直接读取缓存内容。如果过期且没有命中，那么就会向服务器发起请求进行协商缓存，服务器判断是否需要读取缓存内容并返回状态码为304。

12.网页加载慢，因为什么？(最少说五种)

1.资源加载堵塞 2.js运行阻塞线程 3.内存泄漏导致内存过大 4.页面回流和重绘较多 5.过多的http请求

13.link和@import有什么区别？

1.link 属于 XHTML 标签，而 @import 完全是 CSS 提供的一种方式。
2.link会在浏览器加载过程中就被同时加载，@import是所有资源加载结束后才加载。
3.link没有兼容问题，@import只能在IE5之后使用。

14.display:none和visibility:hidden的区别？

display:none隐藏元素且不占位 visibility:hidden隐藏元素且占位。

15.IE 8以下版本的浏览器中的盒模型有什么不同?

在标准的盒子模型中（ie8 以上的版本中），宽度和高度指的是 content部分；
但是在ie8以下的版本中，宽度和高度具体指 content + padding + border 三部分；
ie8以下的盒模型宽高包括 内容 内边距 边线
ie8以上的盒模型宽高只包括内容

js

1.数组中常用方法有哪些？

map、includes、splice、slice、join、find、findIndex、some、every、reduce、sort、set

2.in 和 for in的区别？

in是关键字，用来判断属性是否存在当前对象中
for in 是遍历对象的循环方法

3.js的数据类型有哪些？

基本数据类型： Number、String、Boole、Null、Undefault、Bigint、Symbol
引用数据类型：Object

4.原型是什么？原型链是什么？

原型就是Prototype 原型链就是proto，proto指向原型对象，比如在使用toString方法时本身没有定义，但是toString是内置的方法在原型中存在，会通过proto查找并使用，proto会一直查找到Object上，如果没有找到指向null并返回，这个过程就是原型链。

5.闭包是怎么出现的？如果不回收有什么影响？

函数内部返回函数，内部函数访问外部函数的变量，形成闭包。
如果不回收会出现大量不可回收对象导致内存溢出。

6.继承的实现方式有哪些？
7.防抖和节流的实现方式及应用场景说一下。
8.浏览器跨域怎么出现的，如何解决？
9.常见的ajax请求头Content-Type有哪些？

1、application/x-www-form-urlencoded
2、multipart/form-data
3、application/json
4、text/xml

10.typeof和instanceof的区别？

typeof是判断对象类型的 instanceof是判断是否是当前属性的实例

11.let,var,const这三个关键字的区别是什么？

var有变量提升let和const没有
var可以重复声明let和const不可以重复声明
let和const存在作用域死区var没有
var没有块级作用域，let和const有块级作用域

12.作用域有哪些？

全局作用域、函数作用域、块级作用域

13.cookie和session区别？

cookie存储在客户端，session存储在服务端
session保存的是对象，Cookie保存的是字符串
session在会话结束后就会关闭，但是Cookie可以经过持久化而长期保存在客户端的本地硬盘上
cookie大小一般不超过3K

14.sessionstorage和localstorage的区别？

sessionstorage是会话缓存，浏览器关闭内容销毁，localstorage是常驻缓存，关闭浏览器后再次打开还是存在的。两种缓存大小一般都是5M。

15.箭头函数和普通函数的区别？

this指向不同，箭头函数没有this，它的this取决于它的上级this是谁。普通函数的this默认指向windows，或者谁调用this就指向谁。

16.await和.then的区别？
17.常见的ajax的请求方式有哪些？

Get、Post、Put、Delete、Head、Connect、Options、Trace

18.浏览器状态码有哪些？

200 服务器已成功处理了请求
304 自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容
400 请求错误
403 服务器拒绝请求
404 服务器找不到请求的网页
500 服务器遇到错误

19.call和apply的区别？

都是改变this指向的，call和apply的第二个参数不相同，call是若干个参数的列表，apply是一个数组。
手写一个call和apply方法

call
Function.prototype.MyCall = function(object) {
    let obj = object || window;
    obj.fn = this;
    let param =[...arguments].slice(1);
    console.log(this);
    let result = obj.fn(...param);
    return result
  }
apply
Function.prototype.MyApply = function (object) {
  let obj = object || window;
  obj.fn = this;
  let result = arguments[1] ? obj.fn(arguments[1]) : obj.fn([]);
  return result;
};

20.说一下ES6的新增方法。

let、promise、结构赋值、Symbol、箭头函数、

21.说一下事件机制流？（冒泡捕获）

dom事件流有三个阶段，分别是事件捕获阶段、处于目标阶段和事件冒泡阶段。完整的事件流是先捕获，其次处理，最后冒泡。

22.队列和栈得区别？

队列先进先出 栈先进后出

23.null和undefined的区别？

null表示为空，此处不应该有值
undefined表示未定义，变量已经声明但是没有赋值。

vue

1.vue的生命周期有哪些？

beforeCreate-created-beforeMount-mounted-beforeUpdate-updated-activated-deactivated-beforeDestroy-destroyed

2.父子组件的生命周期顺序是什么？

加载渲染过程
　　父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
子组件更新过程
　　父beforeUpdate->子beforeUpdate->子updated->父updated
父组件更新过程
　　父beforeUpdate->父updated
销毁过程
　　父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

3.vue父子组件互相传值有哪些方式？

props、Vuex、EventBus、provide / inject、listeners、refs

4.v-if和v-show的区别？

v-if是不显示元素、v-show是隐藏元素

5.v-if和v-for的优先级？

v-for的优先级比v-if高，不建议混合使用

6.vue是如何实现双向绑定的？

vue2通过Object.defineProperty来实现，Vue3通过Proxy来实现。

7.MVVM模式是什么？

模型层、数据层、传输层，模型层不会和数据层有直接关系，是通过传输层来传输改变内容。

8.v-model是什么原理？

实际就是change和value结合的语法糖。

9.为什么v-for的时候一定要传key？

如果不传key会在虚拟DOM和真实DOM比对时出现不一致的情况，导致生成真实DOM时认为节点不相同，会直接删除节点重新创建，如果正确传key在比对过程中就不会有浪费性能的情况存在。

10.vue-router的hash和history有什么区别？

hash模式地址栏有#
history模式没有#,需要对nginx或者Apache进行配置

拓展

1.git常用命令有哪些？
2.https 和 http优略？
3.两个项目用到相同组件你如何做？
4.请说出几种减少页面加载时间的方法？
5.如何防止xss注入？
6.GET和POST的区别，何时使用POST？
7.对优化做了哪些事情？

1.图片懒加载
2.路由懒加载
3.三方插件按需引入
4.对不变的长列表，取消双向绑定劫持
5.使用image-webpack-loader压缩图片
6.开启 gzip 压缩
7.对固定的插件或者图片使用CDN形式
8. 减少png、jpg的使用，进来使用字体库或者svg
9.代码中减少console.log，注意闭包的使用及时删除，减少DOM回流重绘，避免使用css表达式

8.webpack和vite有哪些区别？

开发阶段vite的速度远快于webpack，主要是因为：
webpack是先打包再启动开发服务器，vite是直接启动开发服务器，然后按需编译依赖文件。
下面详细来说：
webpack先打包，再启动开发服务器，请求服务器时直接给予打包后的结果；
vite直接启动开发服务器，请求哪个模块再对哪个模块进行实时编译；
由于现代浏览器本身就支持ES Modules，会主动发起请求去获取所需文件。vite充分利用这点，将开发环境下的模块文件，就作为浏览器要执行的文件，而不是像webpack先打包，交给浏览器执行的文件是打包后的；
由于vite启动的时候不需要打包，也就无需分析模块依赖、编译，所以启动速度非常快。当浏览器请求需要的模块时，再对模块进行编译，这种按需动态编译的模式，极大缩短了编译时间，当项目越大，文件越多时，vite的开发时优势越明显；
在HRM方面，当某个模块内容改变时，让浏览器去重新请求该模块即可，而不是像webpack重新将该模块的所有依赖重新编译；
当需要打包到生产环境时，vite使用传统的rollup进行打包，所以，vite的优势是体现在开发阶段，另外，由于vite使用的是ES Module，所以代码中不可以使用CommonJs；

9.webpack如何配置？

代码问题

1.打印输出是什么？（this的指向问题）

const obj1 = {
    a: function() {
        console.log(this)
        window.setTimeout(() => { 
            console.log(this) 
        }, 1000)
    }
}
const obj2 = {
    a: function() { console.log(this) },
    b: {
        c: () => {console.log(this)}
    }
}
var circle = {
    radius: 10,
    outerDiameter() {
        var innerDiameter = function() {
             console.log(2 * this.radius);
        };
        innerDiameter();
    }
};
obj1.a()
obj2.b.c() 
circle.outerDiameter()

2.打印输出是什么？（js引用关系）

var a = 2
var b= a
b = 30
var c = {
    a:1
}
var d = c
d.a = 3
console.log(a,b)
console.log(c.a,d.a);

3.打印输出顺序（Promise）

const fun = function (params) {
    return new Promise((resolve, reject) => {
        resolve("fun1")
    })
}

function fun5() {
    return fun().then(res => {
        if (res == "fun1") {
            console.log(res)
            return Promise.resolve("fun2")
        }
    }).then(res => {
        console.log(res)
        return Promise.resolve("fun3")
    }).then(res => {
        console.log(res)
        return Promise.resolve("fun4")
    })
}
fun5().then(res => {
    console.log(res)
})

4.输出打印顺序 (消息队列--宏任务微任务)

Promise.resolve().then((res) => {
  console.log(1);
  setTimeout(() => {  
    console.log(2);
    Promise.resolve().then((res) => {
      console.log(3);
    });
  }, 0);
});
setTimeout(() => {   
  console.log(4);
  setTimeout(() => { 
    console.log(5);
    Promise.resolve().then((res) => {
      console.log(6);
    });
  }, 0);
    Promise.resolve().then((res) => {
        console.log(7);
    });
}, 0);
(async function () {  
  await name();
  console.log(8);
})();
function name() {
  console.log(9);
}

5.输出什么？

var A = function() {

}
A.prototype.n = 1

var b = new A()

A.prototype = {
  n: 2,
  m: 3
}

var c = new A()
console.log(b.n, b.m, c.n, c.m) 

6.输出什么？

var c = 1
function c(c) {
  console.log(c)
  var c = 3
}
c(2)

7.结果输出多少?

var x = 10;
function fn(x) {
  console.log(x);
}
function show(f) {
  var x = 20;
  f(x);
}
show(fn);

8.输出什么?

var b = 2;
var a = b = c = d = 1;

console.log(a, b, c, d);

9.输出什么?

var a = {
        num: 0,
        toString: function () {
          console.log('toString()');
          return ++a.num
        },
        valueOf: function () {
          console.log('valueOf()');
          return {}
        }
      }
console.log(a++);

10.输出什么?

var a = 123;
function a() {

}
console.log(typeof a) 

11.输出什么?

var obj = {
  fn2: function () {
      console.log(1);
    console.log(fn2)
  }
};
obj.fn2() 

12.输出什么?

var name = "The Window";
var object = {
  name: "My Object",
  getNameFunc: function () {
    return function () {
      return this.name;
    };
  }
};
console.log(object.getNameFunc()());

13.输出什么?

var name = "The Window";
var object = {
  name: "My Object",
  getNameFunc: function () {
    console.log(this)
    return () => {
      return this.name;
    };
  }
};
console.log(object.getNameFunc()());

14.输出什么?

console.log('global begin: '+ i) // undefined
var i = 1；
foo(i);
function foo(i) {
  if (i === 4) {
    return;
  }
  console.log('foo() begin:' + i);
  foo(i + 1);
  console.log('foo() end:' + i);
}
console.log('global end: ' + i);

15.输出什么?

if (!(b in window)) {
  var b = 1;
}
console.log(b) 

16.输出什么?

var c = 1
function c(c) {
  console.log(c)
  var c = 3
}
c(2)

17.请写一个方法，返回传入数字每一位的平方。如 9119 输出811181,9的平方81，1平方1.

function squareDigits(num) {
  if (typeof num === "number") {
    const s = num.toString().split("");
    const result = s.map(item => {
      const r = item * item;
      return r;
    })
    return result.join("");
  }
}
squareDigits(321654)