常见前端面试题

时间 2019-12-07

标签常见端面试题繁體版

原文原文链接

一、跨域解决window.name+iframe跨域获取数据详解

https://www.cnblogs.com/zichi/p/4620656.htmljavascript

总结：css

能使用这种方式跨域，有几个条件必不可少。html

iframe标签的跨域能力前端

window.name属性值在文档刷新后依旧存在的能力html5

　再简单了解下window和contentWindow的一些知识。浏览器就会为原始文档建立一个 window 对象，再为每一个框架（iframe）建立额外的 window 对象。这些额外的对象是原始窗口的子窗口，可能被原始窗口中发生的事件所影响。例如，关闭原始窗口将致使关闭所有子窗口。contentWindow属性是指指定的frame或者iframe所在的window对象。java

二、谈谈你对webpack的见解

WebPack 是一个模块打包工具，你可使用WebPack管理你的模块依赖，并编绎输出模块们所需的静态文件。它可以很好地管理、打包Web开发中所用到的HTML、JavaScript、CSS以及各类静态文件（图片、字体等），让开发过程更加高效。对于不一样类型的资源，webpack有对应的模块加载器。webpack模块打包器会分析模块间的依赖关系，最后生成了优化且合并后的静态资源。jquery

webpack的两大特点：

1.code splitting（能够自动完成）webpack

2.loader 能够处理各类类型的静态文件，而且支持串联操做css3

webpack 是以commonJS的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。程序员

webpack具备requireJs和browserify的功能，但仍有不少本身的新特性：

1. 对 CommonJS 、 AMD 、ES6的语法作了兼容

2. 对js、css、图片等资源文件都支持打包

3. 串联式模块加载器以及插件机制，让其具备更好的灵活性和扩展性，例如提供对CoffeeScript、ES6的支持

4. 有独立的配置文件webpack.config.js

5. 能够将代码切割成不一样的chunk，实现按需加载，下降了初始化时间

6. 支持 SourceUrls 和 SourceMaps，易于调试

7. 具备强大的Plugin接口，大可能是内部插件，使用起来比较灵活

8.webpack 使用异步 IO 并具备多级缓存。这使得 webpack 很快且在增量编译上更加快

三、说说你对做用域链的理解

做用域链的做用是保证执行环境里有权访问的变量和函数是有序的，做用域链的变量只能向上访问，变量访问到window对象即被终止，做用域链向下访问变量是不被容许的。

四、建立ajax过程

(1)建立XMLHttpRequest对象,也就是建立一个异步调用对象.

(2)建立一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.

(3)设置响应HTTP请求状态变化的函数.

(4)发送HTTP请求.

(5)获取异步调用返回的数据.

(6)使用JavaScript和DOM实现局部刷新.

五、对前端模块化的认识

AMD 是 RequireJS 在推广过程当中对模块定义的规范化产出。

CMD 是 SeaJS 在推广过程当中对模块定义的规范化产出。

AMD 是提早执行，CMD 是延迟执行。

AMD推荐的风格经过返回一个对象作为模块对象，CommonJS的风格经过对module.exports或exports的属性赋值来达到暴露模块对象的目的。

CMD模块方式

define(function(require, exports, module) {

// 模块代码

});

六、你以为前端工程的价值体如今哪

为简化用户使用提供技术支持（交互部分）

为多个浏览器兼容性提供支持

为提升用户浏览速度（浏览器性能）提供支持

为跨平台或者其余基于webkit或其余渲染引擎的应用提供支持

为展现数据提供支持（数据接口）

七、谈谈性能优化问题

代码层面：避免使用css表达式，避免使用高级选择器，通配选择器。

缓存利用：缓存Ajax，使用CDN，使用外部js和css文件以便缓存，添加Expires头，服务端配置Etag，减小DNS查找等

请求数量：合并样式和脚本，使用css图片精灵，初始首屏以外的图片资源按需加载，静态资源延迟加载。

请求带宽：压缩文件，开启GZIP，

代码层面的优化：

用hash-table来优化查找
少用全局变量
用innerHTML代替DOM操做，减小DOM操做次数，优化javascript性能
用setTimeout来避免页面失去响应
缓存DOM节点查找的结果
避免使用CSS Expression
避免全局查询
避免使用with(with会建立本身的做用域，会增长做用域链长度)
多个变量声明合并
避免图片和iFrame等的空Src。空Src会从新加载当前页面，影响速度和效率
尽可能避免写在HTML标签中写Style属性

