前端改变窗口大小内容不变形_看看这份四月前端面试总指南（上篇），你过关了吗？...-CSDN博客

本文链接：https://blog.csdn.net/weixin_39621075/article/details/111289340

黑马程序员上海中心

学姐微信：xuejie077

关注

学姐最近收到了前端学员的私信，希望学姐帮着整理一下最近的前端面试题，故此学姐马上安排到位啦~希望能为在准备面试的小伙伴尽一些绵薄之力~

这次的面试题合集主要说的是学员们在面试当中普遍被问到的问题，说的不对的地方请小伙伴们即使指正出来，或者有其他的看法也可以一起探讨。

一、HTML/CSS

1.html5新增标签

新增了一些语义化的标签例如：header,fotter,nav,main
新增图像：canvas svg
新增媒体标签：audio video

2.什么是盒模型

W3C标准盒模型，属性width,height包含content,不包含border和padding
IE盒模型，属性width,height包含content,border,padding

3.css居中元素

说一下我比较常用的的几种

使用position布局

postion: absolute;left: 50%;top: 50%;translate(-50%,-50%);

使用flex布局

display: flex;align-items: center;justify-content: center;

知道宽高的情况下使用position布局

postion: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;

4.移动端1px边框问题

主要是不同手机的dpi不同会导致这个问题。解决办法：

看手机是否支持0.5px的边框，并且dpi大于等于2，会用到js判断比较复杂，这里不做实现。

使用背景图，修改颜色麻烦，需要换图。圆角需要特殊处理。

伪类元素加transform实现，个人经常使用。

