前端校招面试题目-每日30题-5

大熙哥 2021年07月16日 135次浏览

1. 知道属性选择器和伪类选择器的优先级吗?

CSS选择器的优先级顺序(由高到低):
!important(优先级最高)
id 选择器
class选择器、属性选择器、伪类选择器
标签选择器、伪元素选择器
通配符选择器、关系选择器 (优先级最低)

2. inline-block、inline和block的区别

Block是块级元素,其前后都会有换行符,能设置宽度,高度,margin/padding水平垂直方向都有效。
Inline:设置width和height无效,margin在竖直方向上无效,padding在水平方向垂直方向都有效,前后无换行符
Inline-block:能设置宽度高度,margin/padding水平垂直方向 都有效,前后无换行符
img既是行内元素 又是置换元素(Replaced element) 。 所谓置换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容。
因为img,input是可替换元素,css只能修改它们的位置,而不能改变它们的样式及其内容,他们的内容都不是通过在标签内添加文本,而是通过某个属性(比如src、data、label或js控制)来显示内容的,因此可以这样设置。

3. 用css实现一个硬币旋转的效果

transform-style: preserve-3d

4. 了解重绘和重排吗,知道怎么去减少重绘和重排吗,让文档脱离文档流有哪些方法

DOM的变化影响到了预算内宿的几何属性比如宽高,浏览器重新计算元素的几何属性,其他元素的几何属性也会受到影响,浏览器需要重新构造渲染书,这个过程称之为重排,浏览器将受到影响的部分重新绘制在屏幕上 的过程称为重绘,
引起重排重绘的原因有:
添加或者删除可见的DOM元素,
元素尺寸位置的改变
浏览器页面初始化,
浏览器窗口大小发生改变,重排一定导致重绘,重绘不一定导致重排,
减少重绘重排的方法有:
不在布局信息改变时做DOM查询,
使用csstext,className一次性改变属性
使用fragment
对于多次重排的元素,比如说动画。使用绝对定位脱离文档流,使其不影响其他元素

5. overflow的原理

当元素设置了overflow样式且值部位visible时,该元素就构建了一个BFC,BFC在计算高度时,内部浮动元素的高度也要计算在内,也就是说技术BFC区域内只有一个浮动元素,BFC的高度也不会发生塌缩,所以达到了清除浮动的目的

6. box-sizing的语法和基本用处

标准盒模型:width=content
IE盒模型:width=content+padding+border
标准盒子的宽度就可以表示为:width+padding+border+margin
IE盒子的宽度可以表示为:width+margin
当我们将值设置为content-box时,就表示将其看做标准盒子,设置的width变量的值自然就等于这个盒子的content的宽度,当我们将值修改为border-box时,也就视其为IE盒子,设置width的值等于三者宽度之和。

7. 两个嵌套的div,position都是absolute,子div设置top属性,那么这个top是相对于父元素的哪个位置定位的。

border 内边缘 或 padding 外边缘,与盒子类型无关

8. 相对布局和绝对布局,position:relative和obsolute。

relative是相对布局,是相对于static静态布局而言进行偏移操作
absolute是绝对布局一般是相对于其父级元素进行偏移

9. flex布局

flex 是 Flexible Box 的缩写,意为"弹性布局"。指定容器display: flex即可。
容器有以下属性:flex-direction,flex-wrap,flex-flow,justify-content,align-items,align-content。

flex-direction属性决定主轴的方向;

flex-wrap属性定义,如果一条轴线排不下,如何换行;

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap;

justify-content属性定义了项目在主轴上的对齐方式。

align-items属性定义项目在交叉轴上如何对齐。

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

项目(子元素)也有一些属性:order,flex-grow,flex-shrink,flex-basis,flex,align-self。

order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。

flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。

flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。

align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。

10. block、inline、inline-block的区别。

block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。
block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。

block元素可以设置margin和padding属性。

inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。

