一些基础的前端技术面试问题

一些基础的前端技术面试问题

说说你对闭包的理解

使用闭包主要是为了设计私有的方法和变量。闭包的优势是能够避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易形成内存泄露。

内存泄露：内存空间使用完毕以后未回收；

闭包有三个特性：

1.函数嵌套函数 2.函数内部可使用外部的参数和变量 3.参数和变量不会被垃圾回收机制回收

请你谈谈Cookie的弊端

cookie虽然在持久保存客户端数据提供了方便，分担了服务器存储的负担，但仍是有不少局限性的。 第一：每一个特定的域名下最多生成20个cookie

1.IE6或更低版本最多20个cookie
2.IE7和以后的版本最后能够有50个cookie。
3.Firefox最多50个cookie
4.chrome和Safari没有作硬性限制

优势：极高的扩展性和可用性

1.经过良好的编程，控制保存在cookie中的session对象的大小。
2.经过加密和安全传输技术（SSL），减小cookie被破解的可能性。
3.只在cookie中存放不敏感数据，即便被盗也不会有重大损失。
4.控制cookie的生命期，使之不会永远有效。偷盗者极可能拿到一个过时的cookie。

缺点：

1.`Cookie`数量和长度的限制。每一个domain最多只能有20条cookie，每一个cookie长度不能超过4KB，不然会被截掉。

2.安全性问题。若是cookie被人拦截了，那人就能够取得全部的session信息。即便加密也与事无补，由于拦截者并不须要知道cookie的意义，他只要原样转发cookie就能够达到目的了。

3.有些状态不可能保存在客户端。例如，为了防止重复提交表单，咱们须要在服务器端保存一个计数器。若是咱们把这个计数器保存在客户端，那么它起不到任何做用。

浏览器本地存储

在较高版本的浏览器中，js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage来取代globalStorage。

html5中的Web Storage包括了两种存储方式：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仅仅是为了在本地“存储”数据而生。

cookie 和session 的区别：

一、cookie数据存放在客户的浏览器上，session数据放在服务器上。
 二、cookie不是很安全，别人能够分析存放在本地的COOKIE并进行COOKIE欺骗
    考虑到安全应当使用session。
 三、session会在必定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能
     考虑到减轻服务器性能方面，应当使用COOKIE。
 四、单个cookie保存的数据不能超过4K，不少浏览器都限制一个站点最多保存20个cookie。
 五、因此我的建议：
    将登录信息等重要信息存放为SESSION
    其余信息若是须要保留，能够放在COOKIE中

CSS 相关问题

display:none和visibility:hidden的区别？

display:none  隐藏对应的元素，在文档布局中再也不给它分配空间。

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

CSS中 link 和@import 的区别是？

(1) link属于HTML标签，而@import是CSS提供的; 
(2) 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
(3) import只在IE5以上才能识别，而link是HTML标签，无兼容问题; 
(4) link方式的样式的权重 高于@import的权重.

 

CSS 选择符有哪些？哪些属性能够继承？优先级算法如何计算？ CSS3新增伪类有那些？

1.id选择器（ # myid）
2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）
5.子选择器（ul > li）
6.后代选择器（li a）
7.通配符选择器（ * ）
8.属性选择器（a[rel = "external"]）
9.伪类选择器（a: hover, li:nth-child）

• 可继承的样式： font-size font-family color, text-indent;

• 不可继承的样式：border padding margin width height ;

• 优先级就近原则，同权重状况下样式定义最近者为准;

• 载入样式以最后载入的定位为准;

 

CSS3新增伪类举例：

p:first-of-type 选择属于其父元素的首个 <p> 元素的每一个 <p> 元素。
p:last-of-type  选择属于其父元素的最后 <p> 元素的每一个 <p> 元素。
p:only-of-type  选择属于其父元素惟一的 <p> 元素的每一个 <p> 元素。
p:only-child    选择属于其父元素的惟一子元素的每一个 <p> 元素。
p:nth-child(2)  选择属于其父元素的第二个子元素的每一个 <p> 元素。
:enabled  :disabled 控制表单控件的禁用状态。
:checked        单选框或复选框被选中。
</p></p></p></p></p></p></p></p>

position的值， relative和absolute分别是相对于谁进行定位的？

absolute 
        生成绝对定位的元素， 相对于最近一级的 定位不是 static 的父元素来进行定位。

fixed （老IE不支持）
    生成绝对定位的元素，相对于浏览器窗口进行定位。 

relative 
    生成相对定位的元素，相对于其在普通流中的位置进行定位。 

static  默认值。没有定位，元素出如今正常的流中

CSS3有哪些新特性？

