上海银联前端面试题

3月份参加了上海银联的web前端工程师岗位的面试，个人觉得面试题问的很全面。所以在这里分享一下。

1.如何解决IE浏览器兼容问题？CSS hack写法？

一、CSS常见问题

1、H5标签兼容性

　　解决方案：<script src="http://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

2、元素浮动之后，能设置宽度的话就给元素加宽度，如果需要宽度是内容撑开的，就给它里边的块元素加上浮动float:left;

3、第一块元素浮动，第二块元素加margin-left值等于第一块元素宽度，在IE6下会有间隙问题

　　解决方案：不要用margin-left，给两个元素都加上浮动float:left;

4、IE6下子元素超出父级宽高，会把父级宽高撑开，比如用于放置轮播的ul宽度会超出父元素

　　解决方案：不要让子元素的宽高超过父级

5、P包含块元素嵌套规则

　　牢记规则：p、h标签不能嵌套块元素

二、CSS兼容性问题

1、margin兼容性问题

　　1）margin-top传递，子元素上下margin会传递给父级

　　阻止：触发BFC（如overflow:hidden;拯救标准浏览器及IE78）、触发IE的haslayout  zoom:1（拯救IE67）;

　　2）上下margin叠压（触发条件：同级元素，第一个元素的下与第二个元素的上会叠压在一起）

　　解决方案：两个元素分开设置margin，然后尽量使用同一方向的margin，比如margin-top

2、display:inline-block; 　　块元素变为内联块， IE67不兼容；内联元素变为内联块，所有浏览器都支持

　　解决方案：{display:inline-block; *display:inline; *zoom:1;}

　　发现问题：当然，变为内联块后，有一个特性就是如果元素换行，在页面上元素之间就会有空隙的，空隙大小为一个空格的像素大小。

3、IE6元素最小高度为19px

　　解决方案：overflow:hidden;

4、IE67双边距，当元素浮动后，再设置margin，那么就会产生双倍边距

　　解决方案：针对IE67，添加*display:inline;样式，比如页面上横向排列的几组块，会经常遇到

5、li里元素都浮动，在IE67下方会产生4px间隙问题

　　解决方案：针对IE67，添加*vertical-align:top;样式

6、IE6下，两个浮动元素之间有注释或者内联元素并且和父级宽度相差不超过3px，会导致多复制一些文字问题

　　解决方案：1）两个浮动元素之间避免出现内联元素或者注释

　　　　　　　2）与父级宽度相差3px或以上　　

7、IE67父级元素的overflow:hidden;子元素设置position:relative后，就包不住子元素了

 　　解决方案：针对IE67，给父级元素添加position:relative;

8、IE6下绝对定位元素父级宽高是奇数，绝对定位元素的right和bottom值会有1px的偏差

 　　解决方案：避免父级宽度出现奇数

9、IE6下绝对定位元素和浮动元素并列绝对定位元素消失

 　　解决方案：浮动元素和绝对定位元素时同级的话，定位元素就会消失，只要让它们两个不处于同级就可以避免这个bug了

10、IE6下input的空隙

 　　解决方案：针对IE67，给input元素添加*float:left;

11、IE6下输入类型表单控件背景问题，背景不固定，滚动了

　　解决方案：设置background-attachment:fixed;

12、line-height　　在IE67、FF下不兼容，会有几个像素的偏差，目测只有IE8和其他标准浏览器正常

　　IE6下，想给给图片设置line-height来达到垂直居中效果是实现不了的，就给img标签单独设置{float:left;postion:relative;top:...}

　　当然，文本的line-height还是识别的

13、常见文章列表布局：标题+发布日期　　

　　<ul>

　　　　<li>这里是文章列表标题，我是奇葩的IE浏览器<span style="float:right">2015-07-17</span></li>

　　　　<li>这里是文章列表标题2，我是奇葩的IE浏览器<span style="float:right">2015-07-17</span></li>

 　　</ul>

假设你按照以上布局，那么恭喜你，在IE67下发布日期会掉到下一行去

　　解决方案，按如下布局：　

　　<ul>

　　　　<li><span style="float:right">2015-07-17</span>这里是文章列表标题，我是奇葩的IE浏览器</li>

　　　　<li><span style="float:right">2015-07-17</span>这里是文章列表标题2，我是奇葩的IE浏览器</li>

 　　</ul>

或　

　　<ul>

　　　　<li><span style="float:left">这里是文章列表标题，我是奇葩的IE浏览器</span><span style="float:right">2015-07-17</span></li>

　　　　<li><span style="float:left">这里是文章列表标题2，我是奇葩的IE浏览器</span><span style="float:right">2015-07-17</span></li>

 　　</ul>

14、遮罩弹窗

　　标准 不透明度：opacity:0~1

　　IE678滤镜：filter:alpha(opacity=0~100);

15、<a>的手形光标

　　标准浏览器下，不需要设置也有

　　IE6下没有，就给a{cursor:pointer;}

16、<a>的 text-decoration:none;

　　标准下，只需 a {text-decoration:none;}

　　IE6下，a {text-decoration:none;}  并且 a:hover {text-decoration:none;}

三、CSS hack

\9　　 IE67  8-10　　 例如：background:blue\9;

+*　　IE67　　　　　 例如：*background:yellow;  +background:yellow;

_　　  IE6　　　　　　例如：_background:green;

首先需要知道的是：

所有浏览器 通用 height:
100px;  
IE6 专用 _height: 100px;  
IE7 专用 *+height: 100px;  
IE6、IE7 共用 *height:
100px;  
IE7、FF 共用 height: 100px
!important;
例如：
#example { height:100px; } /*FF */
* html #example {height:200px; } /* IE6 */
*+html #example {height:300px; } /* IE7 */
下面的这种方法比较简单
举几个例子：
1、IE6 - IE7+FF
#example {  
height:100px; /* FF+IE7 */  
_height:200px; /* IE6 */  
}  
其实这个用上面说的第一种方法也可以  
#example {  
height:100px !important; /* FF+IE7 */  
height:200px; /* IE6 */  
}
2、IE6+IE7 - FF
#example {  
height:100px; /* FF */  
*height:200px; /* IE6+IE7 */  
}
3、IE6+FF - IE7
#example {  
height:100px; /* IE6+FF */  
*+height:200px; /* IE7 */  
}
4、IE6 IE7 FF 各不相同
#example {  
height:100px; /* FF */  
_height:200px; /* IE6 */  
*+height:300px; /* IE7 */  
}  
或：  
#example {  
height:100px; /* FF */  
*height:300px; /* IE7 */  
_height:200px; /* IE6 */  
}

