45道前端面试题吐血整理

个人收录，你不知道的，总会在这里找到答案，自己的强大才是真的强大，希望我写的也可以帮到你。

1、页面从输入URL到页面加载显示完成，这个过程中都发生了什么？

• 1.输入域名地址

• 2.发送至DNS服务器并获得域名对应的WEB服务器IP地址；

• 3.与WEB服务器建立TCP连接；

• 4.服务器的永久重定向响应（从 http://example.com 到 http://www.example.com）

• 5.浏览器跟踪重定向地址

• 6.服务器处理请求

• 7.服务器返回一个HTTP响应

• 8.浏览器显示 HTML

• 9.浏览器发送请求获取的资源（如图片、音频、视频、CSS、JS等等）

• 10.浏览器发送异步请求

这里我贴一篇不久前写的文章 在浏览器地址栏键入URL，按下回车之后会经历了那些事

2、浏览器工作原理

1.用户界面 、2.网络 、3.UI后端 、4.数据存储 、5.浏览器引擎 、6.渲染引擎 、7.js解释器、

3、浏览器解析过程：

流程：解析 html 以构建 dom 树 -> 构建 render 树->布局 render 树->绘制 render树

4.介绍一下你对浏览器内核的理解？

主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。

渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

JS引擎则：解析和执行javascript来实现网页的动态效果。最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

5.常见的浏览器内核有哪些？

• Trident内核：IE,360，傲游，搜狗，世界之窗，腾讯等。[又称MSHTML]

• Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等

• Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]

• Webkit内核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

6.请描述一下 cookies，sessionStorage 和 localStorage 的区别？

cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密），数据会在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

存储大小：

• cookie数据大小不能超过4k。

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

有期时间：

• localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据;

• sessionStorage 数据在当前浏览器窗口关闭后自动删除.

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

7.请大概描述下页面访问cookie的限制条件

跨域问题，设置了HttpOnly。

8.如何实现浏览器内多个标签页之间的通信? (阿里)

调用localstorge、cookies等本地存储方式

9.页面可见性（Page Visibility API） 可以有哪些用途？

通过 visibilityState 的值检测页面当前是否可见，以及打开网页的时间等;
在页面被切换到其他后台进程的时候，自动暂停音乐或视频的播放

10.网页验证码是做什么的，是为了解决什么安全问题。

区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水；
有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试。

11.为什么利用多个域名来存储网站资源？

CDN 缓存更方便 ，突破浏览器并发限制 节约cookie带宽 ，节约主域名的连接数，优化页面响应速度 防止不必要的安全问题

12.谈一下你对网页标准和标准制定机构重要性的理解。

网页标准和标准制定机构都是为了能让 web 发展的更‘健康’，开发者遵循统一的标准，降低开发难度，开发成本，SEO也会更好做，也不会因为滥用代码导致各种 BUG、安全问题，最终提高网站易用性。

13.知道什么是微格式吗？

微格式（Microformats）是一种让机器可读的语义化 XHTML 词汇的集合，是结构化数据的开放标准。是为特殊应用而制定的特殊格式

优点：将智能数据添加到网页上，让网站内容在搜索引擎结果界面可以显示额外的提示。

14.一个页面上有大量的图片，加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。

• （1）图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。

• （2）如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。

• （3）如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。

• （4）如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。

可以看看这篇文章 关于前端优化的一些方案

15.谈谈以前端角度出发做好SEO（搜索引擎）需要考虑什么？

合理的标签使用， 主要的互联网目录，链接交换和链接广泛度。

16.请写出一些前端性能优化的方式，越多越好

• 1.减少dom操作

• 2.部署前，图片压缩，代码压缩

• 3.优化js代码结构，减少冗余代码

• 4.减少http请求，合理设置 HTTP缓存

• 5.使用内容分发cdn加速

• 6.静态资源缓存

• 7.图片延迟加载

可以看看这篇文章 关于前端优化的一些方案

17.描述一下渐进增强和优雅降级之间的不同?

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

18.webSocket如何兼容低浏览器？(阿里)

• Adobe Flash Socket

• ActiveX HTMLFile (IE)

• 基于 multipart 编码发送 XHR

• 基于长轮询的 XHR

19.web开发中会话跟踪的方法有哪些

• 1.cookie

• 2.session

• 3.url重写

• 4.隐藏input

• 5.ip地址

20.HTTP method

• 1.一台服务器要与HTTP1.1兼容，只要为资源实现GET和HEAD方法即可。

• 2.GET是最常用的方法，通常用于请求服务器发送某个资源。

• 3.HEAD 与 GET 类似，但服务器在响应中值返回首部，不返回实体的主体部分。

• 4.PUT 让服务器用请求的主体部分来创建一个由所请求的 URL 命名的新文档，或者，如果那个 URL 已经存在的话，就用干这个主体替代它。