CSS3实现圆角（border-radius），阴影（box-shadow），
对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜
增长了更多的CSS选择器  多背景 rgba 
媒体查询，多栏布局
border-image

XML和JSON的区别？

(1).数据体积方面。
JSON相对于XML来说，数据的体积小，传递的速度更快些。
(2).数据交互方面。
JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互。
(3).数据描述方面。
JSON对数据的描述性比XML较差。
(4).传输速度方面。
JSON的速度要远远快于XML。

 

解释CSS sprites

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position能够用数字能精确的定位出背景图片的位置。

　　优势

　　　　1.利用CSS Sprites能很好地减小网页的http请求，从而大大的提升页面的性能，这也是CSS Sprites最大的优势，也是其被普遍传播和应用的主要缘由；

　　　　2.CSS Sprites能减小图片的字节，曾经比较过屡次3张图片合并成1张图片的字节老是小于这3张图片的字节总和。

　　　　3.解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就能够了，不须要对每个小元素进行命名，从而提升了网页的制做效率。

　　　　4.更换风格方便，只须要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就能够改变。维护起来更加方便。

　　缺点

　　　　1.在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现没必要要的背景；这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片若是不够宽，很容易出现背景断裂；

　　　　2.CSS Sprites在开发的时候比较麻烦，你要经过 photoshop或其余工具测量计算每个背景单元的精确位置，这是针线活，没什么难度，可是很繁琐；

　　　　3.CSS Sprites在维护的时候比较麻烦，若是 页面背景有少量改动，通常就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的css，若是在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增长了，还要改动css。

html部分

 

Doctype做用? 严格模式与混杂模式如何区分？它们有何意义?

（1）、<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签以前。告知浏览器以何种模式来渲染文档。 

（2）、严格模式的排版和 JS 运做模式是  以该浏览器支持的最高标准运行。

（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点没法工做。

（4）、DOCTYPE不存在或格式不正确会致使文档以混杂模式呈现。

　你知道多少种Doctype文档类型？

该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
 HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。
 XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。
 Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。

常见兼容性问题？

* png24位的图片在iE6浏览器上出现背景，解决方案是作成PNG8.也能够引用一段脚本处理.

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

* IE6双边距bug:块属性标签float后，又有横行的margin状况下，在ie6显示margin比设置的大。 

* 浮动ie产生的双倍距离（IE6双边距问题：在IE6下，若是对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。）
  #box{ float:left; width:10px; margin:0 0 0 10px;} 

 这种状况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)

*  渐进识别的方式，从整体中逐渐排除局部。 

  首先，巧妙的使用“\9”这一标记，将IE游览器从全部状况中分离出来。 
  接着，再次使用“+”将IE8和IE七、IE6分离开来，这样IE8已经独立识别。

  css
      .bb{
       background-color:#f1ee18;/*全部识别*/
      .background-color:#00deff\9; /*IE六、七、8识别*/
      +background-color:#a200ff;/*IE六、7识别*/
      _background-color:#1e0bd1;/*IE6识别*/ 
      } 

*  IE下,可使用获取常规属性的方法来获取自定义属性,
   解决方法:统一经过getAttribute()获取自定义属性.


* Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 
  可经过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.

* 超连接访问事后hover样式就不出现了 被点击访问过的超连接样式不在具备hover和active了解决方法是改变CSS属性的排列顺序:
L-V-H-A :  a:link {} a:visited {} a:hover {} a:active {}

* 怪异模式问题：漏写DTD声明，Firefox仍然会按照标准模式来解析网页，但在IE中会触发怪异模式。为避免怪异模式给咱们带来没必要要的麻烦，最好养成书写DTD声明的好习惯。如今可使用[html5](http://www.w3.org/TR/html5/single-page.html)推荐的写法：`<doctype html="">`

* 上下margin重合问题
  ie和ff都存在，相邻的两个div的margin-left和margin-right不会重合，可是margin-top和margin-bottom却会发生重合。
  解决方法，养成良好的代码编写习惯，同时采用margin-top或者同时采用margin-bottom。

解释下浮动和它的工做原理？清除浮动的技巧

浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

1.使用空标签清除浮动。
   这种方法是在全部浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增长了无心义标签。
2.使用overflow。
   给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。
3.使用after伪对象清除浮动。
   使用中需注意如下几点。1、该方法中必须为须要清除浮动元素的伪对象中设置 height:0，不然该元素会比实际高出若干像素；

浮动元素引发的问题和解决办法？

浮动元素引发的问题：

（1）父元素的高度没法被撑开，影响与父元素同级的元素
（2）与浮动元素同级的非浮动元素（内联元素）会跟随其后
（3）若第一个元素浮动，则该元素以后的元素也须要浮动，不然会影响页面显示的结构

解决方法： 使用CSS中的clear:both;给父元素添加clearfix样式：

.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}

