前端开发面试题总结[1]

最新推荐文章于 2024-07-25 11:52:08 发布

lucky-2000

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量90

点赞数

本文链接：https://blog.csdn.net/While1170/article/details/130047987

版权

前端开发面试题总结[1]

一、HTML5 与 CSS3

HTML5标签：

	标签	作用	描述
块级元素（Block）	h1 ~ h6、p	标题标签、段落标签	一共有六级标题，从`h1`~`h6`线性递减，一般页面只有一个`h1`
行内元素	a、span、img、input、select、strong	链接、图片等标签	`strong`：字体加粗标签；
特殊	br、em、hr	换行、斜体、分割线等标签	`hr`：生成一条分割线；

内联元素和块元素

内联元素不会独自占据一行，其他的内联元素也可以在同一行；块元素独自占据一行。
块级元素可设置宽高，内联元素设置无效。
块级元素的 width 默认为 100%，而内联元素则是根据其自身的内容或子元素来决定其宽度。高宽无效，对外边距（margin）和内边距（padding）仅设置左右方向有效上下无效；
内联元素改变宽高，可以通过设置 display: block;当 display 的值设为 block 时，元素将以块级形式呈现。

当position为absolute、fixed、float的时候，元素脱离原来的文档流。变为块级元素，所以span此时也可以设置宽高。

注：span元素是内联元素，但是通过绝对定位或者float之后可以脱离文档流，变成块级元素，因此可设置宽高。

HTML5新增标签

video 表示一段视频并提供播放的用户界面 audio 表示音频

canvas 表示位图区域

source 为video和audio提供数据源

svg 定义矢量图

iframe 内嵌网页标签

布局相关标签：

main menu section nav aside article footer header

其他标签请参考：MDN手册

CSS3选择器：

选择器类型	权重	使用	描述
* （通配符选择器）	00000	`*{ }`	选择所有标签
（标签选择器）	0，0，0，1	`p{ }`	选择所有此元素的标签
.（类名选择器）	0，0，1，0（与伪类一致）	`.className{}`	`.` 接属性名
#（id选择器）	0，1，0，0	`#idName{}`	`.` 接ID名
后代选择器	需运算	`祖先后代 { }`	`祖先选择器`加`后代选择器` {}
兄弟元素选择器	需运算	`A1 A2 { }`	`两相邻元素选择器` {}
伪类选择器	需运算	`div:first-child { }`…等	伪类元素伪类元素选择器

注：
1.继承的样式无权重，行内样式权重为：1，0，0，0；

2.!important 加在哪，那个属性权重将为最高（慎用）

<div class='box'>  
    <p class='Tex' id='Texp'>  
        这是页面元素  
    </p>  
</div>


<!-- 标签选择器 -->
p {
    color：red
}

<!-- 通配符选择器 -->
* {
    color：red
}

<!-- 类名选择器 -->
.Tex {
    color:skyblue
}

<!-- ID选择器 -->
#TexP {
    color:blue
}

<!--  交集选择器（两种选择器选中的都会生效）  -->
div .TexP {
    color:blue
}

<!--  并集选择器（两种选择器选中的都会生效）  -->
div,#TexP {
    color:blue
}

<!--  子元素选择器(选中div下的类名为.TexP的标签)  -->
div>.TexP {
    color:blue
}

盒子模型：

1.传统盒子模型：

构成：内容区(content) 内边距(padding) 边框(border) 外边距(margin)

传统盒子模型大小由内容区+内边距+边框大小+外边距构成

2.弹性盒子模型：

更加灵活的盒子模型，解决传统盒子使用float、position等属性布局难的问题,同时可以解决父元素塌陷等问题

<!-- 弹性盒子布局方式-->
<body>  
<div class="app">  
<div class="SonBox">1</div>  
<div class="SonBox">2</div>  
<div class="SonBox">3</div>  
</div>  
</body>  
</html>  
  
<style>  
.app {  
    height: 50px; 
    /* 给父元素加上此属性变成弹性盒子 */
    display: flex;
    /* 内容对其方向  */
    align-center:center;
}  
.SonBox {  
    width: 50px;  
    margin: 10px;
    /* 改变子容器排列方式，还有其他5个属性 */
    justify-content: flex-start
    background-color: pink;
}  
</style>