• 5.POST 起初是用来向服务器输入数据的。实际上，通常会用它来支持HTML的表单。表单中填好的数据通常会被送给服务器，然后由服务器将其发送到要去的地方。

• 6.TRACE 会在目的服务器端发起一个环回诊断，最后一站的服务器会弹回一个TRACE响应并在响应主体中携带它收到的原始请求报文。TRACE 方法主要用于诊断，用于验证请求是否如愿穿过了请求/响应链。

• 7.OPTIONS 方法请求 web 服务器告知其支持的各种功能。可以查询服务器支持哪些方法或者对某些特殊资源支持哪些方法。

• 8.DELETE 请求服务器删除请求 URL 指定的资源。

21.HTTP response报文结构是怎样的

rfc2616中进行了定义：

• 1.首行是状态行包括：HTTP版本，状态码，状态描述，后面跟一个CRLF

• 2.首行之后是若干行响应头，包括：通用头部，响应头部，实体头部

• 3.响应头部和响应实体之间用一个 CRLF 空行分隔

22.HTTP状态码及其含义

举例状态码类型:

状态码	类别	原因短语
1XX	Information（信息性状态码）	接收的请求正在处理
2XX	Success（成功状态码）	请求正常处理完毕
3XX	Redirection（重定向状态码）	需要进行附加的操作以完成请求
4XX	Client Error（客户端错误状态码）	服务器无法处理请求
5XX	Server Error（服务端错误状态码）	服务器处理请求出错
204		服务器成功处理，但未返回内容。
304	Not Modified 未修改。	所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源
400	Bad Request	客户端请求的语法错误，服务器无法理解
403	Forbidden	服务器理解请求客户端的请求，但是拒绝执行此请求
404	Not Found	服务器无法根据客户端的请求找到资源（网页）。通过此代码，网站设计人员可设置"您所请求的资源无法找到"的个性页面

23.什么是同源：协议相同 域名相同 端口相同

同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。

如果非同源，共有三种行为受到限制

• 1.Cookie、LocalStorage 和 IndexDB 无法读取。

• 2.DOM 无法获得。

• 3.AJAX 请求不能发送。

24.关于建站安全防护

要做好防XSS、CSRF、SQL注入攻击.DDOS攻击。

XSS概念:

译为跨站脚本攻击,具体是指攻击者在Web页面里插入恶意Script脚本，当用户浏览该网页时，Script代码会被执行，从而进行恶意攻击。

XSS预防:

关键cookie字段设置httpOnly
输入检查,特殊字符 < > / &等,对其进行转义后存储

CSRF概念：

本质上讲，是黑客将一个http接口中需要传递的所有参数都预测出来，然后不管以什么方式，他都可以根据他的目的来任意调用你的接口，对服务器实现CURD。

CSRF 预防：

使用验证码，更高级用图灵测试

SQL概念：

通常没有任何过滤，直接把参数存放到了SQL语句当中

SQL预防：

根本上防止SQL注入的方法，就是参数化查询或者做词法分析。

DDOS概念：

利用木桶原理，寻找利用系统应用的瓶颈；阻塞和耗尽；当前问题：用户的带宽小于攻击的规模，噪声访问带宽成为木桶的短板。
DDOS预防：用软硬件结合的方式来防御是最有效的

25.对前端工程化的理解

• 1.开发规范

• 2.模块化开发

• 3.组件化开发

• 4.组件仓库

• 5.性能优化

• 6.项目部署

• 7.开发流程

• 8.开发工具

26.AMD和CMD是什么？它们的区别有哪些？

AMD 和 CMD 是二种模块定义规范。现在都使用模块化编程，AMD，异步模块定义；CMD，通用模块定义。AMD依赖前置，CMD依赖就近。CMD的 API 职责单一，没有全局require，AMD的一个API可以多用。

27.MVC BFC

mvc是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范使用MVC的目的是将M和V的实现代码分离，从而使同一个程序可以使用不同的表现形式。MVC对应Html，CSS，js。

BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”。流体特性：块状水平元素，如div元素（下同），在默认情况下（非浮动、绝对定位等），水平方向会自动填满外部的容器；BFC元素特性表现原则就是，内部子元素不会影响外部的元素。

28.你如何对网站的文件和资源进行优化？

期待的解决方案包括：文件合并文件最小化/文件压缩使用CDN托管缓存的使用（多个域名来提供缓存）其他。

29.如果网页内容需要支持多语言，你会怎么做？

• 1.应用字符集的选择，选择UTF-8编码

• 2.语言书写习惯&导航结构

• 3.数据库驱动型网站

30.如果设计中使用了非标准的字体，你该如何去实现？

