---面试记录---
--目录--
1.CSS实现垂直居中的几种方法
1.1 单行文本的居中
1.文字水平居中
<div class='box' style="text-align: center;">hello world</div>
2.文本垂直水平居中
<div class="box2" style="150px;height:100px;line-height: 100px;">文本垂直水平居中</div>
1.2 多行文本垂直居中
1.使用display:flex实现
flex布局会让容器内的元素得到垂直水平居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登陆</title>
<style type="text/css">
html{ 100%;height: 100%;} /*整个页面的居中*/
body{
100%;
height: 100%;
display: flex; /*flex弹性布局*/
justify-content: center;
align-items: center;
}
#login{
300px;
height: 300px;
border: 1px black solid;
display: flex;
flex-direction: column; /*元素的排列方向为垂直*/
justify-content: center; /*水平居中对齐*/
align-items: center; /*垂直居中对齐*/
}
</style>
</head>
<body>
<div id="login">
<h1>登陆</h1>
<input type="text"><br>
<input type="password"><br>
<button>确定</button>
</div>
</body>
</html>
2.使用绝对定位和负边距
css部分：
<style>
.box{
150px;
height: 150px;
background:blue;
position: relative;
}
p{
50px;
height: 50px;
background:red;
position: absolute;
left:50%;
top:50%;
margin-left:-25px;
margin-top: -25px;
display: flex;
align-items: center;
justify-content: center;
}
</style>
html部分：
<div class="box"><p>A</p></div>
3.使用transform:translate定位
<style>
*{padding: 0;margin: 0;} /*解决容器内元素.div是p元素产生的居中不完整*/
.box{
margin: 20px auto;
150px;height: 150px;
background:blue;
position: relative;
text-align: center;
}
.box .div1{
position: absolute;
top:50%;
left:50%;
100%;
transform:translate(-50%,-50%);
text-align: center;
background: red
}
</style>
4.绝对定位和0
.box p{
50%;
height: 50%;
overflow: auto;
position: absolute;
background:red;
margin: auto;
top:0;
bottom:0;
left:0;
right:0;
}
5.使用display:table-cell
.box{
150px;height: 150px;
background:blue;
position: relative;
text-align: center;
display: table-cell;
vertical-align: middle;
}
缺点：对容器.box的子元素的设置宽高会造成失效。
1.3 参考博客
2.简述js的数据类型
2.1 js的数据类型有几种
- 答：8种。Number、String、Boolean、Null、undefined、object、symbol(独特的值)、bigInt(表示范围更大)。
2.2 Object中包含哪几种类型
- 答：其中包含了Data、function、Array等。这三种是常规用的。
2.3 js的基本数据类型和引用数据类型有那些
- 基本类型（单类型）：除Object。 String、Number、Boolean、null、undefined、Symbol。
- 引用类型：Object。里面包含的 function、Array、Date。
2.4 如何判断数据类型
1.typeof 操作符
2.toString()
- 作用：其他类型转成string的方法
- 支持：number、boolean、string、object
- 不支持：null 、undefined
2.5 null和undefined有什么区别
- Null只有一个值，是null。不存在的对象。
- Undefined只有一个值，是undefined。没有初始化。undefined是从null中派生出来的。
- 简单理解：undefined是没有定义的，null 是定义了但是为空。
2.6 参考博客
3.web容器有哪些
3.1 关于web容器
web容器就是一种服务程序，在服务器中一个端口就对应一个提供相应服务的程序（比如Apache默认的端口为80），给处于其中的应用程序组件提供环境，使其直接跟容器中的环境变量交互，不必关注其它系统问题。而这个程序就是处理服务器从客户端收到的请求，如Java中的Tomcat容器，ASP的IIS都是这样的容器。这些容器兼容了Web服务器软件的一些功能。一个服务器可以有多个容器。
如果web服务器应用得到一个指向servlet的请求（而不是其他请求，如请求一个普通的静态HTML），此时服务器不是把这个请求交给servlet本身，而是交给部署该servlet的容器，要由容器调用servlet的方法，如doPost()或doGet()。
容器中，中小型的Tomcat，Nginx大型的，JBoss、Weblogic、WebSphere等。
3.2 参考博客
4.前端性能优化的方法
4.1 前端优化的目的
从用户访问资源到资源完整的展现在用户面前的过程中，通过技术手段和优化策略，缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度。
4.2 前端优化途径按粒度分类
1.页面级优化
2.代码级优化
5.具体如何实现防抖和节流
1.防抖
防抖：短时间内多次触发，最终在停止触发后的某个指定时间执行一次函数————只执行一次
// 防抖
const debounce = (fn, delay) => {
/**
* @param [Function] fn 需要使用防抖的函数
* @param [Number] delay 毫秒，防抖期限值
*/
let timer = null
return () => {
if (timer) {
// 进入此分支说明：当前正在一个计时周期中，并且再次触发了事件,取消当前计时，重新开始计时
clearTimeout(timer)
}
// 进入此分支说明：当前没有计时，则开始新的计时
timer = setTimeout(fn, delay)
}
}
const showTop = () => {
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
console.log('当前位置：' + scrollTop)
}
window.onscroll = debounce(showTop, 1000)
2.节流
节流：短时间内多次触发，即使触发仍在继续也可以根据指定时间触发一次函数————至少执行一次
// 方案一：状态位
const throttle = (fn, delay) => {
/**
* @param [Function] fn 需要使用防抖的函数
* @param [Number] delay 毫秒，防抖期限值
*/
let valid = true
return () => {
if (!valid) {
return false
}
// 执行函数+把状态位设置为无效
valid = false
setTimeout(() => {
fn()
valid = true
}, delay)
}
}
const showTop = () => {
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
console.log('当前位置：' + scrollTop)
}
window.onscroll = throttle(showTop, 1000)
// 方案二：时间戳
const throttle = (fn, delay) => {
/**
* @param [Function] fn 需要使用防抖的函数
* @param [Number] delay 毫秒，防抖期限值
*/
let start
return () => {
let now = Date.now()
if (!start) {
start = now
}
if (now - start >= delay) {
fn()
start = null
}
}
}
const showTop = () => {
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
console.log('当前位置：' + scrollTop)
}
window.onscroll = throttle(showTop, 1000)