前端面试题干货总结（一）

1.什么是模块化开发？

模块化开发就是Js文件按照不同功能分离在不同文件中，按照不同需求加载引入

NodeJs中的模块：通常就是一个js或Json文件

angularjs中的模块：一系列配置和代码块的集合

react中的模块：将Js，html，css融合在一起具有某个功能的代码块

模块化开发的好处：高内聚低耦合，代码易于重用，后期易于维护

2.刚开始先要提到commonjs规范，nodejs就是根据commonjs规范编写的，

commonjs的模块输出：module.exports;文件导入：require()

但是commonjs是服务于服务器端的规范，它是同步加载的，放在浏览器端问题很大，

容易让用户因为网速问题加载文件慢而体验差

AMD和CMD解决的问题都是浏览器端的模块化开发，这有两个问题：

（1）多个js文件可能有依赖关系，被依赖的文件要在依赖文件之前被加载

（2）js加载的时候浏览器页面会停止渲染，文件加载越多，等待时间越长

为了能让模块文件能够异步加载，出现了AMD规范（异步模块定义），

AMD是在推广Requirejs过程中对模块定义的产出。

Requirejs的核心原理是用require(依赖文件数组，回调函数)，采用异步方式加载模块，

模块的加载不影响它后面语句的执行；所有

依赖这个模块的语句，都定义在回调函数中，等待模块加载完成后执行；

与此同时：浏览器端模块化开发的另一种CMD（通用模块定义），

CMD是在推广sea.js过程中对模块定义的产出。

AMD和CMD的区别：

共同点：都是为了浏览器端的模块化开发

不同点：

（1）AMD推崇依赖前置，CMD推崇就近依赖

（2）对于依赖的模块：AMD是提前执行，CMD是延迟执行

AMD和CMD最大的区别是对依赖模块的执行时机不同！（注意不是加载时机或方式不同！）

两者都是异步加载模块，只不过AMD依赖前置，用户体验好！而CMD就近依赖，

用到哪个才require哪个，性能好了但是体验差了

AMD加载完模块后立即执行，且模块顺序不确定，但主逻辑一定在所有依赖加载完成后才执行

CMD加载完模块后不执行，遇到require才会执行！

-------------------------------------------------------------------------------------------

3.cookie和session的区别

session的运行依赖sessionID，但sessionID是在cookie中的

(1)cookie数据存放在用户本地，而session数据存放在服务器（

服务器自动生成session id来标示该数据）

（2）cookie数据不安全，容易被恶意使用，安全敏感的信息由session存储

（3）cookie数据大小有限制，不能超过4K

应用场景：免登陆cookie，购物车确认用户：session（http是无状态协议，

用户操作购物车服务器是无法判断谁操作的，这时候就需要session

来标示用户，而session又需要用session ID来标示，这就需要cookie了，

第一次创建session的时候，服务器端就会Http协议里告诉客户端

需要在cookie里记录一下sessionId，这样以后都能通过sessionID判断是谁了）

--如果用户禁用了cookie,就需要用url重写的技术了，即在

url问号后携带上id信息！

4.cookie和localStorage，sessionStorage的区别

共同点：都是同源的

不同点：

（1）存储大小不同：cookie的大小有限制，不得超过4K，而后两者要大很多

（2）数据有效期不同：cookie数据在过期时间之前都有效，localStorage数据永久有效，

sessionStorage数据在关闭浏览器页面时就失效

（3）作用域不同：cookie和localStorage在同源页面（不同标签页）之间是共享数据的

，而sessionStorage数据无法共享

（4）cookie数据始终在http请求中携带，即使不需要也会携带，浪费带宽

-------------------------------------------------------------------------------------------

5.icon-font字体图标的优缺点：

优点：（1）矢量图，无损缩放（2）体积小，与图片相比没有http请求，性能好

（3）css样式可修改

缺点：（1）不能完全符合设计稿（2）后期若改动成本太高

阿里巴巴矢量图库

利用icoMoon或者gulp也可以自动生成svg雪碧图，会生成svg文件，然后下载到电脑中，

修改svg文件里的fill属性就可改变图标颜色

svg文件的代码里有x和y属性，这就是background-position

6.rem移动端适配

rem是一个相对单位，相对于根元素的字体大小，em也是一个相对单位，

相对于父元素的字体大小

一般来说可以js进行rem适配，也可以css媒体查询动态控制html字体的fontSize

function rem(){

var width=window.innerWidth;

document.getElementsByTagName('html')[0].style.fontSize=width*(100/设计图宽度)+'px';

}

