易混淆概念小合集

一个小小的错题本

关于闭包

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

注意是容易不是一定造成内存泄漏啊

闭包有三个特性：

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

1.在浏览器控制台执行以下代码，输入的结果是（）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function test(){
	var n = 4399;
	function add(){
	n++;
	console.log(n);
	}
	return {n:n,add:add}
}
var result = test();
var result2 = test();
result.add();
result.add();
console.log(result.n)
result2.add();

4400 4401 4399 4400

牛客网

test 构成了一个闭包，result 跟 result2 各自有自己的 test 作用域，所以最后 result2.add() 结果是 4400
前两个没啥好说的，懵逼点在第三个，这里 {n：n} 是对变量 n 里的值进行缓存，而不是本身 n 这个指针变量，这样生成 add 的时候 n 指向的值是多少 {n：n} 里的值就是多少

2.

1
2
3
4
5
console.log('one');
setTimeout(function(){
console.log('two');
},0);
console.log('three');

‘one’’three’’two’

3.

执行say667()后,say667()闭包内部变量会存在,而闭包内部函数的内部变量不会存在.使得Javascript的垃圾回收机制GC不会收回say667()所占用的资源，因为say667()的内部函数的执行需要依赖say667()中的变量。这是对闭包作用的非常直白的描述.

1
2
3
4
5
6
7
8
9
10
  function say667() {
    // Local variable that ends up within closure
    var num = 666;
    var sayAlert = function() { alert(num); }
    num++;
    return sayAlert;
}
 var sayAlert = say667();
 sayAlert()//执行结果应该弹出的667

4.

1
2
3
4
5
(function() {
      var a = b = 5;
  })();   
console.log(b);
console.log(a);

5, error(undefined)

5.

1
2
3
4
5
6
7
8
9
10
var m= 1, j = k = 0; 
    function add(n) { 
        return n = n+1; 
　 } 
    y = add(m); 
    function add(n) { 
        return n = n + 3; 
    } 
z = add(m); 
console.log(y, z)

4, 4

css布局题

双飞翼和圣杯

圣杯布局和双飞翼布局基本上是一致的，都是两边固定宽度，中间自适应的三栏布局，其中，中间栏放到文档流前面，保证先行渲染。解决方案大体相同，都是三栏全部 float:left 浮动，区别在于解决中间栏 div 的内容不被遮挡上，圣杯布局是中间栏在添加相对定位，并配合 left 和 right 属性，效果上表现为三栏是单独分开的（如果可以看到空隙的话），而双飞翼布局是在中间栏的 div 中嵌套一个 div，内容写在嵌套的 div 里，然后对嵌套的 div 设置 margin-left 和 margin-right，效果上表现为左右两栏在中间栏的上面，中间栏还是 100% 宽度，只不过中间栏的内容通过 margin 的值显示在中间。

  1. 双飞翼

DOM 代码如下：

1
2
3
4
5
6
7
8
9
<body>
<div id="hd">header</div> 
  <div id="middle">
    <div id="inside">middle</div>
  </div>
  <div id="left">left</div>
  <div id="right">right</div>
  <div id="footer">footer</div>
</body>

双飞翼布局是在 middle 的 div 里又插入一个 div，通过调整内部 div 的 margin 值，实现中间栏自适应，内容写到内部 div 中。

CSS 代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<style>
#hd{
    height:50px;
    background: #666;
    text-align: center;
}
#middle{
    float:left;
    width:100%;/*左栏上去到第一行*/     
    height:100px;
    background:blue;
}
#left{
    float:left;
    width:180px;
    height:100px;
    margin-left:-100%;
    background:#0c9;
}
#right{
    float:left;
    width:200px;
    height:100px;
    margin-left:-200px;
    background:#0c9;
}
/*给内部div添加margin，把内容放到中间栏，其实整个背景还是100%*/ 
#inside{
    margin:0 200px 0 180px;
    height:100px;
}
#footer{  
   clear:both; /*记得清除浮动*/  
   height:50px;     
   background: #666;    
   text-align: center; 
} 
</style>
  1. 圣杯

注意 middle 写在前面就行了，dom 结构如下：

1
2
3
4
5
6
7
8
9
<body>
<div id="hd">header</div>
<div id="bd">
  <div id="middle">middle</div>
  <div id="left">left</div>
  <div id="right">right</div>
</div>
<div id="footer">footer</div>
</body>