inline元素设置width,height属性无效。

inline元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

inline-block:简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。

11. css定位

固定定位fixed:
元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动。Fixed定位使元素的位置与文档流无关,因此不占据空间。 Fixed定位的元素和其他元素重叠。

相对定位relative:

如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。 在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。

绝对定位absolute:

绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于。 absolute 定位使元素的位置与文档流无关,因此不占据空间。 absolute 定位的元素和其他元素重叠。

粘性定位sticky:

元素先按照普通文档流定位,然后相对于该元素在流中的flow root(BFC)和 containing block(最近的块级祖先元素)定位。而后,元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。

默认定位Static:

默认值。没有定位,元素出现在正常的流中(忽略top, bottom, left, right 或者 z-index 声明)。

inherit:

规定应该从父元素继承position 属性的值。

12. css预处理器有什么

less,sass等
scss教程

13. get请求传参长度的误区

实际上HTTP 协议从未规定 GET/POST 的请求长度限制是多少。
对get请求参数的限制是来源与浏览器或web服务器,浏览器或web服务器限制了url的长度。

14. get和post请求在缓存方面的区别

get请求类似于查找的过程,用户获取数据,可以不用每次都与数据库连接,所以可以使用缓存。
post不同,post做的一般是修改和删除的工作,所以必须与数据库交互,所以不能使用缓存。因此get请求适合于请求缓存。

15. 说一下闭包

一句话可以概括:闭包就是能够读取其他函数内部变量的函数,或者子函数在外调用,子函数所在的父函数的作用域不会被释放。
引用是其一,暴露,则是其二。这两点,缺一不可。

16. 说一下类的创建和继承

原型链继承
特点:基于原型链,既是父类的实例,也是子类的实例
缺点:无法实现多继承
构造继承
特点:可以实现多继承
缺点:只能继承父类实例的属性和方法,不能继承原型上的属性和方法。
实例继承和拷贝继承
实例继承:为父类实例添加新特性,作为子类实例返回
拷贝继承:拷贝父类元素上的属性和方法
组合继承:相当于构造继承和原型链继承的组合体。通过调用父类构造,继承父类的属性并保留传参的优点,然后通过将父类实例作为子类原型,实现函数复用
寄生组合继承:通过寄生方式,砍掉父类的实例属性,这样,在调用两次父类的构造的时候,就不会初始化两次实例方法/属性

17. 如何解决异步回调地狱

promise、generator、async/await

18. 说说前端中的事件流

HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件onclick、页面的滚动事件onscroll等等,可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的,就需要了解一下“事件流”的概念。
什么是事件流:事件流描述的是从页面中接收事件的顺序,DOM2级事件流包括下面几个阶段。

事件捕获阶段

处于目标阶段

事件冒泡阶段

addEventListener:addEventListener 是DOM2 级事件新增的指定事件处理程序的操作,这个方法接收3个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true,表示在捕获阶段调用事件处理程序;如果是false,表示在冒泡阶段调用事件处理程序。

IE只支持事件冒泡。

什么是JS冒泡

19. 说一下事件委托

事件委托指的是,不在事件的发生地(直接dom)上设置监听函数,而是在其父元素上设置监听函数,通过事件冒泡,父元素可以监听到子元素上事件的触发,通过判断事件发生元素DOM的类型,来做出不同的响应。
举例:最经典的就是ul和li标签的事件监听,比如我们在添加事件时候,采用事件委托机制,不会在li标签上直接添加,而是在ul父元素上添加。
好处:比较合适动态元素的绑定,新添加的子元素也会有监听函数,也可以有事件触发机制。

20. 说一下图片的懒加载和预加载

预加载:提前加载图片,当用户需要查看时可直接从本地缓存中渲染。
懒加载:懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数。

两种技术的本质:两者的行为是相反的,一个是提前加载,一个是迟缓甚至不加载。
懒加载对服务器前端有一定的缓解压力作用,预加载则会增加服务器前端压力。