移动端性能优化

尽可能使用css3动画，开启硬件加速。适当使用touch事件代替click事件。避免使用css3渐变阴影效果。能够用transform: translateZ(0)来开启硬件加速。不滥用Float。Float在渲染时计算量比较大，尽可能减小使用不滥用Web字体。Web字体须要下载，解析，重绘当前页面，尽可能减小使用。合理使用requestAnimationFrame动画代替setTimeoutCSS中的属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）会触发GPU渲染，请合理使用。过渡使用会引起手机过耗电增长PC端的在移动端一样适用

八、ES6的了解

新增模板字符串（为JavaScript提供了简单的字符串插值功能）、箭头函数（操做符左边为输入的参数，而右边则是进行的操做以及返回的值Inputs=>outputs。）、for-of（用来遍历数据—例如数组中的值。）arguments对象可被不定参数和默认参数完美代替。ES6将promise对象归入规范，提供了原生的Promise对象。增长了let和const命令，用来声明变量。增长了块级做用域。let命令实际上就增长了块级做用域。ES6规定，var命令和function命令声明的全局变量，属于全局对象的属性；let命令、const命令、class命令声明的全局变量，不属于全局对象的属性。。还有就是引入module模块的概念

九、js继承方式及其优缺点

原型链继承的缺点

一是字面量重写原型会中断关系，使用引用类型的原型，而且子类型还没法给超类型传递参数。

借用构造函数（类式继承）

借用构造函数虽然解决了刚才两种问题，但没有原型，则复用无从谈起。因此咱们须要原型链+借用构造函数的模式，这种模式称为组合继承

组合式继承

组合式继承是比较经常使用的一种继承方法，其背后的思路是，使用原型链实现对原型属性和方法的继承，而经过借用构造函数来实现对实例属性的继承。这样，既经过在原型上定义方法实现了函数复用，又保证每一个实例都有它本身的属性。

十、说说你对闭包的理解

使用闭包主要是为了设计私有的方法和变量。闭包的优势是能够避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易形成内存泄露。在js中，函数即闭包，只有函数才会产生做用域的概念

闭包有三个特性：

1.函数嵌套函数

2.函数内部能够引用外部的参数和变量

3.参数和变量不会被垃圾回收机制回收

十一、常见兼容性问题？

（1）浏览器默认的margin和padding不一样。解决方案是加一个全局的*{margin:0;padding:0;}来统一。

（2）上下margin重合问题

ie和ff都存在，相邻的两个div的margin-left和margin-right不会重合，可是margin-top和margin-bottom却会发生重合。

解决方法，养成良好的代码编写习惯，同时采用margin-top或者同时采用margin-bottom。

（3）浮动元素引发的问题：

1）父元素的高度没法被撑开，影响与父元素同级的元素

2）与浮动元素同级的非浮动元素（内联元素）会跟随其后

3）若非第一个元素浮动，则该元素以前的元素也须要浮动，不然会影响页面显示的结构

十二、DOM操做

添加、移除、替换、插入

appendChild() removeChild() replaceChild()

insertBefore() //并无insertAfter()

1三、html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

HTML5 如今已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增长。拖拽释放(Drag and drop) API 语义化更好的内容标签（header,nav,footer,aside,article,section）音频、视频API(audio,video) 画布(Canvas) API 地理(Geolocation) API 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失； sessionStorage 的数据在浏览器关闭后自动删除表单控件，calendar、date、time、email、url、search

新的技术webworker, websocket, Geolocation

1四、对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？

前端是最贴近用户的程序员，比后端、数据库、产品经理、运营、安全都近。
一、实现界面交互二、提高用户体验三、有了Node.js，前端能够实现服务端的一些事情

前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好，

参与项目，快速高质量完成实现效果图，精确到1px；与团队成员，UI设计，产品经理的沟通；作好的页面结构，页面重构和用户体验；处理hack，兼容、写出优美的代码格式；

针对服务器的优化、拥抱最新前端技术。

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

分为4个步骤：（1），当发送一个URL请求时，无论这个URL是Web页面的URL仍是Web页面上每一个资源的URL，浏览器都会开启一个线程来处理这个请求，同时在远程DNS服务器上启动一个DNS查询。这能使浏览器得到请求对应的IP地址。（2），浏览器与远程`Web`服务器经过`TCP`三次握手协商来创建一个`TCP/IP`链接。该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在浏览器和服务器之间传递。该握手首先由客户端尝试创建起通讯，然后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。（3），一旦`TCP/IP`链接创建，浏览器会经过该链接向远程服务器发送`HTTP`的`GET`请求。远程服务器找到资源并使用HTTP响应返回该资源，值为200的HTTP响应状态表示一个正确的响应。