相对应的 CSS 内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<style>
#hd{
    height:50px;
    background: #666;
    text-align: center;
}
#bd{
    /*左右栏通过添加负的margin放到正确的位置了，此段代码是为了摆正中间栏的位置*/
    padding:0 200px 0 180px;
    height:100px;
}
#middle{
    float:left;
    width:100%;/*左栏上去到第一行*/
    height:100px;
    background:blue;
}
#left{
    float:left;
    width:180px;
    height:100px;
    margin-left:-100%;
    background:#0c9;
    /*中间栏的位置摆正之后，左栏的位置也相应右移，通过相对定位的left恢复到正确位置*/
    position:relative;
    left:-180px;
}
#right{
    float:left;
    width:200px;
    height:100px;
    margin-left:-200px;
    background:#0c9;
    /*中间栏的位置摆正之后，右栏的位置也相应左移，通过相对定位的right恢复到正确位置*/
    position:relative;
    right:-200px;
}
#footer{
    height:50px;
    background: #666;
    text-align: center;
}
</style>

双列布局，某一列自适应宽度

需要实现的功能为，左边能够自适应宽度，右边固定。

本布局可以使用浮动 + 负边距来实现。

给左边元素加一个父级，同时左元素在父级元素内空出右边元素的位置。

不设定左边元素宽度，使左右两列都进行浮动，右边元素 margin-left 为本身的宽度。
代码为

dom

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="wrap">
<div class="left">我是一个自适应宽度的左边输入框,我支持自动换行不会被右边导航栏所覆盖内容。</div>
</div>
<div class="right">我是固定右边导航栏</div>
</body>
</html>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
body{
    width:500px;
    margin:10px;
    border:dashed 1px orange;
    overflow:hidden;  
}
.wrap{
  width: 100%;
  float: left;
}
  .left{
  background: #FCD975;
  height: 400px;
  margin-right: 100px;
}
  .right{
  background: #591804;
  color: white;
  width: 100px;
  height: 400px;
  float: left;
  margin-left: -100px;
}

品字布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>品字布局</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    div {
        width: 100px;
        height: 100px;
        background: red;
        font-size: 40px;
        line-height: 100px;
        color: #fff;
        text-align: center;
    }
    .div1 {
        margin: 50px auto 0;
    }
    .div2 {
        background: green;
        float: left;
        margin-left: 50%;
        position: relative;
        left: -100px;
    }
    .div3 {
        background: blue;
        float: left;
        position: relative;
        left: -100px;
    }
    </style>
</head>
<body>
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
</body>
</html>

  • reference
  1. 三栏布局，两侧固定宽度，中间自适应
  1. 左边能够自适应宽度，右边固定
  1. 圣杯布局和双飞翼布局的理解和区别

这个讲的比较好

  1. 布局常用属性

这个讲的非常好

  1. 首尾高度固定、中间高度自适应的 DIV 布局

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

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

缺点：

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

2.安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。
3.有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。

html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。

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

除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。

但是cookie也是不可以或缺的：cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地 “存储” 数据而生

1、cookie数据存放在客户的浏览器上，session数据放在服务器上。
2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗
   考虑到安全应当使用session。
3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能
    考虑到减轻服务器性能方面，应当使用COOKIE。
4、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。
5、所以建议：
   将登陆信息等重要信息存放为SESSION
   其他信息如果需要保留，可以放在COOKIE中

一些面经

html 不区分

css

  • id 名和 class 名是区分大小写的
  • 选择器中，只有标签选择器不区分大小写
  • 属性名和属性值是不区分大小写的

js 区分

  • iframe 有那些缺点？

    *iframe会阻塞主页面的Onload事件；

    *iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
    使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript
    动态给iframe添加src属性值，这样可以可以绕开以上两个问题。

  • new 操作符具体干了什么

1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型

2、属性和方法被加入到 this 引用的对象中

3、新创建的对象由 this 所引用，并且最后隐式的返回 this

1
2
3
var obj  = {};
obj.__proto__ = Base.prototype;
Base.call(obj);

前端安全问题？

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.使用验证码

js对象的深度克隆

function clone(Obj) {   
      var buf;   
      if (Obj instanceof Array) {   
          buf = [];  //创建一个空的数组 
          var i = Obj.length;   
          while (i--) {   
              buf[i] = clone(Obj[i]);   
          }   
          return buf;   
      }else if (Obj instanceof Object){   
          buf = {};  //创建一个空对象 
          for (var k in Obj) {  //为这个对象添加新的属性 
              buf[k] = clone(Obj[k]);   
          }   
          return buf;   
      }else{   
          return Obj;   
      }   
  }

关于 Http 2.0 ？

HTTP/2引入了 “服务端推（serverpush）” 的概念，它允许服务端在客户端需要数据之前就主动地将数据发送到客户端缓存中，从而提高性能。 HTTP/2提供更多的加密支持 HTTP/2使用多路技术，允许多个消息在一个连接上同时交差。 它增加了头压缩（header compression），因此即使非常小的请求，其请求和响应的header都只会占用很小比例的带宽。

参考链接

一系列都挺好的

javascript