清除浮动的几种方法：

1，额外标签法，<div style="clear:both;"/>（缺点：不过这个办法会增长额外的标签使HTML结构看起来不够简洁。）
2，使用after伪类

#parent:after{
    content:".";
    height:0;
    visibility:hidden;
    display:block;
    clear:both;
    }

3,设置`overflow`为`hidden`或者auto

 

DOM操做——怎样添加、移除、移动、复制、建立和查找节点。

（1）建立新节点

      createDocumentFragment()    //建立一个DOM片断

      createElement()   //建立一个具体的元素

      createTextNode()   //建立一个文本节点

（2）添加、移除、替换、插入

      appendChild()

      removeChild()

      replaceChild()

      insertBefore() //在已有的子节点前插入一个新的子节点

（3）查找

      getElementsByTagName()    //经过标签名称

      getElementsByName()   
      getElementById()    //经过元素Id，惟一性

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

* 移除的元素

纯表现的元素：basefont，big，center，font, s，strike，tt，u；

对可用性产生负面影响的元素：frame，frameset，noframes；

支持HTML5新标签：

* 固然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
   <!--[if lt IE 9]> 
   <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> 
   <![endif]--> 
如何区分： DOCTYPE声明\新增的结构元素\功能元素

iframe的优缺点？

1.`<iframe>`优势：
    解决加载缓慢的第三方内容如图标和广告等的加载问题
    Security sandbox
    并行加载脚本
2.`<iframe>`的缺点：
    *iframe会阻塞主页面的Onload事件；
    *即时内容为空，加载也须要时间
    *没有语意 
</iframe></iframe>

 

线程与进程的区别

一个程序至少有一个进程,一个进程至少有一个线程. 
线程的划分尺度小于进程，使得多线程程序的并发性高。 
另外，进程在执行过程当中拥有独立的内存单元，而多个线程共享内存，从而极大地提升了程序的运行效率。 
线程在执行过程当中与进程仍是有区别的。每一个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。可是线程不可以独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。 
从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分能够同时执行。但操做系统并无将多个线程看作多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。

 

null和undefined的区别？

null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。

当声明的变量还未被初始化时，变量的默认值为undefined。 null用来表示还没有存在的对象，经常使用来表示函数企图返回一个不存在的对象。

undefined表示"缺乏值"，就是此处应该有一个值，可是尚未定义。典型用法是：

（1）变量被声明了，但没有赋值时，就等于undefined。

（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。

（3）对象没有赋值的属性，该属性的值为undefined。

（4）函数没有返回值时，默认返回undefined。

null表示"没有对象"，即该处不该该有值。典型用法是：

（1） 做为函数的参数，表示该函数的参数不是对象。

（2） 做为对象原型链的终点。

new操做符具体干了什么呢?

一、建立一个空对象，而且 this 变量引用该对象，同时还继承了该函数的原型。
   二、属性和方法被加入到 this 引用的对象中。
   三、新建立的对象由 this 所引用，而且最后隐式的返回 this 。

js延迟加载的方式有哪些？

defer和async、动态建立DOM方式（建立script，插入到DOM中，加载完毕后callBack）、按需异步载入js

documen.write和 innerHTML的区别

document.write只能重绘整个页面

innerHTML能够重绘页面的一部分

 

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

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


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

 参与项目，快速高质量完成实现效果图，精确到1px；

 与团队成员，UI设计，产品经理的沟通；

 作好的页面结构，页面重构和用户体验；

 处理hack，兼容、写出优美的代码格式；

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

你有哪些性能优化的方法？

（1） 减小http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。

  （2） 前端模板 JS+数据，减小因为HTML标签致使的带宽浪费，前端用变量保存AJAX请求结果，每次操做本地变量，不用请求，减小请求次数

  （3） 用innerHTML代替DOM操做，减小DOM操做次数，优化javascript性能。

  （4） 当须要设置的样式不少时设置className而不是直接操做style。

  （5） 少用全局变量、缓存DOM节点查找的结果。

  （6） 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。

  （7） 图片预加载，将样式表放在顶部，将脚本放在底部。

一个页面从输入 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

平时如何管理你的项目？

先期团队必须肯定好全局样式（global.css），编码模式(utf-8) 等；

        编写习惯必须一致（例如都是采用继承式的写法，单样式都写成一行）；

        标注样式编写，各模块都及时标注（标注关键样式调用的地方）；

        CSS跟HTML 分文件夹并行存放，命名都得统一（例如style.css）；

        JS 分文件夹存放 命名以该JS功能为准的英文翻译。

        图片采用整合的 images.png格式 尽可能整合在一块儿使用方便未来的管理

 