四、png-24兼容性问题，IE6不支持

解决方案：

　　1）引用Js插件，不能处理body以上的，最好放在页面底部，这样不影响页面加载，也就是放在</body>标签上面　　

　　　　<!--[if IE 6]>

　　　　　　<script src="DD_belatedPNG_0.0.8a.js" type="text/javascript"></script>

　　　　　　<script>

　　　　　　　　DD_belatedPNG.fix("*");

　　　　　　</script>

　　　　<![endif]-->

 

　　2）原生滤镜，给背景图所在的标签加上如下样式，比如body

　　　　body {

　　　　　　　　_background-image:none;

　　　　　　　　_filter:progid:DXImage Transform.Microsoft.AlphaImageLoader(src="XX.png",sizingMethod="crop");

　　　　　　　}

 2.弹性布局做过吗？怎么做的？

3.em,rem百分比布局做过吗？rem与px的差异性在哪里？

px 即像素，一般国内人使用较多,默认大小是16px;

pt 印刷行业常用单位

em  相对单位，相对父元素属性的单位 ，一般用于移动端布局

rem  结合相对定位和绝对定位的优势，相对根元素html，想要修改字体大小，只要修改html的大小就可以了

转换公式：

pt=px乘以3/4
倍数em=倍数x16px

注意：1em=16px。那么12px=0.75em,10px=0.625em。

1.em的用法

  在代码重写的过程中，为了简化font-size的换算，在body选择器中声明font-size=62.5%，这就使em值变为16px*62.5%=10px,这样      1  12px=1.2em,10px=1em,也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了.步骤如下：

  1).body选择器中声明Font-size=62.5%；
  2).将你的原来的px数值除以10，然后换上em作为单位；
   此时有的字体会大的出奇，因为em的值不固定，又会继承父级元素的大小，比如

[html] view plain copy

1. body{font-size=62.5%；}  ①  
2. div{font-size:1.2em；}   ②  
3. p{font-size:1.2em；}  ③  

          解释： 其中p属于div的子集，①的设置使得12px=1.2em,10px=1em,px和em成十倍关系；
           所以②的设置使得div字体大小为1.2em=12px;
           ③中p的大小设置是相对②中div字体来说的，所以p的字体大小是1.2*12px=14.4px;而不是十倍关系了；
  3).重新计算那些被放大的字体的em数值。避免字体大小的重复声明，也就是避免以上提到的，将③改为p{font-size:1em;}即可

2.rem的用法

   p1元素和p2元素的大小是一样的

[html] view plain copy

1. html{  
2.     font-size:62.5%; /* 10÷16=62.5% */     /*关键代码*/  
3. }  
4. body{  
5.     font-size:12px;  
6.     font-size:1.2rem ; /* 12÷10=1.2 */  <span style="font-family:'微软雅黑', '宋体';">/* 这两个效果一样*/</span>  
7. }  
8. #p1{  
9.     font-size:14px;  
10. }  

[html] view plain copy

1.   

[html] view plain copy

1. #p2{  
2.     font-size:14rem;  
3. }  

4.H5新增了哪些API？新标签增加了哪些？

1）新API

1：canvas，不用多说，可以画出很多绚丽的图形，甚至可以直接做出伪3D游戏。 
2：媒体控制，也很好理解(直译就是回放功能，假如只用html5.0以下的标签写，以前的音乐播放是不可能实现滚动条的。) 
3：离线网页程序，可以把资源文件完全缓存在客户端，并且通过js的一些方法清空缓存 
4：文档编辑，应该是更好的支持对文档的编辑。 
5：拖动，可以将文件拖动到某些区域上传 
6：跨文档请求，websocket，一种更加高效的通讯方式 
7：历史管理，可以通过js管理和插入历史记录 
8：MIME头自定义 
9：客户端数据存储，localstoage sessionstoage 
10：地理位置共享 
11：本地数据库 

12：索引数据库

2）新标签

1、简化的文档类型和字符集

（1）文档类型

<!DOCTYPE HTML>

　　之所以如此简单，是因为HTML5不再是SGML（ Standard Generalized Markup language，标准通用标记语言）的一部分，而是独立的标记语言，不需要再考虑文档类型

（2）字符集

<meta charset="UTF-8">

　　只需要utf-8即可

2、富有语义化的新结构元素

<header>
　　<h1>HTML5新结构<h1/>
　　<nav>导航部分</nav>
　　<p></p>

</header>

<section>
    <h1></h1>
    <p>不再全是div</p>
　　。。。
</section>
<footer>
　　
</footer>

　　section元素 可以认为div是section元素,一个普通的分块元素，可用来定义网站中的特定的可区别的区域

　　header元素包括标题，logo，导航和其他页眉的内容，可以在网站上加多个header，就像给内容加多个标题

　　hgroup元素 即将标题进行分组的元素

　　footer元素版权声明和作者信息,包涵一些链接

　　nav元素主要用于主导航菜单

　　article元素独立成文且以其他格式重用的内容应该置于一个article元素中

　　aside元素用途包涵内容周围的相关内容

3、新增的内联元素

　　

<figure>
    <p>图片</p>
    <img src="img1.jpg" width="100" height="100">
</figure>

　　figure元素一个典型用途是包含图像,代码和其他内容对主要内容进行说明，删除不会影响主内容

　　figcaption元素主要用于figure的标题

　　mark元素突出显示以表示引用的内容，或者突出显示与用户当前活动相关的内容，他不同于en或strong元素

　　time元素，当需要在内容中显示时间或者日期时，则建议使用time元素

　　time元素可以包涵两个属性，一个datetime表示在元素中指定的确切日期和世家，pubdate表示文章或者整个文档发布时time元素所指定的日期和时间

　　meter元素用于定义度量衡，规定最大最小宽高，通常要结合css一起作用，效果如下：

 

　　progress元素用于定义一个进度条，有max（完成值）和value（进度条当前值）两个属性。

 

4、支持动态页面

　　1）菜单<menu>

　　用于表单中组织控件列表，常用属性如下：

定义一个选择列表的例子：

<menu>
    <li><input type="checkbox"/>a</li>  
    <li><input type="checkbox"/>b</li> 
     <li><input type="checkbox"/>c</li> 

</menu>
<!--目前主流浏览器都不支持-->

　　2）右键菜单<menitem>

　