21. mouseover和mouseenter的区别

image.png

22. js的new操作符做了哪些事情

new 操作符新建了一个空对象,这个对象原型指向构造函数的prototype,执行构造函数后返回这个对象。

23. 改变函数内部this指针的指向函数

当我们需要传递的参数不多时,可以选择call:

fun.call(thisObj, arg1, arg2);

当我们需要传递的参数比较多时,可以先将参数放至一个数组,然后选择apply:

args=[arg1,arg2,arg3...];
fun.apply(thisObj, args);

当我们想要生成一个新的函数长期绑定某个函数给某个对象使用,就可以选择bind:

var newFun = Fun.bind(thisObj);
newFun(arg1,arg2);

在非严格模式下当我们第一个参数传递为null或undefined时,函数体内的this会指向默认的宿主对象,在浏览器中则是window

apply 与 call

24. js的各种位置,比如clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的区别?

clientHeight:表示的是可视区域的高度,不包含border和滚动条
offsetHeight:表示可视区域的高度,包含了border和滚动条
scrollHeight:表示了所有区域的高度,包含了因为滚动被隐藏的部分。
clientTop:表示边框border的厚度,在未指定的情况下一般为0
scrollTop:滚动后被隐藏的高度,获取对象相对于由offsetParent属性指定的父坐标(css定位的元素或body元素)距离顶端的高度。

25. js拖拽功能的实现

简单总结:
三个相关事件:mouseup、mousemove、mousedown
标识鼠标坐标:clientX、clientY
标识元素初始坐标:offsetX、offsetY
元素被拖拽位置:
鼠标移动时坐标-鼠标初始坐标+元素初始坐标

26. 异步加载js的方法

异步加载的方法:

  1. defer:<script src="..." defer/>

添加defer属性后,对应的js脚本在所有元素加载完成后才会执行,且是按照js脚本声明的顺序执行的

  1. async:用法与defer相同,规定脚本一旦可用,就会异步执行,但只适用于外部引用的脚本,即有src属性,对应脚本为乱序执行,只要js脚本加载完成就会立即执行

27. Ajax解决浏览器缓存问题

在ajax发送请求前加上 anyAjaxObj.setRequestHeader("If-Modified-Since","0")。

在ajax发送请求前加上 anyAjaxObj.setRequestHeader("Cache-Control","no-cache")。

在URL后面加上一个随机数: "fresh=" + Math.random()。

在URL后面加上时间搓:"nowtime=" + new Date().getTime()。

28. js的节流和防抖

我的方法是:
根据时间戳
settimeout

29. JS中的垃圾回收机制

JS垃圾回收回收机制:

很简单,内存就那么多,用不到的变量,就清除掉,才能保证内存可以被循环利用

常用的两种方法:标记清除、引用计数

标记清除:

function test(){

var a = 10; //被标记"进入环境"

var b = "hello"; //被标记"进入环境"

}

test(); //执行完毕后之后,a和b又被标记"离开环境",被回收

垃圾回收机制先给所有变量加上标记,然后去掉“环境中的变量”和“被环境中的变量引用的变量(闭包)”的标记,剩下的就是要删除的变量。

引用计数:

记录一个变量现在被引用次数,为0时就将其清除掉,不为0时就不清除,但常常会导致内存泄露(变量占用内存却没有使用,也没有被清除),举例:

let arr = [1,2,3,4];

console.log("hello world");

[1,2,3,4]占据着一块内存,它被arr引用,因此这块内存的引用次数为1。可是我们并没有使用arr,但这块内存却无法被释放,这就出现了内存泄漏的问题,因此我们需要使用arr=null来将这块内存的引用次数变为0,才可以释放这块内存

30. eval是做什么的

它的功能是将对应的字符串解析成js并执行,应该避免使用js,因为非常消耗性能(2次,一次解析成js,一次执行)