软件工程· 编程面试题集锦·20道web前端面试总结

全部教程

20道web前端面试总结

一、CSS问题

1.flex布局

display:flex; 在父元素设置，子元素受弹性盒影响，默认排成一行，如果超出一行，按比例压缩

flex:1; 子元素设置，设置子元素如何分配父元素的空间，flex:1,子元素宽度占满整个父元素align-items:center 定义子元素在父容器中的对齐方式，center 垂直居中justify-content:center 设置子元素在父元素中居中，前提是子元素没有把父元素占满，让子元素水平居中。

2.css3的新特性

transtion

transition-property 规定设置过渡效果的 CSS 属性的名称。

transition-duration 规定完成过渡效果需要多少秒或毫秒。

transition-timing-function 规定速度效果的速度曲线。

transition-delay 定义过渡效果何时开始。

animation属性可以像Flash制作动画一样，通过控制关键帧来控制动画的每一步，实现更为复杂的动画效果。

ainimation实现动画效果主要由两部分组成：

通过类似Flash动画中的帧来声明一个动画；

在animation属性中调用关键帧声明的动画。

translate 3D建模效果

3.img中alt和title的区别

图片中的 alt属性是在图片不能正常显示时出现的文本提示。alt有利于SEO优化

图片中的 title属性是在鼠标在移动到元素上的文本提示。

4.用纯CSS创建一个三角形

 <style>
    div {
        width: 0;
        height: 0;
        border-top: 40px solid transparent;
        border-left: 40px solid transparent;
        border-right: 40px solid transparent;
        border-bottom: 40px solid #ff0000;
    }
    </style>
</head>
<body>
  <div></div>
</body>

5.如何理解CSS的盒子模型？

标准盒子模型：宽度=内容的宽度（content）+ border + padding

低版本IE盒子模型：宽度=内容宽度（content+border+padding)

6.如何让一个div水平居中

已知宽度，block元素，添加添加margin:0 auto属性。

已知宽度，绝对定位的居中，上下左右都为0，margin:auto

7.如何让一个div水平垂直居中

div {
position: relative / fixed; /* 相对定位或绝对定位均可 */
width:500px;
height:300px;
top: 50%;
left: 50%;
margin-top:-150px;
margin-left:-250px;

外边距为自身宽高的一半 */

background-color: pink; /* 方便看效果 */
 }
.container {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}
.container div {
width: 100px; /* 可省 */
height: 100px; /* 可省 */
background-color: pink; /* 方便看效果 */
}

8.如何清除浮动？

clear清除浮动（添加空div法）在浮动元素下方添加空div,并给该元素写css样式

{clear:both;height:0;overflow:hidden;}

给浮动元素父级设置高度

父级同时浮动（需要给父级同级元素添加浮动）

父级设置成inline-block，其margin: 0 auto居中方式失效

给父级添加overflow:hidden 清除浮动方法

万能清除法 after伪类清浮动（现在主流方法，推荐使用）

float_div:after{
content:".";
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;
}
.float_div{
zoom:1
}

9.css3实现三栏布局，左右固定，中间自适应

圣杯布局/双飞翼布局

<style>
        * {
            margin: 0;
            padding: 0;
        }
        .middle,
        .left,
        .right {
            position: relative;
            float: left;
            min-height: 130px;
        }
        .container {
            padding: 0 220px 0 200px;
            overflow: hidden;
        }
        .left {
            margin-left: -100%;
            left: -200px;
            width: 200px;
            background: red;
        }
        .right {
            margin-left: -220px;
            right: -220px;
            width: 220px;
            background: green;
        }
        .middle {
            width: 100%;
            background: blue;
            word-break: break-all;
        }
    </style>
</head>
<body>
    <div class='container'>
        <div class='middle'></div>
        <div class='left'></div>
        <div class='right'></div>
    </div>
</body>

10.display:none 和 visibility: hidden的区别

display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。

visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。

11.CSS中 link 和@import 的区别是？

link属于HTML标签，而@import是CSS提供的页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载

import只在IE5以上才能识别，而link是HTML标签，无兼容问题

link方式的样式的权重高于@import的权重.

12.position的absolute与fixed共同点与不同点

共同点：

改变行内元素的呈现方式，display被置为block