.border {    position: relative;    border:none;}.border:after {    content: '';    position: absolute;    bottom: 0;    background: #000;    width: 100%;    height: 1px;    transform: scaleY(0.5); -webkit-transform: scaleY(0.5); -moz-transform: scaleY(0.5); -o-transform: scaleY(0.5);}

5.css3有哪些新特性

border新增border-img, border-raius
新增盒阴影box-shadow，文字阴影 text-shadow
background新增background-imagebackground-size background-repeat
媒体查询

6.rem em px区别

px相对长度单位，相对于显示器屏幕分辨率来的
em相对长度单位，相对于当前对象内文本的字体尺寸来的，值不固定，会继承父级元素字体的大小，未经调整浏览器：16px = 1em。假如父元素为2em，子元素为2em字体实际大小为4em
rem是css3新增的相对单位，使用rem为元素设置大小时，是相对大小，相对的是html根元素，修改根元素就可以调整所有字体大小，还可以避免字体大小逐层复合的连锁反应，未经调整浏览器：16px = 1rem。

7.详细说下BFC

BFC块级格式上下文，是页面上一个独立的容器，容器内的子元素不会影响到外边的元素，垂直方向边距重叠，计算高度是浮动元素也会计算
BFC触发：根元素(html)，浮动元素(float不为none)，绝对定位元素(position为absolute和fixed),行内块元素(display为inline-block)，overflow值不为visible，弹性元素(display为flex)
应用场景：设置元素为BFC防止浮动高度塌陷，避免外边距重叠

8.重绘和回流

简单的一句话就是：回流必引起重绘，重绘不会引起回流，回流比重绘更耗性能。
回流：当元素的尺寸结构和某个属性发生改变时，浏览器重新渲染部分或全部文档的过程。
会发生回流的操作：浏览器窗口发生改变，元素位置和大小发生改变，元素内容发生改变，对可见的dom进行添加或者删除，查询某些属性或调用某些方法(clientWidth,offsetWidth, scrollWidth,scrollTo等等)
重绘：改变元素的样式不影响在文档流的位置(color,background-color)浏览器把新的样式重新赋给元素并绘制
css避免：避免设置多层内联样式，避免使用css表达式(ealc),将动画放在position的属性上(absolute, fixed)，避免使用table布局。
js避免：避免重复操作样式(定义一个class并一次修改class属性)，避免频繁操作dom(创建一个documentFragment，在它上边操作dom，最后添加的文档中)，避免频繁读取引起重绘/回流的值(可以使用变量缓存)。

二、JS

1.js基本类型和引用类型

基本类型：Boolean Null Number String Undefined Symbol BigInt引用类型：Object

2.作用域

分为：全局作用域(定义在函数外部的变量)和局部作用域(定义在函数内部的变量)，每个函数在被调用时都会创建一个新的域。ECMAScript 6引入了let和const关键字，利用let和const可以形成块级作用域。
块语句(if, switch, for, while)不会创建新的作用域，定义的变量保存在已经存在的作用域中，let和const支持在局部作用域块语句中声明

if (true) {    var a = 1;    let b = 2;    const c =3;}console.log(a) // 1console.log(b) // Uncaught ReferenceError: b is not definedconsole.log(c) // Uncaught ReferenceError: c is not defined

作用域链：作用域链是在变量对象之后创建的，作用域链用于解析变量，当变量被解析时，javascript先从代码嵌套的最内层开始找，如果内层没有找到，会转到上一层父级作用域查找，直到找到该变量

3.闭包

它允许函数访问局部作用域之外的数据，闭包有自己的作用域链，父级作用域链和全局作用域链。

    function a() {        var b = 3;        return function() {            console.log(b)        }    }    a()() // 3

4.前端存储

cookie,localStorage,sessionStorage

localStorage有效期为永久，sessionStorage有效期为窗口关闭
同源文档可以修改并读取localStorage的值，sessionStorage只允许同一个窗口下的文档访问
用法：

localStorage.setItem('a', 1); // storge a->1localStorage.getItem('a'); // return value of alocalStorage.removeItem('a'); // remove alocalStorage.clear(); // remove all data

cookie是浏览器储存少量数据，cookie会自动在浏览器和服务器之间传输，可以通过path和domain配置，页面同目录和子目录都可以访问

document.cookie = 'a=1; path=/'; // 创建当前页面的cookievar a = document.cookie; // 读取cookie 返回格式key=value; key1=value1;document.cookie = 'a=2; path=/'; // 修改值，会把以前的值覆盖document.cookie = "a=; expires=Thu, 01 Jan 1970 00:00:00 GMT"; //删除cookie

5.promise实现原理

9k字 | Promise/async/Generator实现原理解析

6.宏任务和微任务

首先你要知道Javascript是单线程语言，Event Loop是JavaScript的执行机制
微任务和宏任务都属于异步任务，属于同一个队列，主要区别是他们执行的顺序，开始执行宏任务的时候，宏任务执行完毕之后会看有没有微任务，如果有的话执行微任务，没有接着下一个执行宏任务。在当前微任务没有执行完毕，是不会执行下一个宏任务的，而微任务又在宏任务之前执行

console.log(1)setTimeout(() => {    console.log(5)},0)new Promise(resolve => {    resolve()    console.log(2)}).then(() => {    console.log(4)})console.log(3)// 打印出1，2，3，4，5

宏任务：setTimeout, setInterval, requestAnimationFrame
微任务 Promise.then catch finally

7.节流和防抖

节流：高频事件触发n秒内执行一次，如果这个时间点内触发多次函数，只有一次生效。

function throttle(fn) {        var flag = true        return function() {            if (!flag) return;            flag = false;            setTimeout(function () {                fn()                flag = true            }, 1000)        }    }

防抖：高频事件触发n秒之后执行，如果n秒之内再次被触发，重新记时。

function debounce(fn) {    var timeout = null;    return function() {        clearTimeout(timeout)        timeout = setTimeout(function (){            fn()        }, 1000)    }}

8.get和post区别

最直观的区别get把参数包含在URL中，post通过request body传递参数，相对于get比较安全
get请求URL传参有长度限制，post没有
get在浏览器回退是无害的，post会再次提交请求
get请求会被浏览器主动缓存，post不会
get和post报文格式不同
get请求是幂等性的，而post请求不是(新增和删除数据一般不用post请求就是这个原因)

9.Js的事件委托是什么，原理是什么

通俗点说将元素事件委托给他的父级或者更外级来处理
事件委托是利用冒泡机制来实现的(事件冒泡：事件由具体的元素接受，然后逐渐向上传播到不具体的节点)

// 每个列表点击弹出内容// 不使用事件委托需要给每个列表添加点击事件(消耗内存，不灵活，添加动态元素时需要重新绑定事件)这里不做介绍

"myLink"> "1">aaa "2">bbb "3">ccc// 使用事件委托(减少内存占用，提升性能，动态添加元素无需重新绑定事件)var myLink = document.getElementById('myLink');myLink.onclick = function(e) { var e = event || window.event; var target = e.target || e.srcElement; if(target.nodeName.toLowerCase() == 'li') { alert(target.id + ':' + target.innerText); }};

好啦，本期的4月前端面试题总结就到这啦，下期学姐接着给大家讲！看完记得码住复习哦~

往期热文