　　3）在<script>标签中使用async属性

　　用于指定异步执行的脚本

　　4）<detail>元素

　　用于描述文档或文档某个部分的细节

<details>
    <summary>details</summary>
    <p>用于描述文档细节<p>
</details>

　　效果：

　　

展开后：

　　

5、全新的表单设计

　　HTML5 新的 Input 类型

　　HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

• email
• url
• number
• range
• Date pickers (date, month, week, time, datetime, datetime-local)
• search
• color

　　HTML5 的新的表单元素：

• datalist
• keygen
• output

　　新的 form 属性：

• autocomplete
• novalidate

　　新的 input 属性：

• autocomplete
• autofocus
• form
• form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
• height 和 width
• list
• min, max 和 step
• multiple
• pattern (regexp)
• placeholder
• required

　　autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。
　　当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：
　　实例：

<form action="/example/html5/demo_form.asp" method="get" autocomplete="on">
First name:<input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>

<p>请填写并提交此表单，然后重载页面，来查看自动完成功能是如何工作的。</p>

 

结果：

6、强大的绘图功能和多媒体功能

　　1）canvas 可以动态地绘制各种效果精美的图形，结合js就能让网页图形动起来

　　2）SVG 绘制可伸缩的矢量图形

　　3）audio和 video 可以不依赖任何插件播放音频和视频

7、打造桌面应用的一系列新功能

　　离线缓存 Web Storage（为HTML5开发移动应用提供了基础）

　　传统的web应用程序中，数据处理都由服务器处理，html只负责展示数据，cookie只能存储少量的数据，跨域通信只能通过web服务器。

　　HTML5扩充了文件存储的能力，多达5MB，支持WebSQL等轻量级数据库，可以开发支持离线web应用程序。

　　HTML5 Web Storage API可以看做是加强版的cookie，不受数据大小限制，有更好的弹性以及架构，可以将数据写入到本机的ROM中，还可以在关闭浏览器后再次打开时恢复数据，以减少网络流量。

　　同时，这个功能算得上是另一个方向的后台“操作记录”，而不占用任何后台资源，减轻设备硬件压力，增加运行流畅性。

8、获取地理位置信息

　　新增Geolocation API，可以通过浏览器获取用户的地理位置，不再需要借助第三方地址数据库或专业的开发包，提供很大的方便。

9、支持多线程

　　新增Web Worker对象，可以在后台运行js脚本，也就是支持多线程，从而提高了页面加载效率。

10、废弃的标签

　　1.表现性元素

　　2.框架类元素

　　3.属性类

　　4.其他类

5. 离线缓存接触过没？manifest，localstorage和sessionstorage？

移动web和移动app一直都是在其各自的领域内，各司其职，井水不犯河水。web端只要有浏览器，便能看遍天下网站，但是完全离不开网络，app则强大到无所不能，但是用必须要下载。各有各的优势，各有各的局限，直到html5的出现，两者的界限不断被刷新，webapp开始被广泛使用。说到这里，不得不提到h5中推出的一个离线缓存的新特性，正是它，大大拉近了web与app的距离。废话不多说，开讲--manifest

一、如何使用

接触过h5和安卓的同学，应该都有一种感觉，h5就是在模仿app干的事，Android里面也有个小伙伴叫做manifest。离线缓存中最主要的就是这个xxx.manifest文件，我一般起名叫做cache.manifest，文件格式如下：

[html]  view plain  copy

1. CACHE MANIFEST  
2. #v1.2.0  
3.   
4. CACHE:  
5. bbs_detail_app.css  
6. bbs_detail_app.js  
7. zepto.js  
8.   
9. NETWORK:  
10. *  
11.   
12. FALLBACK:  
13. index.html offline.html  

文件必须以CACHE MANIFEST开头，接下来是记录的版本号，#v（version），至于版本号的格式似乎是没有特别的界定的，只要不同版本有区别即可。

接下来看到的是CACHE，表明以下的文件是会在客户端进行缓存的文件，且一行记录一个文件名，CACHE关键字可以去掉，除了最顶上两行manifest以及版本说明外，列在最上面的文件默认是缓存文件，NETWORK后的文件表示每次都需要从网络去取，若CACHE中定义的文件名与NETWORK中有重复的，则先在缓存中取，若缓存中没有，则从网络中取得。FALLBACK定义的文件是当index.html文件读取失败，则用offline.html代替。

HTML页面中的调用如下：

[html]  view plain  copy

1. <html manifest="cache.manifest">  

是不是觉得很厉害，

但是离线缓存更加适用于资源异步加载的静态页面，在离线缓存中，URL严格相同的页面才会被认为是同一个请求，缓存才会起效，

例如两个地址一致的url：url1：http://test.com/test.html?id=1；url2：http://test.com/test.html?id=2；

这两个其实并不是同一回事，当url1进行缓存后，访问url2时，不会使用请求url1时的缓存。因此，若使用此利器，最好页面静态化，保持页面请求url时一致，所有资源请求使用ajax进行异步请求。

另外，使用离线缓存还有一个优势，可以很大程度帮助我们解决浏览器端的缓存问题，只要manifest版本信息不变，永不更新，我们想要更新资源，只需要更新版本号即可，特别是在移动端缓存的清理一直是个问题，很有帮助。

二、缓存的更新机制

manifest离线缓存使用过程中会出现一点点问题，这里我们分析一下他的缓存加载以及更新机制。当用户第一次加载，浏览器会请求包括manifest在内的所有文件，并对manifest中的内容进行解析，该缓存的缓存。下次请求的时候，首先从缓存中取出manifest文件，里面记录需要缓存的文件会直接从缓存中读取出来，然后去网络请求网络中的manifest以及其他需要的文件，最后，会进行manifest的版本对比，若版本不变，则没啥变动，若manifest版本有所变化，那则会继续请求网络取出需要缓存的文件进行本地缓存的更新，但是此时，已经渲染的页面不会进行重新刷新，所以即使服务端更新manifest后，客户端刷新第一次其实取得还是上一次缓存的文件，第二次刷新才是服务端更新后的文件，这是离线缓存刷新机制所决定的，会有一点体验上的问题，但是这个问题我们可以用代码进行手动缓存的刷新解决，调用cache.update()进行缓存刷新，cache.swapCache()进行重新请求更新的资源进行渲染。

浅谈session,cookie,sessionStorage,localStorage的区别及应用场景

浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式，可以利用cookie,session等跟服务端进行数据交互。

