面试

text-indent:首行缩进

text-align:文本对齐方式

 

什么式盒子模型？

css中的盒子模型由4部分组成，外边距margin、内边距padding、边框border、元素内容content组成。

 

CSS实现垂直居中

1、设置子元素和父元素的行高一样

2、子元素设置为行内块，再加vertical-align：middle

3、已知父元素高度，子元素相对定位，通过transform：translateY（-50%）

4、不知道父元素高度，子绝父相，子元素top：50%，transform：translateY（-50%）

5、创建一个隐藏节点，让隐藏节点的height为剩余高度的一半

6、给父元素display：table，子元素display：table-cell，vertical-align：middle

7、给父元素添加伪元素

8、弹性盒，父元素display：flex，子元素align-self：center

CSS中实现水平居中

1.子父元素宽度固定，子元素设置margin：auto，并且子元素不能设置浮动，否则居中失效

2.子父元素宽度固定，父元素设置text-align：center，子元素设置display：inline-block，并且子元素不能设置浮动，否则居中失效

 

CSS中实现水平垂直居中

1、子元素相对于父元素绝对定位，子元素top，left设置50%，子元素margin-top和margin-left减去各自宽高的一半 2、子元素相对于父元素绝对定位，子元素上下左右全为0，然后设置子元素margin：auto 3、父元素设置display：table-cell vertical-align：middle，子元素设置margin：auto 4、子元素相对定位，子元素top，left值为50%，transform：translate（-50%，-50%） 5、子元素相对父元素绝对定位，子元素top，left值为50%，transform：translate（-50%，-50%） 6、父元素设置弹性盒子： display：flex； justfy-content：center ；align-item：center； justfy-content：center

实现一个函数，对js中5种主要的数据类型（Number、String、Object、Array、Boolean）进行值的赋值

方法一：

1、创建一个空变量

2、运用switch选择进行判断后赋值

3、object类型有两种情况（对象object和数组Array）

 

Cookie、sessionstorage、localStorage的区别

共同点：都是保存在浏览器端，且同源的。 区别：cookie数据始终在同源的http请求中携带（即使不需要），即cookic在浏览器和服务器间来回传递。而sessionStorage wlocalStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。

存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保特；localStorage：始终消览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口成浏览器关闭。

作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage在所有同源窗口中都是共 享的；cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。

 

session和cookie的区别

1. 存储位置不同

   cookie的数据信息存放在客户端浏览器上

   session的数据信息存放在服务器上

2. 存储内容不同

   单个cookie保存的数据<=4KB，一个站点最多保存20个cookie

   对于session来说并没有上线，但出于对服务器端的性能考虑，session内不要存放过多的东西，并设置session删除机制

3. 存储方式不同

   cookie中只能保存ASCII字符串，并需要通过编码方式存储为Unicode字符或者二进制数据

   session中能够存储任何类型的数据，包括且不限于string，integer，list，map等。

4. 隐私策略不同

   cookie对客户端是可见的，别人可以通过分析本地的cookie进行cookie欺骗，是不安全的

   session存储在服务器上，对客户端是透明的，不存在敏感信息泄露的风险

5. 有效期上不同

   开发可以通过设置cookie的属性，达到cookie长期有效的效果

   session依赖于名为jsessionid的cookie,而cookie jsessionid的过期时间默认为-1，只需要关闭窗口，该session就会失效，因而session不能达到长期有效的效果。

6. 服务器压力不同

   cookie保管在客户端，不占用服务器资源。对于并发用户十分多的网站，cookie是很好的选择

   session是保管在服务器端的，每个用户都会产生一个session。假如并发访问的用户十分多，会产生十分多的session，耗费大量的内存

7. 浏览器支持不同

   1. 客户端不支持cookie

      cookie是需要客户端浏览器支持的，假如客户端禁用了cookie，或者不支持cookie，则会话跟踪会失效。关于WAP上的应用，常规的cookie就派不上用场

      运用session需要使用URL地址重写的方式。一切用到session程序的URL都要进行URL地址重写，否则session会话跟踪还会失效。

   2. 客户端支持cookie

      cookie既能够设为本浏览器窗口以及子窗口内有效，也能够设为一切窗口内有效

      session只能在本窗口以及子窗口内有效。

8. 跨域支持不同

   cookie支持跨域名访问

   session不支持跨域名访问

 

get请求和post请求区别

1. get请求一般用于请求获取数据

   post一般用于发送数据到后台时使用

2. get请求也可传参到后台，但是其参数在浏览器的地址栏的URL中可见，隐私性、安全性较差，且参数长度有限

   post请求传递参数放在request body中，不会在url中显示，比get要安全，且参数长度无限制

3. get请求刷新浏览器或退回时没有影响

   post回退时会重新提交数据请求

4. get请求可被缓存

   post请求不会被缓存

5. get请求保留在浏览器历史记录中

   post请求不会保留在浏览器历史记录中

6. get请求可被收藏为书签

   post请求不能被收藏为书签

7. get请求只能进行URL编码

   post支持多种编码方式

8. get请求比较常见的方式是通过URL地址栏请求

   post最常见是通过form表单发送数据请求

 