子元素排列方向

转轴：flex-direction: row等属性

浮动[float]：

Float用于控制元素浮动，使一个元素在其父元素内左或者右浮动（浮动的元素会脱离文档流）

float:none 无浮动， float:left 向左浮动，float:right 向右浮动

<div id='app'>
    <div class='SonBox'>子元素</div>
</div>

<style>
.SonBox {
    float:left;
    width:50px;
    hight:50px;
}
</style>

简单总结:

1.浮动目前来讲它的主要作用就是让页面中的元素可以水平排列，通过浮动可以制作一些水平方向的布局

2.元素设置浮动以后，将会从文档流中脱离，从文档流中脱离后，元素的一些特点也会发生变化

补充：圣杯布局（双飞翼布局）：

圣杯布局：给父元素设置弹性盒子，子元素左右两边盒子固定宽度,中间盒子设置flex:1.中间的盒子就实现了响应式。

<div id='app'>
    <div class='SonBox1'>子元素1</div>
    <div class='SonBox2'>子元素2</div>
    <div class='SonBox3'>子元素3</div>
</div>

<style>
#app {
    display:flex;
    hight:50px;
}
.SonBox1 {
    width:50px;
    hight:50px;
}
.SonBox2 {
    flex:1;
}
.SonBox3 {
    width:50px;
    hight:50px;
}
</style>

父盒子的塌陷问题：

   在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当子元素设置浮动之后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷 即可能变成0了。

解决方法：

给父元素加上clear:both属性；
给父元素加上overflow:hidden（超出隐藏）属性；
父元素加上inline-block,或者同样加上一个浮动属性flaot，或者加上绝对定位属性，也可解决高度塌陷问题。

定位（position）：

概念：一种高级的布局手段，可以将元素随意的固定在页面的某个位置。

定位属性：position：relative(相对定位);absolute（绝对定位）;fixed(固定定位);sticky(粘滞定位)

边偏移属性：top（元素距离父元素顶部多少像素）bottom（距离底部） left(左) right（右）

使用场景：

1.相对定位（relative）：当元素的position属性值设置为relative时，则开启了元素的相对定位

<div class='FatherBox'>
    <div class='SonBox'>
        子元素
    </div>
</div>

<style>
.FatherBox {
width:100px;
hight:100px;
}
.SonBox {
width:50px;
hight:50px;
 /* 相对定位 */
position:relative;
top:10px;
left:10px;
}
</style>

子绝父相：给子元素加绝对定位，给父元素加相对定位，配合使用。

其他使用请参考此链接：定位

二、JavaScript 基础

1. 什么是事件冒泡？他是如何工作的？如何阻止事件冒泡、默认行为：

事件冒泡以及工作原理：一个对象上触发的某类事件（eg：click事件），这个事件会向其元素的父元素传递，从里到外，直到事件被处理(父级对象所有的同类事件都会被激活)，或者它达到了对象最顶层Window。

阻止事件冒泡：event.stopPropagation()

2.event对象常见应用：

event.preventDefault() // 阻止默认行为，阻止a链接的默认跳转行为。
event.stopPropagation() // 阻止事件冒泡
事件三要素：事件源（事件触发对象）、事件类型（点击事件、滑动事件）、事件处理函数（事件执行的函数）

3.事件委托：

概念：把事件处理器添加到上级元素上，这样就避免了把事件处理器添加到多个子元素上。这主要得益于事件冒泡机制。

优点：

减少事件注册，节省内存。
在table上代理所有的td的点击事件。
简化了dom节点更新时，相应事件的更新。
不用单独给新添加的li上单独添加点击事件。

缺点：

事件委托基于冒泡，对于不冒泡的事件不支持。
层级过多，冒泡过程中，可能会被某层阻止。
可能会导致浏览器频繁的调用处理函数，虽可能不需要处理，所以建议就近委托
把所有事件都用于代理可能会出现事件误判。eg：在document中代理所有的按钮点击事件，其他人在改动js时，可能会触发两个点击事件。