window.οnresize=rem;

css设置5rem，相当于500px

7.websocket

webscoket是h5的一种新的协议，它允许服务器端“主动”向客户端发送信息，

实现了客户端和服务器端双工通讯。

它弥补了http不支持长连接的缺点！所以它只需要一次客户端和服务器端的握手，

然后两者就可以互相通讯

websocket如何兼容低浏览器？

（1）Adobe flash socket

(2)基于长轮询的XHR

8、HTML5的离线储存怎么使用，工作原理能不能解释一下？

在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，

更新用户机器上的缓存文件。

原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，

通过这个文件上的离线存储资源清单解析，

这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，

浏览器会通过被离线存储的数据进行页面展示。

如何使用：

（1）页面头部像下面一样加入一个manifest的属性；

（2）在cache.manifest文件的编写离线存储的资源；

CACHEMANIFEST

#v0.11

CACHE:

js/app.js

css/style.css

NETWORK:

resourse/logo.png

FALLBACK:

//offline.html

（3）在离线状态时，操作window.applicationCache进行需求实现。

9、浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？

在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，

如果是第一次访问app，

那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。

如果已经访问过app并且资源已经离线存储了，

那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与

旧的manifest文件，

如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件

中的资源并进行离线存储。

离线的情况下，浏览器就直接使用离线存储的资源。

10.iframe有什么缺点，怎么解决？

（1）会影响主页面的onload事件

（2）搜索引擎检索程序无法解读这种页面，不利于SEO；

（3）即使内容为空，加载也需要时间

解决方法：使用javascript动态创建iframe的src属性

11.label的作用是什么？怎么用的？

用来定义表单控件之间的关系，可自动获得焦点

< label >aaa < input type = ' checkbox ' ></ label >

12.如何用css将一张图片变为灰色，且将点击事件禁用,且鼠标为手指状

{

opacity:0.6;

pointer-events:none;

cursor:pointer;

}

13.页面可见性（Page Visibility）API有什么用处？

（1）通过VisibilityState的值来判断页面是否可见

（2）可以用于控制页面视频音频在离开页面时暂停，重回页面时开始

（3）可以计算在线时长

14.如何实现页面上一个圆形？

（1）

注意图片热区需要Img标签（包含src+usemap），map标签（包含name+id属性），

area标签（包含shape+coords+href+alt属性）

< img src = " 1.jpg " alt = " 图片热区 " usemap = ' li1 ' >

< map name = " li1 " id = ' li1 ' >

< area shape = " circle " coords = " 100,200,200 " href = "" alt = " 圆形 " >

< area shape = " rect " coords = " 50,50,100,100 " href = "" alt = " 四边形 " >

< area shape = " poly " coords = " 10,20,30,0,40,0,30,50 " href = "" alt = " 多边形 " >

</ map >

(2)svg

(3)border-radius:50%;

15.new操作符都干了什么？

（1）创建一个空对象，并用this引用该对象，继承了该函数的原型

（2）给this添加属性和方法

（3）隐式返回this

由代码来表示：

var obj={};

obj.__proto__=Obj.prototype;

Obj.call(obj);

16.什么是内存泄露？怎么会导致内存泄露？

（1）内存泄露指任何对象在不再需要或拥有后依然存在

简述垃圾回收机制--浏览器垃圾回收机制会定期检查每个对象的引用次数，

如果该对象引用次数为0，或者唯一引用是循环的，则回收该变量

导致内存泄露的原因：

（1）闭包

（2）两个对象互相引用时

（3）setTimeout第一个参数使用字符串而不是函数的时候

17.web应用有哪些从服务器端主动向客户端发送数据的方式？

（1）websocket协议

（2）SSE，服务器推送数据新方式

（3）Commet,基于http长连接的服务器推送技术

18.一个页面从输入 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服务器提供资源服务，客户端开始下载资源。

请求返回后，便进入了我们关注的前端模块；

简单来说，浏览器会解析HTML生成DOM Tree，其次会根据CSS生成CSS Rule Tree，

而javascript又可以根据DOM API操作DOM；

19.异步加载和延迟加载

1，异步加载的方案： 动态插入script标签；

2，通过ajax去获取js代码，然后通过eval执行；

3，script标签上添加defer或者async属性；

4，创建并插入iframe，让它异步执行js；

5，延迟加载：有些 js 代码并不是页面初始化的时候就立刻需要的，而稍后的某些情况才

需要的。