让元素脱离普通流，不占据空间

默认会覆盖到非定位元素上

不同点：

absolute的”根元素“是可以设置的

fixed的”根元素“固定为浏览器窗口。当你滚动网页，fixed元素与浏览器窗口之间的距离是不变的。

13..transition和animation的区别

Animation和transition大部分属性是相同的，他们都是随时间改变元素的属性值，他们的主要区别是transition需要触发一个事件才能改变属性，

而animation不需要触发任何事件的情况下才会随时间改变属性值，并且transition为2帧，从from .... to，而animation可以一帧一帧的。

transition 规定动画的名字规定完成过渡效果需要多少秒或毫秒规定速度效果定义过渡效果何时开始

animation 指定要绑定到选择器的关键帧的名称

14.CSS优先级

不同级别：总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

1.属性后面加!import 会覆盖页面内任何位置定义的元素样式

2.作为style属性写在元素内的样式

3.id选择器

4.类选择器

5.标签选择器

6.通配符选择器（*）

7.浏览器自定义或继承

**同一级别：后写的会覆盖先写的**

css选择器的解析原则：选择器定位DOM元素是从右往左的方向，这样可以尽早的过滤掉一些不必要的样式规则和元素

15.雪碧图：

多个图片集成在一个图片中的图

使用雪碧图可以减少网络请求的次数，加快允许的速度

通过background-position，去定位图片在屏幕的哪个位置

二、JS问题

1.typeof和instance of 检测数据类型有什么区别？

相同点：

都常用来判断一个变量是否为空，或者是什么类型的。

不同点：

typeof 返回值是一个字符串，用来说明变量的数据类型

instanceof 用于判断一个变量是否属于某个对象的实例.

16.使元素消失的方法

visibility:hidden、display:none、z-index=-1、opacity：0

1.opacity：0,该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定了一些事件，如click事件也能触发

2.visibility:hidden,该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件

3.display:node, 把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删掉

.谈一谈深克隆和浅克隆？

浅克隆:

只是拷贝了基本类型的数据，而引用类型数据，复制后也是会发生引用，我们把这种拷贝叫做“（浅复制）浅拷贝”，换句话说，浅复制仅仅是指向被复制的内存地址，如果原地址中对象被改变了，那么浅复制出来的对象也会相应改变。

深克隆：

创建一个新对象，属性中引用的其他对象也会被克隆，不再指向原有对象地址。

JSON.parse、JSON.stringify()

3.es6的新特性都有哪些？

let定义块级作用域变量

没有变量的提升，必须先声明后使用

let声明的变量，不能与前面的let，var，conset声明的变量重名

const 定义只读变量

const声明变量的同时必须赋值，const声明的变量必须初始化，一旦初始化完毕就不允许修改

const声明变量也是一个块级作用域变量

const声明的变量没有“变量的提升”，必须先声明后使用

const声明的变量不能与前面的let， var ， const声明的变量重

const定义的对象\数组中的属性值可以修改,基础数据类型不可以

ES6可以给形参函数设置默认值

在数组之前加上三个点（...）展开运算符

数组的解构赋值、对象的解构赋值

箭头函数的特点

箭头函数相当于匿名函数，是不能作为构造函数的，不能被new

箭头函数没有arguments实参集合,取而代之用...剩余运算符解决

箭头函数没有自己的this。他的this是继承当前上下文中的this

箭头函数没有函数原型

箭头函数不能当做Generator函数，不能使用yield关键字

不能使用call、apply、bind改变箭头函数中this指向

Set数据结构，数组去重

4.==和===区别是什么？

=赋值

==返回一个布尔值；相等返回true，不相等返回false；

允许不同数据类型之间的比较；

如果是不同类型的数据进行，会默认进行数据类型之间的转换；

如果是对象数据类型的比较，比较的是空间地址

=== 只要数据类型不一样，就返回false；

5.常见的设计模式有哪些？

1、js工厂模式

2、js构造函数模式

3、js原型模式

4、构造函数+原型的js混合模式

5、构造函数+原型的动态原型模式

6、观察者模式

7、发布订阅模式

6.call bind apply 的区别？

call() 和apply()的第一个参数相同，就是指定的对象。这个对象就是该函数的执行上下文。