一、cookie和session

cookie和session都是用来跟踪浏览器用户身份的会话方式。

区别：

1、保持状态：cookie保存在浏览器端，session保存在服务器端

2、使用方式：

（1）cookie机制：如果不在浏览器中设置过期时间，cookie被保存在内存中，生命周期随浏览器的关闭而结束，这种cookie简称会话cookie。如果在浏览器中设置了cookie的过期时间，cookie被保存在硬盘中，关闭浏览器后，cookie数据仍然存在，直到过期时间结束才消失。

     Cookie是服务器发给客户端的特殊信息，cookie是以文本的方式保存在客户端，每次请求时都带上它

（2）session机制：当服务器收到请求需要创建session对象时，首先会检查客户端请求中是否包含sessionid。如果有sessionid，服务器将根据该id返回对应session对象。如果客户端请求中没有sessionid，服务器会创建新的session对象，并把sessionid在本次响应中返回给客户端。通常使用cookie方式存储sessionid到客户端，在交互中浏览器按照规则将sessionid发送给服务器。如果用户禁用cookie，则要使用URL重写，可以通过response.encodeURL(url) 进行实现；API对encodeURL的结束为，当浏览器支持Cookie时，url不做任何处理；当浏览器不支持Cookie的时候，将会重写URL将SessionID拼接到访问地址后。

3、存储内容：cookie只能保存字符串类型，以文本的方式；session通过类似与Hashtable的数据结构来保存，能支持任何类型的对象(session中可含有多个对象)

4、存储的大小：cookie：单个cookie保存的数据不能超过4kb；session大小没有限制。

5、安全性：cookie：针对cookie所存在的攻击：Cookie欺骗，Cookie截获；session的安全性大于cookie。

　　　　　　原因如下：（1）sessionID存储在cookie中，若要攻破session首先要攻破cookie；

　　　　　　　　　　　（2）sessionID是要有人登录，或者启动session_start才会有，所以攻破cookie也不一定能得到sessionID；

　　　　　　　　　　　（3）第二次启动session_start后，前一次的sessionID就是失效了，session过期后，sessionID也随之失效。

　　　　　　　　　　　（4）sessionID是加密的

　　　　　　　　　　　（5）综上所述，攻击者必须在短时间内攻破加密的sessionID，这很难。

6、应用场景：

cookie：（1）判断用户是否登陆过网站，以便下次登录时能够实现自动登录（或者记住密码）。如果我们删除cookie，则每次登录必须从新填写登录的相关信息。

　　　　（2）保存上次登录的时间等信息。

　　　　（3）保存上次查看的页面

　　　　（4）浏览计数

session：Session用于保存每个用户的专用信息，变量的值保存在服务器端，通过SessionID来区分不同的客户。

　　（1）网上商城中的购物车

　　（2）保存用户登录信息

　　（3）将某些数据放入session中，供同一用户的不同页面使用

　　（4）防止用户非法登录

 7、缺点：cookie：（1）大小受限

　　　　　　　　（2）用户可以操作（禁用）cookie，使功能受限

　　　　　　　　（3）安全性较低

　　　　　　　　（4）有些状态不可能保存在客户端。

　　　　　　　　（5）每次访问都要传送cookie给服务器，浪费带宽。

　　　　　　　　（6）cookie数据有路径（path）的概念，可以限制cookie只属于某个路径下。

 　　　　session：（1）Session保存的东西越多，就越占用服务器内存，对于用户在线人数较多的网站，服务器的内存压力会比较大。

　　　　　　　　（2）依赖于cookie（sessionID保存在cookie），如果禁用cookie，则要使用URL重写，不安全

　　　　　　　　（3）创建Session变量有很大的随意性，可随时调用，不需要开发者做精确地处理，所以，过度使用session变量将会导致代码不可读而且不好维护。

二、WebStorage

WebStorage的目的是克服由cookie所带来的一些限制，当数据需要被严格控制在客户端时，不需要持续的将数据发回服务器。

WebStorage两个主要目标：（1）提供一种在cookie之外存储会话数据的路径。（2）提供一种存储大量可以跨会话存在的数据的机制。

HTML5的WebStorage提供了两种API：localStorage（本地存储）和sessionStorage（会话存储）。

1、生命周期：localStorage:localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。

　　　　　　  sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。

2、存储大小：localStorage和sessionStorage的存储数据大小一般都是：5MB

3、存储位置：localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信。

4、存储内容类型：localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理

5、获取方式：localStorage：window.localStorage;；sessionStorage：window.sessionStorage;。

6、应用场景：localStoragese：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据。sessionStorage：敏感账号一次性登录；

WebStorage的优点：

（1）存储空间更大：cookie为4KB，而WebStorage是5MB；

（2）节省网络流量：WebStorage不会传送到服务器，存储在本地的数据可以直接获取，也不会像cookie一样美词请求都会传送到服务器，所以减少了客户端和服务器端的交互，节省了网络流量；

（3）对于那种只需要在用户浏览一组页面期间保存而关闭浏览器后就可以丢弃的数据，sessionStorage会非常方便；

（4）快速显示：有的数据存储在WebStorage上，再加上浏览器本身的缓存。获取数据时可以从本地获取会比从服务器端获取快得多，所以速度更快；

（5）安全性：WebStorage不会随着HTTP header发送到服务器端，所以安全性相对于cookie来说比较高一些，不会担心截获，但是仍然存在伪造问题；

（6）WebStorage提供了一些方法，数据操作比cookie方便；

　　　　setItem (key, value) ——  保存数据，以键值对的方式储存信息。

      　　 getItem (key) ——  获取数据，将键值传入，即可获取到对应的value值。

        　　removeItem (key) ——  删除单个数据，根据键值移除对应的信息。

        　　clear () ——  删除所有的数据

        　　key (index) —— 获取某个索引的key

6. JSON 和 JSONP

一、区别

　　简单来说，json是一种数据交换格式，jsonp是一种非官方跨域数据交互协议。json描述的是信息的格式，而jsonp是信息传递双方约定的方法。json返回的是一串数据，而 jsonp返回的是脚本代码（包含一个函数调用）。

　　json是理想的数据交换格式，但是没有办法跨域直接获取，于是就将json包裹在一个合法的js语句中作为js文件传过去。json是想要的东西，jsonp是获取这个东西采取的方法，所以最终获得和处理的还是json。所以可以这么说，json是目的，jsonp只是手段。json总会用到，而jsonp只有在跨域数据获取的时候才会用到。