4.定时器（setTimeout）和计时器（setInterval）：

setTimeout（）：用于在指定的毫秒数后调用函数或者计算表达式。
setInterval（）：按照指定周期（单位是毫秒）来不停的调用函数，直到clearInterval(清除定时器函数),或者页面关闭才停止调用。

5.什么是window对象，什么是document对象：

window：表示浏览器打开的窗口，它属于顶层对象。

document:是window对象的一个属性，是显示于窗口内的一个文档。

不同点：

1、document对象：使用document对象可以对HTML文档进行检查、修改或添加内容，并处理该文档内部的事件。

2、window对象：浏览器会为HTML文档创建一个window对象，并未每个框架创建一个额外的window对象。

使用方式不同：

1、document对象：在Web页面上，document对象可通过window对象的document属性引用，或者直接引用。

2、window对象：没有应用于window对象的公开标准，不过所有浏览器都支持该对象。

6.重绘与回流（重排）：

重绘（repaint）：当元素一部分属性发生变化，（eg:外观、背景、颜色）等改变，不会引起页面内容发生变化，只需要浏览器重新渲染样式。这就是重绘

回流(reflow)：当渲染树中一部分或者全部因为大小、边距等问题需要DOM树重新计算叫回流。

重绘不一定会引起回流（重排），但回流（重排）一定会引起重绘

7.Js延迟加载的方式有哪些：

为什么要延迟加载js：等页面加载完后再加载js，有利于提高页面加载速度。
方法：使用setTimeout方法、defer、async异步属性

// defer 属性
<script defer='defer'> ... </script>

// async 属性
<script async> ... </script>

三、JavaScript高级

1.typeof 和 instanceof 的区别：

区别：

Typeof会返回一个变量的基本类型，instanceof返回一个布尔值.

// typeof

 typeof 1 // 'number'
 typeof '1' // 'string'
 typeof undefined // 'undefined'
 typeof true // 'boolean'
 typeof Symbol() // 'symbol'
 typeof null // 'object'
 typeof [] // 'object'
 typeof {} // 'object'


// instanceof
let str = 'xxx'
str instanceof String // false

instanceof可以判断复杂的引用数据类型，不能判断基础数据类型。

2.解释一下回调函数（回调地狱）？怎么解决？

回调函数：当一个函数作为参数传入另一个参数中，并且它不会立即执行，只有当满足一定条件后该函数才可以执行，这种函数就称为回调函数

回调地狱：回调函数中嵌套回调函数的情况就叫做回调地狱

Promise、async和await函数可以解决地狱回调问题

3.什么是闭包以及优缺点？

概念：一个作用域可以访问另一个函数内部的局部变量，就是闭包。

（内部函数调用外部函数的变量）

优点：延伸了变量的作用范围。
缺点：造成了内存泄漏。

4.什么是内存泄漏？

内存泄漏：函数再内存中开辟的储存空间，使用完毕后未释放，还在继续占用内存单元。被称为内存泄漏

解决：垃圾回收机制：标记清除法、引用清除法

5.原型和原型链？

原型：

JavaScript中所有的都是对象，原型也是一个对象，通过原型可以实现对象属性的继承，js的函数中都包含了一个prototype的内部属性，这个属性对应的就是函数对象的原型。

prototype是无法直接访问的，所有谷歌浏览器内核提供了一个proto这个访问器

原型的主要作用就是为了实现继承和拓展对象。

原型链：

当访问对象的某个属性时，会先在这个对象本身属性上找查，若没找到，则会去_proto_隐式原型上找，既它的构造函数的prototype的_proto_，这样一层层往上找的链式结构就是原型链.

特点：JavaScript是通过引用来传递的，我们创建的每个实体对象中并没有一份属于自己的原型副本，当我们修改原型时，与之相关的对象也会继承这一改变。

6.JavaScript中的this指向问题？

以函数调用时，this永远指向window。
以方法调用时，this指向方法的对象。
以构造函数方式调用时，this指向新创建的对象。

(谁调用，指向谁; 箭头函数没有this指向，它的指向一般是继承来的)

