前端面试题总结——综合问题(持续更新中)

前端面试题总结——综合问题(持续更新中)

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.浏览器发送异步请求

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
2. 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空行分隔
4. 最后是一个可能的消息实体 响应报文例子以下：

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.你都使用哪些工具来测试代码的性能？

Profiler,JSPerf,Dromaeo。

30.若是网页内容须要支持多语言，你会怎么作？

1.应用字符集的选择，选择UTF-8编码
2.语言书写习惯&导航结构
3.数据库驱动型网站

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

所谓的标准字体是多数机器上都会有的，或者即便没有也能够由默认字体替代的字体。
方法：
用图片代替
web fonts在线字库，如Google Webfonts，Typekit等等；http://www.chinaz.com/free/20...；
@font-face，Webfonts(字体服务例如：Google Webfonts，Typekit等等。)

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

(1)了解背景知识：历史、现状、特色、应用领域、发展趋势
(2)搭建开发环境，编写HelloWorld
(3)声明变量和常量
(4)数据类型
(5)运算符
(6)逻辑结构
(7)通用小程序
(8)函数和对象
(9)第三方库、组件、框架
(10)实用项目

33.什么是哈希表？

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

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

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

HTML/CSS/JS/视频/音频

动态:网页内容不一样人在不一样时间访问多是不一样的

JSP/PHP/ASP.NET/Node.JS

35.SQL语句的分类

DDL:数据定义语句 CREATE/DROP/ALTER…
DCL:数据控制语句 GRANT…
DML:操做操做语句 INSERT/UPDATE/DELETE
DQL:查询语句 SELECT

36.如何学习新技术: 3步:

1. 上官网看是什么
2. 上官网看快速入门
3. 下载手册备查

37.什么是弹性布局？

解决某元素中“子元素”的布局方式，为布局提供最大的灵活性。
设为flex布局之后，子元素的float、clear和vertical-align属性将失效!!!
display:flex; 属性align-self 定义子元素的位置。

38.编写响应式？

1.声明viewport元标签 2.使用流式布局 3.全部容器使用相对尺寸，不用绝对尺寸
4.（最重要原则）使用CSS3 Media Query技术

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

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的前缀

40.H5新特性：总共10点

(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)通讯——容许服务器主动发送信息给客户端。

41.C3新特性：共7点

1.复杂的选择器
2.弹性布局
3.动画

42.Less，Sass

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增长了变量、函数等特性，使 CSS 更易维护和扩展。

43ES6新特性：共8点

1.ES7只有2个特性:1.includes() 验证数组中是否存在某个元素 2.指数操做符
2.ES8新特性：
Object.values()
Object.entries()
padStart()
padEnd()
Object.getOwnPropertyDescriptors()
函数参数列表结尾容许逗号
Async/Await

43.原生ajax

function setRequest(){
              //1.获取xhr对象
              var xhr=createXhr();
              //2.建立请求
             xhr.open("get","response.php",true);
              //3.设置回调函数-onreadystatechange
             xhr.onreadystatechange=function(){
                 //判断readyState以及status
        if(xhr.readyState==4&&xhr.status==200){
             //接收响应数据
             var resText=xhr.responseText;
             //打印在控制台
             console.log(resText); 
                 }
              }
             //4.发送请求
              xhr.send(null);
           }

44.跨域

1. 经过jsonp跨域
   1.）原生实现：
   <script>

   var script = document.createElement('script');
   script.type = 'text/javascript';
   
   // 传参并指定回调执行函数为onBack
   script.src = 'http://www.....:8080/login?user=admin&callback=onBack';
   document.head.appendChild(script);
   
   // 回调执行函数
   function onBack(res) {
       alert(JSON.stringify(res));
   }

   </script>

2.跨域资源共享（CORS）只要服务端设置Access-Control-Allow-Origin便可

1. nodejs中间件代理跨域

45.什么是typescript

1.它是JavaScript的一个超集，并且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。
2.TypeScript扩展了JavaScript的语法，因此任何现有的JavaScript程序能够不加改变的在TypeScript下工做。
TypeScript是为大型应用之开发而设计，而编译时它产生 JavaScript 以确保兼容性。

46.三大框架的区别：

Angular带有比较强的排它性的
React主张是函数式编程的理念，侵入性没有Angular那么强，主要由于它是软性侵入。
Vue 渐进式的

47.spa应用

优势：用户体验好 、良好的先后端分离。
缺点：
1.不利于SEO。
2.初次加载耗时相对增多。
3.导航不可用，若是必定要导航须要自行实现前进、后退。

48.什么是模块化编程？

每一个模块内部，module变量表明当前模块。
这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。加载某个模块，实际上是加载该模块的module.exports属性。

49.什么是混合编程？

混合编程是指使用两种或两种以上的程序设计语言来开发应用程序的过程。

50.性能优化？

1.使用 CDN
2.图片懒加载
3.使用外部 JavaScript 和 CSS
4.压缩 JavaScript 、 CSS 、字体、图片等
5.优化 CSS Sprite
6.减小 HTTP 请求数
7.减小 DNS 查询
8减小 DOM 元素数量
9.减小 DOM 操做
10.把脚本放在页面底部

51.什么是HTTP协议：

HTTP协议传输的数据都是未加密的，也就是明文的，所以使用HTTP协议传输隐私信息很是不安全，HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比http协议安全。

HTTPS和HTTP的区别主要以下：
　　一、https协议须要到ca申请证书，通常免费证书较少，于是须要必定费用。
　　二、http是超文本传输协议，信息是明文传输，https则是具备安全性的ssl加密传输协议。
　　三、http和https使用的是彻底不一样的链接方式，用的端口也不同，前者是80，后者是443。
　　四、http的链接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

前端加密方式https：是在http基础上加了SSL协议，使用443端口,http是80端口;