二、定义

　　json可以理解为是一种格式，它的键必须用双引号。json格式的对象必须写在{}花括号里面，json格式的数组写在[]大括号里面。

　　JSON.parse(字符串)可以将json字符串转换成json对象；JSON.stringify(jsonObj)可以将json对象转换成json字符串。

　　jsonp实现跨域的原理：

　　　　利用script标签没有跨域限制来达成和第三方通信，允许用户传一个callback给服务端，服务端返回数据会将这个callback参数作为函数名来包裹json数据，这样客户端就可以定制自己的函数来处理返回的数据。

7.常见的后台响应码？

一、HTTP状态码

 

如果某项请求发送到您的服务器要求显示您网站上的某个网页（例如，用户通过浏览器访问您的网页或 Googlebot 抓取网页时），服务器将会返回 HTTP 状态代码以响应请求。

 

此状态代码提供关于请求状态的信息， 告诉 Googlebot 关于您的网站和请求的网页的信息。

一些常见的状态代码包括：

• 200 – 服务器成功返回网页
• 404 – 请求的网页不存在
• 503 – 服务器暂时不可用

 

下面提供 HTTP 状态代码的完整列表。 点击链接可了解详情。 您也可以访问有关 HTTP 状态代码的 W3C 网页以获得更多信息。

 

1xx：请求收到，继续处理
2xx：操作成功收到，分析、接受
3xx：完成此请求必须进一步处理
4xx：请求包含一个错误语法或不能完成
5xx：服务器执行一个完全有效请求失败

1xx（临时响应）
表示临时响应并需要请求者继续执行操作的状态代码。

 

 

代码 说明

100（继续）	请求者应当继续提出请求。 服务器返回此代码表示已收到请求的第一部分，正在等待其余部分。
101（切换协议）	请求者已要求服务器切换协议，服务器已确认并准备切换。

 

 

2xx（成功）

表示服务器成功处理了请求的状态代码。

 

 

代码 说明

200（成功）	服务器已成功处理了请求。 通常，这表示服务器提供了请求的网页。 如果针对您的 robots.txt 文件显示此状态，则表示 Googlebot 已成功检索到该文件。
201（已创建）	请求成功并且服务器创建了新的资源。
202（已接受）	服务器已接受请求，但尚未处理。
203（非授权信息）	服务器已成功处理了请求，但返回的信息可能来自另一来源。
204（无内容）	服务器成功处理了请求，但没有返回任何内容。
205（重置内容）	服务器成功处理了请求，但没有返回任何内容。 与 204 响应不同，此响应要求请求者重置文档视图（例如，清除表单内容以输入新内容）。
206（部分内容）	服务器成功处理了部分 GET 请求。

 

 

3xx（重定向）
要完成请求，需要进一步操作。 通常，这些状态代码用来重定向。 Google 建议您在每次请求中使用重定向不要超过 5 次。 您可以使用网站管理员工具查看一下 Googlebot 在抓取重定向网页时是否遇到问题。 诊断下的网 络抓取页面列出了由于重定向错误而导致 Googlebot 无法抓取的网址。

 

 

代码 说明

300（多种选择）	针对请求，服务器可执行多种操作。 服务器可根据请求者（用户代理）选择一项操作，或提供操作列表供请求者选择。
301（永久移动）	请求的网页已永久移动到新位置。 服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。 您应使用此代码告诉 Googlebot 某个网页或网站已永久移动到新位置。
302（暂时移动）	服 务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。 此代码与响应 GET 或 HEAD 请求的 301 代码类似，会自动将请求者转到不同的位置，但您不应使用此代码来告诉 Googlebot 某个网页或网站已经移动，因为 Googlebot 会继续抓取原有位置并编入索引。
303（查看其他位置）	请求者应当对不同的位置使用单独的 GET 请求来检索响应时，服务器返回此代码。 对于除 HEAD 之外的所有请求，服务器会自动转到其他位置。
304（未修改）	自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容。如果网页自请求者上次请求后再也没有更改过，您应当将服务器配置为返回此响应（称为 If-Modified-Since HTTP 标头）。 由于服务器可以告诉 Googlebot 自从上次抓取后网页没有更改过，因此可节省带宽和开销 。
305（使用代理）	请求者只能使用代理访问请求的网页。 如果服务器返回此响应，还表示请求者应使用代理。
307（暂时重定向）	服 务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。 此代码与响应 GET 和 HEAD 请求的 301 代码类似，会自动将请求者转到不同的位置，但您不应使用此代码来告诉 Googlebot 某个页面或网站已经移动，因为 Googlebot 会继续抓取原有位置并编入索引。

 

 

4xx（请求错误）
这些状态代码表示请求可能出错，妨碍了服务器的处理。

 

 

代码 说明

400（错误请求）	服务器不理解请求的语法。
401（未授权）	请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应。
403（禁止）	服务器拒绝请求。 如果您看到 Googlebot 在尝试抓取您网站上的有效网页时收到此状态代码（可以在 Google 网站管理员工具诊 断下的网络抓取页面上看到此信息），可能是您的服务器或主机拒绝 Googlebot 访问。
404（未找到）	服务器找不到请求的网页。 例如，如果请求服务器上不存在的网页，服务器通常会返回此代码。如果您的网站上没有 robots.txt 文件，而您在 Google 网站管理员工具”诊断”标签的 robots.txt 页上看到此状态，那么这是正确的状态。 但是，如果您有 robots.txt 文件而又看到此状态，则说明您的 robots.txt 文件可能命名错误或位于错误的位置 （该文件应当位于顶级域名，名为 robots.txt）。 如果您看到有关 Googlebot 尝试抓取的网址的此状态（在”诊断”标签的 HTTP 错误页上），则表示 Googlebot 追踪的可能是另一个页面的无效链接（是旧链接或输入有误的链接）。
405（禁用的方法）	禁用请求中指定的方法。
406（不可接受）	无法使用请求的内容特性响应请求的网页。
407（需要代理授权）	此状态代码与 401（未授权）类似，但指定请求者应当授权使用代理。 如果服务器返回此响应，还会指明请求者应当使用的代理。
408（请求超时）	服务器等候请求时发生超时。
409（冲突）	服务器在完成请求时发生冲突。 服务器必须在响应中包含有关冲突的信息。 服务器在响应与前一个请求相冲突的 PUT 请求时可能会返回此代码，同时会附上两个请求的差异列表。
410（已删除）	如果请求的资源已永久删除，服务器就会返回此响应。 该代码与 404（未找到）代码相似，但在资源以前存在而现在不存在的情况下，有时会用来替代 404 代码。 如果资源已永久删除，您应当使用 301 指定资源的新位置。
411（需要有效长度）	服务器不接受不含有效内容长度标头字段的请求。
412（未满足前提条件）	服务器未满足请求者在请求中设置的其中一个前提条件。
413（请求实体过大）	服务器无法处理请求，因为请求实体过大，超出服务器的处理能力。
414（请求的 URI 过长）	请求的 URI（通常为网址）过长，服务器无法处理。
415（不支持的媒体类型）	请求的格式不受请求页面的支持。
416（请求范围不符合要求）	如果页面无法提供请求的范围，则服务器会返回此状态代码。
417（未满足期望要求）	服务器未满足”期望”请求标头字段的要求。

 

 