改变this指向：call、apply、bind:

var year = 2021 
function getDate(month, day) {
    return this.year + '-' + month + '-' + day 
} 
let obj = {year: 2022}

// call
getDate.call(null, 3, 8)    //2021-3-8
getDate.call(obj, 3, 8)     //2022-3-8
// apply
getDate.apply(obj, [6, 8])  //2022-6-8
// bind
getDate.bind(obj)(3, 8)     //2022-3-8

call：call方法会调用一个函数，接收的是一个参数列表

apply:apply接收的是一个参数的数组

bind:bind方法是创建一个新函数，当这个函数被调用时，它this的值是提供的值，其参数列表前几项是创建时指定的参数序列。

7.EventLoop事件循环机制？

EventLoop:js中事件包含宏任务和微任务。

事件执行顺序：主线程任务队列→主线程宏任务队列第一个→宏任务队列1中的微任务；

宏任务→微任务,同步任务→异步任务

8.JS的节流与防抖：

节流:一段时间内，只调用一次事件。（假如是点击事件）不断点击的话，会创建任务队列，过一段时间执行一次。

使用场景：滚动监听事件

防抖:只执行一次，若一直不断点击，会重新计时到时间后执行一次。

使用场景：搜索联想词

9.JavaScript常用方法：

splic（）:分隔字符串,将字符串用符号分隔，存进数组中

join():把数组中的字符串连接成一个长串（与splic方法相反）

toString（）:数组转字符串。toString(2)转为二进制

reverse（）：反转数组元素顺序

shift():删除数组第一个元素，返回删除的那个值，并将长度减一

pop():删除数组最后一个元素，返回删除的那个值，并将长度减一

unshift():往数组前面添加一个或多个数组元素，改变数组长度

push（）：往数组最后添加一个或多个数组元素

concat（）：连接数组

slice（）：返回数组的一部分（切片）

sort（）：对数组进行排序

forEach:遍历数组，返回undefined(无返回值)

map():遍历数组，返回新数组

filter:过滤数组，返回筛选后的数组

部分补充

1.js中的变量提升：var声明的变量将会提升值全局作用域

2.js的深拷贝与浅拷贝：

浅拷贝：有两种方式，一种是把一个对象里面的所有的属性值和方法都复制给另一个对象，另一种是直接把一个对象赋给另一个对象，使得两个都指向同一个对象。

深拷贝：把一个对象的属性和方法一个个找出来，在另一个对象中开辟对应的空间，一个个存储到另一个对象中。

两者就在于，浅拷贝只是简单的复制，对对象里面的对象属性和数组属性只是复制了地址，并没有创建新的相同对象或者数组。而深拷贝是完完全全的复制一份，空间大小占用一样但是位置不同！

3.ES6语法新增：Let、const、变量结构赋值、模板字符串、箭头函数、...拓展运算符、Promise等

4.跨域方法：

产生：未符合同源策略（浏览器不能执行来自其他网站的脚本，协议、域名、端口号不一致）。

解决跨域：

Jsonp:动态常见script标签,script标签中的src属性不受同源策略影响。

CORS:服务器设置Access-Control-Allow-Origin响应头，填哪个域名允许来自哪个域名的跨域请求，填*允许所有网站的跨域请求。

About Me

https://lucky0119.github.io/

原创文章，记录成长，也希望对你有帮助！喜欢请点赞哦~

若有不正确的地方，请欢迎指正！

作者：Lucky-2000

主页：了解更多，点击个人主页

lucky-2000

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端开发面试题总结[1]

事件冒泡以及工作原理：一个对象上触发的某类事件（eg：click事件），这个事件会向其元素的父元素传递，从里到外，直到事件被处理(父级对象所有的同类事件都会被激活)，或者它达到了对象最顶层Window。阻止事件冒泡window：表示浏览器打开的窗口，它属于顶层对象。document:是window对象的一个属性，是显示于窗口内的一个文档。不同点：1、document对象：使用document对象可以对HTML文档进行检查、修改或添加内容，并处理该文档内部的事件。2、window对象。
复制链接

扫一扫