所谓的标准字体是多数机器上都会有的，或者即使没有也可以由默认字体替代的字体。
方法：

• 用图片代替

• web fonts在线字库，如Google Webfonts，Typekit等等;http://www.chinaz.com/free/20…；

• @font-face，Webfonts(字体服务例如：Google Webfonts，Typekit等等。)

31.如何自学一门新编程语言

• (1)了解背景知识：历史、现状、特点、应用领域、发展趋势

• (2)搭建开发环境，编写HelloWorld

• (3)声明变量和常量

• (4)数据类型

• (5)运算符

• (6)逻辑结构

• (7)通用小程序

• (8)函数和对象

• (9)第三方库、组件、框架

• (10)实用项目

32.什么是哈希表？

散列表（也叫哈希表），是根据关键码值直接进行访问的数据结构。也就是说，它通过把关键码值映射到表中一个位置来访问记录，以加快查找的速度。这个映射函数叫做散列函数，存放记录的数组叫做散列表。

33.静态网页和动态网页区别：

静态: 网页内容任何人在任何时间访问都是不变的

动态: 网页内容不同人在不同时间访问可能是不同的

34.SQL语句的分类

• DDL:数据定义语句 CREATE/DROP/ALTER…

• DCL:数据控制语句 GRANT…

• DML:操作操作语句 INSERT/UPDATE/DELETE

• DQL:查询语句 SELECT

35.什么是弹性布局？

解决某元素中“子元素”的布局方式，为布局提供最大的灵活性。

设为 flex 布局以后，子元素的 float、clear 和vertical-align属性将失效!!!

display:flex; 属性align-self 定义子元素的位置。

36.编写响应式？

• 1.声明viewport元标签

• 2.使用流式布局

• 3.所有容器使用相对尺寸，不用绝对尺寸

• 4.（最重要原则）使用CSS3 Media Query技术

37.常见的浏览器兼容问题？

• 1.不同浏览器的标签默认的内.外补丁不同。*{margin:0;padding:0;}

• 2.图片默认有间距使用float属性为img布局

• 3.居中问题（而FF默认为左对齐）margin: 0 auto;

• 4.CSS 兼容前缀 -ms- IE、-moz- Firefox、-o- Opera、-webkit- Chrome、

• 5.使用CSS Hack 如： +:IE6,7的前缀、-:IE6的前缀

38.H5新特性：

• (1)Canvas绘图

• (2)SVG绘图

• (3)地理定位

• (4)Web Worker

• web worker 是运行在后台的 JS，独立于其他脚本，不会影响页面的性能。

• (5)Web Storage

• 1.Cookie技术 （ 兼容性好,数据不能超4kb,操作复杂）

• 2.（兼容性差,数据8MB,操作简单）sessionStorage

• 3.localStorage

• (6)Web Socket

• WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。

39.C3新特性：

• 1.复杂的选择器

• 2.弹性布局

• 3.动画

40.什么是typescript

• 1.它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。

• 2.TypeScript扩展了JavaScript的语法，所以任何现有的JavaScript程序可以不加改变的在TypeScript下工作。TypeScript是为大型应用之开发而设计，而编译时它产生 JavaScript 以确保兼容性。

41.三大框架的区别：

• Angular带有比较强的排它性的

• React主张是函数式编程的理念，侵入性没有Angular那么强，主要因为它是软性侵入。

• Vue 渐进式的

42.spa应用

优点：用户体验好 、良好的前后端分离。

缺点：

• 1.不利于SEO。

• 2.初次加载耗时相对增多。

• 3.导航不可用，如果一定要导航需要自行实现前进、后退。

43.什么是模块化编程？

每个模块内部，module变量代表当前模块。

这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。加载某个模块，其实是加载该模块的module.exports属性。

44.性能优化？

• 1.使用 CDN

• 2.图片懒加载

• 3.使用外部 JavaScript 和 CSS

• 4.压缩 JavaScript 、 CSS 、字体、图片等

• 5.优化 CSS Sprite

• 6.减少 HTTP 请求数

• 7.减少 DNS 查询

• 8.减少 DOM 元素数量

• 9.减少 DOM 操作

• 10.把脚本放在页面底部
  可以看看这篇文章 关于前端优化的一些方案

45.什么是HTTP协议：

• HTTP是一个客户端和服务器端请求和应答的标准（TCP）。

• HTTP1.1 和 2.0协议的区别：

• HTTP1.1不支持 header 数据的压缩，而2.0支持

^{如果你喜欢探讨技术，或者对本文有任何的意见或建议，非常欢迎加鱼头微信好友一起探讨，当然，鱼头也非常希望能跟你一起聊生活，聊爱好，谈天说地。鱼头的微信号是：krisChans95 也可以扫码关注公众号，订阅更多精彩内容。}