5xx（服务器错误）
这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误，而不是请求出错。

 

 

代码 说明

500（服务器内部错误）	服务器遇到错误，无法完成请求。
501（尚未实施）	服务器不具备完成请求的功能。 例如，服务器无法识别请求方法时可能会返回此代码。
502（错误网关）	服务器充当网关或代理，从上游服务器收到无效响应。
503（服务不可用）	服务器目前无法使用（由于超载或停机维护）。 通常，这只是暂时状态。
504（网关超时）	服务器充当网关或代理，但没有及时从上游服务器收到请求。
505（HTTP 版本不受支持）	服务器不支持请求中所用的 HTTP 协议版本。

 

 

英文版：

100：Continue
101：Switching Protocols
102：Processing

200：OK
201：Created
202：Accepted
203：Non-Authoriative Information
204：No Content
205：Reset Content
206：Partial Content
207：Multi-Status

300：Multiple Choices
301：Moved Permanently
302：Found
303：See Other
304：Not Modified
305：Use Proxy
306：(Unused)
307：Temporary Redirect

400：Bad Request
401：Unauthorized
402：Payment Granted
403：Forbidden
404：File Not Found
405：Method Not Allowed
406：Not Acceptable
407：Proxy Authentication Required
408：Request Time-out
409：Conflict
410：Gone
411：Length Required
412：Precondition Failed
413：Request Entity Too Large
414：Request-URI Too Large
415：Unsupported Media Type
416：Requested range not satisfiable
417：Expectation Failed
422：Unprocessable Entity
423：Locked
424：Failed Dependency

500：Internal Server Error
501：Not Implemented
502：Bad Gateway
503：Service Unavailable
504：Gateway Timeout
505：HTTP Version Not Supported
507：Insufficient Storage

200号状态码

220.181.32.30 - - [02/Sep/2008:00:01:23 +0800] "GET /article/0572/72570.shtml HTTP/1.1" 200 28361 "-" "Baiduspider+(+http://www.baidu.com/search/spider.htm)"

服务器日志中的200表示使用GET传递方式网页72570.shtml下载成功。即：当用户或爬虫程序向网站服务器发出浏览请求时，服务器返回 HTTP 数据流里包含某种状态码，200响应号即状态码中的一种，表示本网页被成功下载。

301号状态码

220.181.32.30 - - [02/Sep/2008:00:01:31 +0800] "GET /my/view.php?aid=14183 HTTP/1.1" 301 - "-" "Baiduspider+(+http://www.baidu.com/search/spider.htm)"

服务器日志中的301表示使用GET传递方式动态网页aid=14183成功跳转。即：当用户或爬虫程序向网站服务器发出浏览请求时，服务器返回 HTTP 数据流包含某种状态码，301 重定向即状态码中的一种，表示本网页永久性转移到另一个地址。实际操作中我们可以将多个域名指向同一个网址，这也是搜索引擎唯一认可的一种网站转向的方式。

 

 

二、404状态码

 

220.181.32.30 - - [02/Sep/2008:00:01:51 +0800] "GET /writing HTTP/1.1" 404 4459 "-" "Baiduspider+(+http://www.baidu.com/search/spider.htm)"

 

出现404状态码就证明有URL地址的网页浏览不到。很多时候由于网站的改版，使很多旧版网站url地址失效。这是你需要建立404状态页来保证你网站通畅，能够达到一种回路的效果。切记404状态页需要单独设计，不能直接在服务器端直接跳转回首页。否则，搜索引擎会大量抓取网站首页失误当成404页处理。

 

对HTTP404状态码的深度理解

 

HTTP 404 错误意味着链接指向的网页不存在，即原始网页的URL失效，这种情况经常会发生，很难避免，比如说：网页URL生成规则改变、网页文件更名或移动位置、导入链接拼写错误等，导致原来的URL地址无法访问；当Web 服务器接到类似请求时，会返回一个404 状态码，告诉浏览器要请求的资源并不存在。但是，Web服务器默认的404错误页面，无论Apache还是IIS，均十分简陋、呆板且对用户不友好，无法给用户提供必要的信息以获取更多线索，无疑这会造成用户的流失。

 

因此，很多网站均使用自定义404错误的方式以提供用户体验避免用户流失。一般而言，自定义404页面通用的做法是在页面中放置网站快速导航链接、搜索框以及网站提供的特色服务，这样可以有效的帮助用户访问站点并获取需要的信息。

HTTP404对SEO的影响

 

自定义404错误页面是提供用户体验的很好的做法，但在应用过程中往往并未注意到对搜索引擎的影响，譬如：错误的服务器端配置导致返回“200”状态码或自定义404错误页面使用Meta Refresh导致返回“302”状态码。正确设置的自定义404错误页面，不仅应当能够正确地显示，同时，应该返回“404”错误代码，而不是“200”或“302”。虽然对访问的用户而言，HTTP状态码究竟是“404”还是“200”来说并没有什么区别，但对搜索引擎而言，这则是相当重要的。

1.自定义404错误页返回“200”状态码

 

当搜索引擎蜘蛛在请求某个URL地址得到“404”状态回应时，即知道该URL地址已经失效，便不再索引该网页，并向数据中心反馈将该URL地址表示的网页从索引数据库中删除，当然，删除过程有可能需要很长时间；而当搜索引擎得到“200”状态回应时，则会认为该url地址是有效的，便会去索引，并会将其收录到索引数据库，这样的结果便是这两个不同的url地址具有完全相同的内容：自定义404错误页面的内容，这会导致出现复制网页问题。对搜索引擎而言，特别是Google，不但很难获得信任指数TrustRank，也会大大降低Google对网站质量的评定。

 