call()和apply()的区别就在于，两者之间的参数。

call()在第一个参数之后的后续所有参数就是传入该函数的值。

apply() 只有两个参数，第一个是对象，第二个是数组，这个数组就是该函数的参数。

bind() 方法和前两者不同在于： bind() 方法会返回执行上下文被改变的函数而不会立即执行，而前两者是直接执行该函数。他的参数和call()相同。

7.js继承方式有哪些？

原型链继承

核心：将父类的实例作为子类的原型

构造继承

核心：使用父类的构造函数来增强子类实例，等于是复制父类的实例属性给子类

实例继承

核心：为父类实例添加新特性，作为子类实例返回

拷贝继承

组合继承

核心：通过调用父类构造，继承父类的属性并保留传参的优点，然后通过将父类实例作为子类原型，实现函数复用

寄生组合继承

核心：通过寄生方式，砍掉父类的实例属性，这样，在调用两次父类的构造的时候，就不会初始化两次实例方法/属性，避免的组合继承的缺点

8.你怎样看待闭包？

个人感觉，简单来说闭包就是在函数里面声明函数，本质上说就是在函数内部和函数外部搭建起一座桥梁，使得子函数可以访问父函数中所有的局部变量，但是反之不可以，这只是闭包的作用之一，另一个作用，则是保护变量不受外界污染，使其一直存在内存中，在工作中我们还是少使用闭包的好，因为闭包太消耗内存，不到万不得已的时候尽量不使用。

9.你是如何理解原型和原型链的？

把所有的对象共用的属性全部放在堆内存的一个对象（共用属性组成的对象），然后让每一个对象的 __proto__存储这个「共用属性组成的对象」的地址。而这个共用属性就是原型，原型出现的目的就是为了减少不必要的内存消耗。而原型链就是对象通过__proto__向当前实例所属类的原型上查找属性或方法的机制，如果找到Object的原型上还是没有找到想要的属性或者是方法则查找结束，最终会返回undefined

10.浏览器渲染的主要流程是什么?

将html代码按照深度优先遍历来生成DOM树。

css文件下载完后也会进行渲染，生成相应的CSSOM。

当所有的css文件下载完且所有的CSSOM构建结束后，就会和DOM一起生成Render Tree。

接下来，浏览器就会进入Layout环节，将所有的节点位置计算出来。

最后，通过Painting环节将所有的节点内容呈现到屏幕上。

11.从输入url地址到页面相应都发生了什么？

1、浏览器的地址栏输入URL并按下回车。

2、浏览器查找当前URL是否存在缓存，并比较缓存是否过期。3、DNS解析URL对应的IP。

4、根据IP建立TCP连接（三次握手）。

5、HTTP发起请求。

6、服务器处理请求，浏览器接收HTTP响应。

7、渲染页面，构建DOM树。

8、关闭TCP连接（四次挥手）

12.session、cookie、localStorage的区别

相同点

都是保存在浏览器端，且同源的。

不同点

cookie数据始终在同源的http请求中携带，即cookie在浏览器和服务器间来回传递。

而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。

存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据。

sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；

localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；

cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。

作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；

localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。

13.js中跨域方法

同源策略（协议+端口号+域名要相同）

1、jsonp跨域(只能解决get）

原理：动态创建一个script标签。利用script标签的src属性不受同源策略限制，因为所有的src属性和href属性都不受同源策略的限制，可以请求第三方服务器资源内容

步骤：

1).去创建一个script标签

2).script的src属性设置接口地址

3).接口参数，必须要带一个自定义函数名，要不然后台无法返回数据

4).通过定义函数名去接受返回的数据

2、document.domain 基础域名相同子域名不同

3、window.name 利用在一个浏览器窗口内，载入所有的域名都是共享一个window.name

4、服务器设置对CORS的支持

原理：服务器设置Access-Control-Allow-Origin HTTP响应头之后，浏览器将会允许跨域请求

5、利用h5新特性window.postMessage()

14.前端有哪些页面优化方法?

减少 HTTP请求数

从设计实现层面简化页面

合理设置 HTTP缓存

资源合并与压缩

合并 CSS图片，减少请求数的又一个好办法。

将外部脚本置底（将脚本内容在页面信息内容加载后再加载）