（4），此时，`Web`服务器提供资源服务，客户端开始下载资源。

1六、建立ajax的过程

(1)建立`XMLHttpRequest`对象,也就是建立一个异步调用对象.

(2)建立一个新的`HTTP`请求,并指定该`HTTP`请求的方法、`URL`及验证信息.

(3)设置响应`HTTP`请求状态变化的函数.

(4)发送`HTTP`请求.

(5)获取异步调用返回的数据.

(6)使用JavaScript和DOM实现局部刷新.

1七、GET和POST的区别，什么时候使用POST？

GET：通常用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，通常在2000个字符

POST：通常用于修改服务器上的资源，对所发送的信息没有限制。

GET方式须要使用Request.QueryString来取得变量的值，而POST方式经过Request.Form来获取变量的值，

也就是说Get是经过地址栏来传值，而Post是经过提交表单来传值。

然而，在如下状况中，请使用 POST 请求：没法使用缓存文件（更新服务器上的文件或数据库）向服务器发送大量数据（POST 没有数据量限制）

发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

1八、什么样的前端代码是好的

高复用低耦合，这样文件小，好维护，并且好扩展

1九、px和em的区别

px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，而且em会继承父级元素的字体大小。

浏览器的默认字体高都是16px。因此未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em

20、请描述下cookies，sessionStorage和localStorage的区别

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问而且当会话结束后数据也随之销毁。所以sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，不然数据是永远不会过时的。

web storage和cookie的区别

Web Storage的概念和cookie类似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，而且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还须要指定做用域，不能够跨域调用。

除此以外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie须要前端开发者本身封装setCookie，getCookie。可是Cookie也是不能够或缺的：Cookie的做用是与服务器进行交互，做为HTTP规范的一部分而存在，而Web Storage仅仅是为了在本地“存储”数据而生。

2一、介绍JavaScript的基本数据类型

Undefined、Null、Boolean、Number、String

2二、谈谈This对象的理解。

this的指向

this表示当前对象，this的指向是根据调用的上下文来决定的，默认指向window对象，指向window对象时能够省略不写.

用于区分全局变量和局部变量，须要使用this

eval是作什么的？

eval()的做用把字符串参数解析成JS代码并运行，并返回执行的结果；

应该避免使用eval，不安全，很是耗性能（2次，一次解析成js语句，一次执行）

由JSON字符串转换为JSON对象的时候能够用eval

2三、你知道jquery中的选择器吗，请讲一下有哪些选择器？

答：选择器大体分为:基本选择器，层次选择器，过滤选择器，表单选择器

2四、常见的状态码

    100 Continue 继续，通常在发送post请求时，已发送了http header以后服务端将返回此信息，表示确认，以后发送具体参数信息
    200 OK 正常返回信息
    201 Created 请求成功而且服务器建立了新的资源
    202 Accepted 服务器已接受请求，但还没有处理
   301 Moved Permanently 请求的网页已永久移动到新位置。
   302 Found 临时性重定向。
   303 See Other 临时性重定向，且老是使用 GET 请求新的 URI。
   304 Not Modified 自从上次请求后，请求的网页未修改过。
   400 Bad Request 服务器没法理解请求的格式，客户端不该当尝试再次使用相同的内容发起请求。
   401 Unauthorized 请求未受权。
   403 Forbidden 禁止访问。
   404 Not Found 找不到如何与 URI 相匹配的资源。
   500 Internal Server Error 最多见的服务器端错误。
   503 Service Unavailable 服务器端暂时没法处理请求（多是过载或维护）。

2五、浏览器的内核分别是什么?

IE: trident内核
Firefox：gecko内核
Safari：webkit内核
Opera：之前是presto内核，Opera现已改用Google Chrome的Blink内核
Chrome：Blink(基于webkit，Google与Opera Software共同开发)

2六、如何消除一个数组里面重复的元素？

// 方法一：
var arr1 =[1,2,2,2,3,3,3,4,5,6],
    arr2 = [];
for(var i = 0,len = arr1.length; i< len; i++){
    if(arr2.indexOf(arr1[i]) < 0){
        arr2.push(arr1[i]);
    }
}
document.write(arr2); // 1,2,3,4,5,6