在使用Google Sitemap，当提交XML格式网站地图文件时，谷歌管理员工具会验证网站的身份以确保是网站合法的管理者。验证方式有两种：上传指定名称的html页到网站根目录或者在网页meta区域添加一个标识身份的meta标签。通常是使用上传html网页的方式，但谷歌管理员工具却提示网站根目录下找不到这个网页，这是一个很可怕的问题。

 

 

2.自定义404错误页使用Meta Refresh返回“302”状态码

 

常常看到许多网站的自定义404错误页面采取类似这样的形式：首先显示一段错误信息，然后，通过Meta Refresh将页面跳转到网站首页、网页地图或其他类似页。根据具体实现方式不同，这类404页面可能返回“200”状态码，也可能返回“302”，但不论哪种，从SEO技术角度看，均不是一种合适的选择。

 

对“200”状态的情况我们上面已经谈过，那么，当404页面返回“302”时，搜索引擎会怎么对待呢?从理论上说，对“302”错误，搜索引擎认为该网页是存在的，只不过临时改变了地址，仍然会索引收录该页，这样，同样会出现类似于“200”状态码时的重复文本问题；其次，以谷歌为代表的主流搜索引擎对302重定向的适用范围要求越来越严格，这类不当使用302重定向的情况存在很大的风险。

 

确保自定义404错误页面能够返回“404”状态码

 

在自定义404错误页面设置完毕后，一定要检查一下其是不是能够正确地返回“404”状态码。可以使用Server Header检查工具，输入一个不存在网页的url，查看一下HTTP Header的返回情况，确信其返回的是“404 Not found”。

8.按F5刷新，ctrl+F5刷新以及和点地址栏的刷新按钮有什么区别？

在浏览器里中，按F5键或者点击Toobar上的Refresh/Reload图标(简称F5)，和做F5同时按住Ctrl键（简称Ctrl+F5），效果是明显不一样的，通常Ctrl+F5明显要让网页Refresh慢一些，到底两者有什么区别呢？

在上一篇技术文章中，说到了Expires、Last-Modified/If-Modified-Since和ETag/If-None-Match这些HTTP Headers，F5/Ctrl+F5和这些有莫大关系。

假如我第一次访问过http://www.example.com，这个网页是个动态网页，每次访问都会去访问Server，但是它包含一个一个静态资源http://www.example.com/logo.gif，浏览器在显示这个网页之前需要发HTTP请求获取这个logo.gif文件，返回的HTTP response包含这样的Headers:

Expires: Thu 27 Nov 2008 07:00:00 GMT 
Last-Modified: Fri 30 Nov 2007 00:00:00 GMT

那么浏览器就会cache住这个logo.gif文件，直到2008年11月27日7点整，或者直到用户有意清空cache。

下次我再通过bookmark或者通过在URI输入栏直接敲字的方法访问http://www.example.com的时候，浏览器一看本地有个logo.gif，而且它还没过期呢，就不会发HTTP request给server，而是直接把本地cache中的logo.gif显示了。

F5的作用和直接在URI输入栏中输入然后回车是不一样的，F5会让浏览器无论如何都发一个HTTP Request给Server，即使先前的Response中有Expires Header。所以，当我在当前http://www.example.com网页中按F5的时候，浏览器会发送一个HTTP Request给Server，但是包含这样的Headers:

If-Modified-Since: Fri 30 Nov 2007 00:00:00 GMT

实际上Server没有修改这个logo.gif文件，所以返回一个304 (Not Modified)，这样的Response很小，所以round-trip耗时不多，网页很快就刷新了。

上面的例子中没有考虑ETag，如同在上一篇技术文章中所说，最好就不要用ETag，但是如果Response中包含ETag，F5引发的Http Request中也是会包含If-None-Match的。

那么Ctrl+F5呢？ Ctrl+F5要的是彻底的从Server拿一份新的资源过来，所以不光要发送HTTP request给Server，而且这个请求里面连If-Modified-Since/If-None-Match都没有，这样就逼着Server不能返回304，而是把整个资源原原本本地返回一份，这样，Ctrl+F5引发的传输时间变长了，自然网页Refresh的也慢一些。

实际上，为了保证拿到的是从Server上最新的，Ctrl+F5不只是去掉了If-Modified-Since/If-None-Match，还需要添加一些HTTP Headers。按照HTTP/1.1协议，Cache不光只是存在Browser终端，从Browser到Server之间的中间节点(比如Proxy)也可能扮演Cache的作用，为了防止获得的只是这些中间节点的Cache，需要告诉他们，别用自己的Cache敷衍我，往Upstream的节点要一个最新的copy吧。

在IE6中，Ctrl+F5会添加一个Header

Pragma: no-cache

在Firefox 2.0中，Ctrl+F5会添加两个

Pragma: no-cache 
Cache-Control: max-age=0

作用就是让中间的Cache对这个请求失效，这样返回的绝对是新鲜的资源

9. CDN有了解过吗？

CDN

全称:Content Delivery Network或Content Ddistribute Network，即内容分发网络

基本思路：

尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。

目的：

解决因分布、带宽、服务器性能带来的访问延迟问题，适用于站点加速、点播、直播等场景。使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度和成功率。

控制时延无疑是现代信息科技的重要指标，CDN的意图就是尽可能的减少资源在转发、传输、链路抖动等情况下顺利保障信息的连贯性。

CDN就是扮演者护航者和加速者的角色，更快准狠的触发信息和触达每一个用户，带来更为极致的使用体验。
再通俗点说就是在网速一定的前提下，CDN就像网络中快递员小哥

10. 箭头函数解决了什么问题？let和var的区别是什么？

关于this指向问题的讨论一直是学习js不可忽视的重要部分，那些一个又一个围绕this挖的笔试坑，仿佛永远也填不完

[javascript] view plain copy

1. var obj={  
2.     fn:function(){  
3.         console.log(this);  
4.     }  
5. }  
6. obj.fn();//object  

以上这段代码是再浅显不过的this指向问题，也就是谁调用的函数，函数体中的this就指向谁

再看下面这段

[javascript] view plain copy

1. var obj={  
2.     fn:function(){  
3.         setTimeout(function(){  
4.             console.log(this);  
5.         });  
6.     }  
7. }  
8. obj.fn();//window  

这次this指向了最外层的window对象，为什么呢，还是那个道理，这次this出现在全局函数setTImeout()中的匿名函数里，并没有某个对象进行显示调用，所以this指向window对象