javascript对象的几种建立方式

1，工厂模式
2，构造函数模式
3，原型模式
4，构造函数和原型混合模式
5，动态原型模式
6，寄生构造函数模式
7，稳妥构造函数模式混合

javascript继承的6种方法

1，原型链继承
2，借用构造函数继承
3，组合继承(原型+借用构造)
4，原型式继承
5，寄生式继承
6，寄生组合式继承

ajax过程

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

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

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

(4)发送HTTP请求.

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

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

 

异步加载和延迟加载

异步:
　　1.异步加载的方案： 动态插入script标签
　　2.经过ajax去获取js代码，而后经过eval执行
　　3.script标签上添加defer或者async属性
　　4.建立并插入iframe，让它异步执行js
延迟：
　　5.延迟加载：有些 js 代码并非页面初始化的时候就马上须要的，而稍后的某些状况才须要的。

前端安全问题？

sql注入原理

就是经过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器，执行恶意的SQL命令。

总的来讲有如下几点：

1.永远不要信任用户的输入，要对用户的输入进行校验，能够经过正则表达式，或限制长度，对单引号和双"-"进行转换等。
2.永远不要使用动态拼装SQL，可使用参数化的SQL或者直接使用存储过程进行数据查询存取。
3.永远不要使用管理员权限的数据库链接，为每一个应用使用单独的权限有限的数据库链接。
4.不要把机密信息明文存放，请加密或者hash掉密码和敏感的信息。

XSS原理及防范

Xss(cross-site scripting)攻击指的是攻击者往Web页面里插入恶意html标签或者javascript代码。好比：攻击者在论坛中放一个 看似安全的连接，骗取用户点击后，窃取cookie中的用户私密信息；或者攻击者在论坛中加一个恶意表单， 当用户提交表单的时候，却把信息传送到攻击者的服务器中，而不是用户本来觉得的信任站点。

XSS防范方法

1.代码里对用户输入的地方和变量都须要仔细检查长度和对”<”,”>”,”;”,”’”</”,”>等字符作过滤；其次任何内容写到页面以前都必须加以encode，避免不当心把html tag 弄出来。这一个层面作好，至少能够堵住超过一半的XSS 攻击。
2.避免直接在cookie 中泄露用户隐私，例如email、密码等等。

3.经过使cookie 和系统ip 绑定来下降cookie 泄露后的危险。这样攻击者获得的cookie 没有实际价值，不可能拿来重放。
4.尽可能采用POST 而非GET 提交表单

XSS与CSRF有什么区别吗？

XSS是获取信息，不须要提早知道其余用户页面的代码和数据包。CSRF是代替用户完成指定的动做，须要知道其余用户页面的代码和数据包。

要完成一次CSRF攻击，受害者必须依次完成两个步骤：

　　1.登陆受信任网站A，并在本地生成Cookie。 　　2.在不登出A的状况下，访问危险网站B。

CSRF的防护

1.服务端的CSRF方式方法不少样，但总的思想都是一致的，就是在客户端页面增长伪随机数。 2.使用验证码

请解释一下 JavaScript 的同源策略。

概念:同源策略是客户端脚本（尤为是Javascript）的重要的安全度量标准。它最先出自Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不一样源装载。

这里的同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议。 指一段脚本只能读取来自同一来源的窗口和文档的属性。

为何要有同源限制？

咱们举例说明：好比一个黑客程序，他利用Iframe把真正的银行登陆页面嵌到他的页面上，当你使用真实的用户名，密码登陆时，他的页面就能够经过Javascript读取到你的表单中input中的内容，这样用户名，密码就轻松到手了。

什么是 "use strict"; ? 使用它的好处和坏处分别是什么？

ECMAscript 5添加了第二种运行模式："严格模式"（strict mode）。顾名思义，这种模式使得Javascript在更严格的条件下运行。

设立"严格模式"的目的，主要有如下几个：

- 消除Javascript语法的一些不合理、不严谨之处，减小一些怪异行为;
- 消除代码运行的一些不安全之处，保证代码运行的安全；
- 提升编译器效率，增长运行速度；
- 为将来新版本的Javascript作好铺垫。

注：通过测试IE6,7,8,9均不支持严格模式。

缺点： 如今网站的JS 都会进行压缩，一些文件用了严格模式，而另外一些没有。这时这些原本是严格模式的文件，被 merge 后，这个串就到了文件的中间，不只没有指示严格模式，反而在压缩后浪费了字节。