get和post请求都是HTTP的请求方式，本质上来说并无区别，底层实现都是基于TCP/IP协议。但是请求的方式有很多种，于是HTTP对请求方式进行了划分和规定，于是产生了get、post处理请求的分工和区别。

get产生一个TCP数据包，post产生两个TCP数据包

对于get方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；而对于post，浏览器先发送header，服务器响应100continue，浏览器再发送data，服务器响应200 ok（返回数据）。

并不是所有浏览器都会在post中发送两次包，Firefox就只发送一次

 

jQuery的事件委托方法之间的区别

什么是事件委托？

把原来加在子元素的事件绑定在父元素身上，就是事件委派给父元素。

例：ul li

 

将事件加载到子元素上的弊端：

1. 耗费资源，每个子元素都要添加事件

2. 后期动态添加子元素，不会拥有事件

 

事件委托的好处：

1. 不再进行查询，减少了DOM操作

2. 极大地改善了代码性能，为动态添加的元素附上效果

 

$(父元素).on('click','子元素选择器',function(){
    //代码块
})

 

四个事件委托方法：

live把事件委托给了document（根节点）。document向下去寻找符合条件的元素（），不用等待document()加载结束也可以生效。

delegate可指定事件委托对象，相比于live性能更优，直接锁定指定选择器。

on事件委托对象选填，如果不填，即给自身注册事件；填了作用和delegate一致。

band只能给调用它的时候已经存在的元素绑定事件，不能给未来新增的元素绑定事件，存在局限性。

 

闭包

函数执行，形成私有的执行上下文，使内部的私有变量不受外界干扰，起到保护和保存的作用。

 

跨域请求资源

proxy代理：

request -> 后台服务器 ->前端

nginx代理

代理https协议请求，proxy首先需要信任该证书，否则请求失败。

 

CORS

最常用。后端处理数据时，添加允许跨域的相关操作。

 

jsonp

动态插入script标签，浏览器对script的资源引用没有同源限制，没有阻塞的情况下，资源加载到页面后会立即执行。

获取资源数据一般为json格式。

缺点：无法发送post请求，判断jsonp请求不容易

 

垃圾回收机制

GC Gatbage Collection

垃圾回收策略：标记清楚、引用计数

原理：垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存。

 

标记清除：GC获取根并标记，发现没有标记的进行删除，进入执行环境的不能进行删除。

 

引用计数：当声明一个变量并给该变量赋值一个引用类型的值时候，该值的技术+1；当该值赋值给另一个变量的时候，该技术+1；当该值被其他取值代的时候，该计数-1；当该计数变为0的时候，说明无法访问该值，垃圾回收机制清除该对象。

 

内存管理

内存中有什么

程序使用的所有变量和其他数据

程序的代码，包括操作系统的代码

 

内存的声明周期

申请内存 -> 使用内存 ->释放内存

 

内存分为两种

栈内存 堆内存

 

栈内存

在函数中定义的一些基本类型的变量和对象的引用变量都是在函数的栈内存中分配。在一段代码块中定义一个变量时，系统就在栈中为这个变量分配内存空间，当超过变量的作用域后，系统会自动释放掉为该变量分配的内存空间。

 

堆内存

堆内存用于存放由new创建的对象和数组。在堆中分配的内存，由虚拟机自动垃圾回收器来管理。

 

JavaScript是垃圾回收语言之一。

 

在JavaScript中分配内存

1. 定义变量并初始化

2. 通过调用函数完成分配

 

在JavaScript中使用内存

意思是读写

 

在JavaScript中释放内存

容易产生内存泄漏问题

垃圾收集器：跟踪内存分配和使用情况；局限：无法确定内存是否“不再需要”

垃圾收集算法：内存引用（依赖）

内存引用：在内存管理情况下，如果一个对象访问变量（可能是隐含的 or 显式的），则称该对象引用另一个对象。

 

内存泄漏

指不再用的内存没有被及时释放出来，导致该段内存无法被使用。

 

为什么会导致内存泄漏

无法通过js访问某个对象，而垃圾回收机制认为该对象还在被引用，因此垃圾回收机制不会释放该对象，导致该内存用法无法释放，积少成多，系统越来越卡以至于崩溃。

 

javascript中call()方法和apply()方法的区别

call()和apply()方法作用相同，动态改变运行上下文，跨作用域调用函数或方法。

区别：唯一区别在于两个方法的第二个参数，call()方法的第二个参数是依次给将要调用的函数或方法传递参数；而apply()方法的第二个参数是数组或类数组（arguments）。 例子：foo.call（this, paral.para2.para3)等价于foo.apply（this,[paral.para2,para3]）

 

什么是“use strict”？使用它的好处和坏处是什么？

”use strict”（严格模式） 是在ECMAScript5中提出来的，是为javascript定义了一种不同的解析与执行模型。在严格模式下，ECMAScript3中一些不确定的行为将得到处理，而且对某些不安全操作也会抛出错误。（参考《Javascript高级程序设计》）严格模式分为全局严格模式和局部严格模式。 好处：（1）、消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为; （2）、消除代码运行的一些不安全之处，保证代码运行的安全; （3）、提高编译器效率，增加运行退度； （4）、为未来新版本的Javascript做好铺垫。 坏处：在一个全局环境下使用严格模式，会使得非严格模式下的代码merge后可能出现问题。