假如我们在这里使用箭头函数呢

[javascript] view plain copy

1. var obj={  
2.     fn:function(){  
3.         setTimeout(() => {  
4.             console.log(this);  
5.         });  
6.     }  
7. }  
8. obj.fn();//object  

this又指向函数的宿主对象了

为了更加清楚的对比一般函数和箭头函数this指向的区别，我们给对象添加变量

[javascript] view plain copy

1. var obj={  
2.     num:3,  
3.     fn:function(){  
4.         setTimeout(function(){  
5.             console.log(this.num);  
6.         });  
7.     }  
8. }  
9. obj.fn();//undefined  
10. //............................................................  
11. var obj1={  
12.     num:4,  
13.     fn:function(){  
14.         setTimeout(() => {  
15.             console.log(this.num);  
16.         });  
17.     }  
18. }  
19. obj1.fn();//4  

如上代码，在没有使用箭头函数的情况下，this指向了window（匿名函数，没有调用的宿主对象），而window对象并没有num属性（num属性在obj中定义），而在使用箭头函数的情况下，this的指向却对象obj1，自然可以输出obj1中定义的属性num。

接下来看更复杂的情况

多层嵌套的箭头函数

[javascript] view plain copy

1. var obj1={  
2.     num:4,  
3.     fn:function(){  
4.         var f=() => {    //object，也就是指obj1  
5.             console.log(this);  
6.             setTimeout(() => {  
7.                 console.log(this);// //object，也就是指obj1  
8.             });  
9.         }  
10.         f();  
11.     }  
12. }  
13. obj1.fn();  

假如我们改动两层箭头函数的其中一处，看会出现什么结果

[javascript] view plain copy

1. var obj1={  
2.     num:4,  
3.     fn:function(){  
4.         var f=function(){      
5.             console.log(this); //window,因为函数f定义后并没有对象调用，this直接绑定到最外层的window对象  
6.             setTimeout(() => {  
7.                 console.log(this);//window，外层this绑定到了window,内层也相当于定义在window层（全局环境）  
8.             });  
9.         }  
10.         f();  
11.     }  
12. }  
13. obj1.fn();  

好，接下来改变另一处

[javascript] view plain copy

1. var obj1={  
2.     num:4,  
3.     fn:function(){  
4.         var f=() => {      
5.             console.log(this); //object,f()定义在obj1对象中，this就指向obj1,这就是箭头函数this指向的关键  
6.             setTimeout(function() {  
7.                 console.log(this);//window，非箭头函数的情况下还是要看宿主对象是谁，如果没有被对象调用，函数体中的this就绑定的window上  
8.             });  
9.         }  
10.         f();  
11.     }  
12. }  
13. obj1.fn();  

• 通过var定义的变量，作用域是整个封闭函数，是全域的 。通过let定义的变量，作用域是在块级或是子块中。

for (let i = 0; i < 10; i++) {
  // ...
}

console.log(i);
// ReferenceError: i is not defined
//计数器i只在for循环体内有效，在循环体外引用就会报错。

• 1
• 2
• 3
• 4
• 5
• 6
• 7

• 变量提升现象：浏览器在运行代码之前会进行预解析，首先解析函数声明，定义变量，解析完之后再对函数、变量进行运行、赋值等。 
  -不论var声明的变量处于当前作用域的第几行，都会提升到作用域的头部。 
  -var 声明的变量会被提升到作用域的顶部并初始化为undefined，而let声明的变量在作用域的顶部未被初始化

// var 的情况
console.log(foo); // 输出undefined
var foo = 2;
//相当于
var foo;  //声明且初始化为undefined
console.log(foo);
foo=2;

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;
//相当于在第一行先声明bar但没有初始化，直到赋值时才初始化

• 1
• 2
• 3
• 4
• 5
• 6

但是直接用let声明变量不赋值是会打印undefined，还是初始化了，只是let声明放在赋值之后，let声明会提前但不会初始化。

let a;
alert(a);//值为undefined

alert b;//会报错
let b;

• 1
• 2
• 3
• 4
• 5

• 只要块级作用域内存在let命令，它所声明的变量就“绑定”这个区域，不再受外部的影响。总之，在代码块内，使用let命令声明变量之前，该变量都是不可用的，尽管代码块外也存在相同全局变量。

var tmp = 123;

if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp;
}
alert(tmp);  //输出值为123，全局tmp与局部tmp不影响

• 1
• 2
• 3
• 4
• 5
• 6
• 7

• let不允许在相同作用域内，重复声明同一个变量。

// 报错
function () {
  let a = 10;
  var a = 1;
}
// 报错
function () {
  let a = 10;
  let a = 1;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

11.前段性能优化问题

1. 尽量减少HTTP请求次数
   压缩合并js
   css精灵
   内联图片。src用data:url scheme
2. 减少DNS查询
   有的内容资源都放在同一个域(Domain)下面，这样访问整个网站就只需要进行一次DNS查找，这样可以提高性能
   由于这些资源都在同一个域，而HTTP /1.1 中推荐客户端针对每个域只有一定数量的并行度（它的建议是2），那么就会出现下载资源时的排队现象
   建议在一个网站里面使用至少2个域，但不多于4个域来提供资源
3. 使用CDN
   网站上静态资源即css、js全都使用cdn分发，图片亦然,因为cdn拥有众多服务器，用户请求可以请求距离他近的服务器，加快速度
4. 避免空的src和href
5. 为文件头指定Expires(过期时间)或者Cache-Control头部。
6. 使用gzip压缩内容(服务端)
7. 把CSS放到顶部
8. 把JS放到底部
9. 避免使用CSS表达式
10. 将CSS和JS放到外部文件中
11. 可缓存的AJAX异步请求同样的造成用户等待，所以使用ajax请求时，要主动告诉浏览器如果该请求有缓存就去请求缓存内容。如下代码片段,
    $.ajax({
    url: 'url',
    dataType: "json",
    cache: true, //如果有缓存请求缓存
    success: function(son, status) {}
    })
12. 使用GET来完成AJAX请求
    POST方法：首先发送文件头，然后才发送数据
13. 减少DOM元素数量
14. 不要404。
    所以发出http请求但获得没用的响应（如404）是完全不必要的，并且会降低用户体验，这样首先会降低（占用）并行下载数
    如果有404状态码 在此页面展示404样式，不是直接跳转到404页面
15. 不要在html中缩放图片