多图片网页使用图片懒加载。

在js中尽量减少闭包的使用

尽量合并css和js文件

尽量使用字体图标或者SVG图标，来代替传统的PNG等格式的图片

减少对DOM的操作

在JS中避免“嵌套循环”和 “死循环”

尽可能使用事件委托（事件代理）来处理事件绑定的操作

15.Ajax的四个步骤

1.创建ajax实例

2.执行open 确定要访问的链接以及同步异步

3.监听请求状态

4.发送请求

16.数组去重的方法

ES6的set对象

先将原数组排序，在与相邻的进行比较，如果不同则存入新数组

function unique(arr){
    var arr2 = arr.sort();
    var res = [arr2[0]];
    for(var i=1;i<arr2.length;i++){
        if(arr2[i] !== res[res.length-1]){
        res.push(arr2[i]);
    }
}
return res;
}

利用下标查询

 function unique(arr){
    var newArr = [arr[0]];
    for(var i=1;i<arr.length;i++){
        if(newArr.indexOf(arr[i]) == -1){
        newArr.push(arr[i]);
    }
}
return newArr;
}

17.ajax中get和post请求的区别

get 一般用于获取数据

get请求如果需要传递参数，那么会默认将参数拼接到url的后面；然后发送给服务器；

get请求传递参数大小是有限制的；是浏览器的地址栏有大小限制；

get安全性较低

get 一般会走缓存，为了防止走缓存，给url后面每次拼的参数不同；放在?后面，一般用个时间戳

post 一般用于发送数据

post传递参数，需要把参数放进请求体中，发送给服务器；

post请求参数放进了请求体中，对大小没有要求；

post安全性比较高；

post请求不会走缓存；

18.ajax的状态码

2开头

200 : 代表请求成功；

3开头

301 : 永久重定向；

302: 临时转移

304 : 读取缓存 [表示浏览器端有缓存，并且服务端未更新，不再向服务端请求资源]

307:临时重定向

以4开头的都是客户端的问题；

400 :数据/格式错误

401: 权限不够；（身份不合格，访问网站的时候，登录和不登录是不一样的）

404 : 路径错误，找不到文件

以5开头都是服务端的问题

500 : 服务器的问题

503: 超负荷；

19.移动端的兼容问题

给移动端添加点击事件会有300S的延迟

如果用点击事件，需要引一个fastclick.js文件，解决300s的延迟

一般在移动端用ontouchstart、ontouchmove、ontouchend

移动端点透问题,touchstart 早于 touchend 早于click,click的触发是有延迟的，这个时间大概在300ms左右，也就是说我们tap触发之后蒙层隐藏，此时 click还没有触发，300ms之后由于蒙层隐藏，我们的click触发到了下面的a链接上

尽量都使用touch事件来替换click事件。例如用touchend事件(推荐)。

用fastclick，github.com/ftlabs/fast…

用preventDefault阻止a标签的click

消除 IE10 里面的那个叉号

input:-ms-clear{display:none;}

设置缓存

手机页面通常在第一次加载后会进行缓存，然后每次刷新会使用缓存而不是去重新向服务器发送请求。如果不希望使用缓存可以设置no-cache。

圆角BUG

某些Android手机圆角失效

background-clip: padding-box;

防止手机中网页放大和缩小

这点是最基本的，做为手机网站开发者来说应该都知道的，就是设置meta中的viewport

设置用户截止缩放，一般写视口的时候就已经写好了。

20.JS中同步和异步,以及js的事件流

同步：在同一时间内做一件事情

异步：在同一时间内做多个事情

JS是单线程的，每次只能做一件事情，JS运行在浏览器中，浏览器是多线程的，可以在同一时间执行多个任务。

下一章：通过事例重温一下 JS 中常见的15 种数组操作(备忘清单)

数组是 JS 中广泛使用的数据结构。数组对象提供了大量有用的方法，如array. forEach()、array.map()等来操作数组。在实战中，我经常对数组可能的操作和相应 ...

上一章：作为前端面试官，我会问哪些问题？(基础篇:附答案)

20道web前端面试总结

下一章：通过事例重温一下 JS 中 常见的15 种数组操作(备忘清单)

下一章：通过事例重温一下 JS 中常见的15 种数组操作(备忘清单)