JS部分面试题

JSMST

1、relative和absolute分别是相对于谁进行定位的？

1、absolute: 生成绝对定位的元素， 相对于最近一级的定位不是 static 的父元素来进行定位。
2、relative：生成相对定位的元素，相对于其在普通流中的位置进行定位。
3、fixed：（老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口或 frame 进行定位。
4、static：默认值。没有定位，元素出现在正常的流中。
5、sticky：生成粘性定位的元素，容器的位置根据正常文档流计算得出。

2、谈谈你对webpack的看法

WebPack 是一个模块打包工具，可以使用WebPack管理模块依赖，并编绎输出每个模块所需的静态文件。它能够很好地管理、打包Web开发中所用到的HTML、JavaScript、CSS以及各种静态文件（图片、字体等），让开发过程更加高效。不同类型的资源，webpack有对应的模块加载器。webpack模块打包器会分析模块间的依赖关系，最后生成优化且合并后的静态资源。
webpack的两大特色：
1）code splitting（可以自动完成）；
2）loader 可以处理各种类型的静态文件，并且支持串联操作webpack 是以commonJS的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。
webpack具有requireJs和browserify的功能，但仍有很多自己的新特性：
1） 对 CommonJS 、 AMD、ES6的语法做了兼容；
2）对js、css、图片等资源文件都支持打包；
3） 串联式模块加载器以及插件机制，让其具有更好的灵活性和扩展性，例如提供对CoffeeScript、ES6的支持；
4） 有独立的配置文件webpack.config.js；
5） 可以将代码切割成不同的chunk，实现按需加载，降低了初始化时间；
6）支持 SourceUrls 和SourceMaps，易于调试；
7） 具有强大的Plugin接口，大多是内部插件，使用起来比较灵活；
8）webpack 使用异步 IO 并具有多级缓存。这使得 webpack 很快且在增量编译上更加快。

3、Ajax过程

(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象；
(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息；
(3)设置响应HTTP请求状态变化的函数；
(4)发送HTTP请求；
(5)获取异步调用返回的数据；
(6)使用JavaScript和DOM实现局部刷新。

var xmlHttp = new XMLHttpRequest();
xmlHttp.open('GET','demo.php','true');
xmlHttp.send()
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState === 4 & xmlHttp.status=== 200){
}
}

4、渐进增强和优雅降级

渐进增强 ：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 ：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

5、HTTP和HTTPS

HTTP协议通常承载于TCP协议之上，在HTTP和TCP之间添加一个安全协议层（SSL或TSL），这个时候，就成了我们常说的HTTPS。
默认HTTP的端口号为80，HTTPS的端口号为443。
为什么HTTPS安全
因为网络请求需要中间有很多的服务器路由器的转发。中间的节点都可能篡改信息，而如果使用HTTPS，密钥在你和终点站才有。https之所以比http安全，是因为他利用ssl/tls协议传输。它包含证书，卸载，流量转发，负载均衡，页面适配，浏览器适配，refer传递等。保障了传输过程的安全性。

6、Javascript垃圾回收方法

1.标记清除（mark and sweep）

这是JavaScript最常见的垃圾回收方式，比如函数中声明一个变量，垃圾回收器将其标记为“进入环境”，当变量离开环境的时候（函数执行结束）将其标记为“离开环境”。当变量进入执行环境的时候，垃圾回收器会在运行的时候给存储在内存中的所有变量加上标记，然后去掉环境中的变量以及被环境中变量所引用的变量（闭包），在这些完成之后仍存在标记的就是要删除的变量了。

2.引用计数(reference counting)

在低版本IE中经常会出现内存泄露，很多时候就是因为其采用引用计数方式进行垃圾回收。引用计数的策略是跟踪记录每个值被使用的次数，当声明了一个变量并将一个引用类型赋值给该变量的时候这个值的引用次数就加1，如果该变量的值变成了另外一个，则这个值得引用次数减1，当这个值的引用次数变为0的时候，说明没有变量在使用，这个值没法被访问了，因此可以将其占用的空间回收，这样垃圾回收器会在运行的时候清理掉引用次数为0的值占用的空间。在IE中虽然JavaScript对象通过标记清除的方式进行垃圾回收，但BOM与DOM对象却是通过引用计数回收垃圾的，也就是说只要涉及BOM及DOM就会出现循环引用问题。

7、对前端模块化的认识&&说说你对AMD和Commonjs的理解

AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。
AMD 是提前执行，CMD 是延迟执行。
AMD推荐的风格通过返回一个对象做为模块对象，CommonJS的风格通过对module.exports或exports的属性赋值来达到暴露模块对象的目的。
CMD模块方式

define(function(require, exports,module) {
// 模块代码
});

---

CommonJS是服务器端模块的规范，Node.js采用了这个规范。CommonJS规范加载模块是同步的，也就是说，只有加载完成，才能执行后面的操作。AMD规范则是非同步加载模块，允许指定回调函数。
AMD推荐的风格通过返回一个对象做为模块对象，CommonJS的风格通过对module.exports或exports的属性赋值来达到暴露模块对象的目的。

8、js继承方式及其优缺点

1.原型链继承的缺点

一是字面量重写原型会中断关系，使用引用类型的原型，并且子类型还无法给超类型传递参数。

2.借用构造函数（类式继承）

借用构造函数没有原型，复用无从谈起。所以我们需要原型链+借用构造函数的模式，这种模式称为组合继承。

3.组合式继承

组合式继承是比较常用的一种继承方法，其思路是使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承。这样，既通过在原型上定义方法实现了函数复用，又保证每个实例都有它自己的属性。

9、关于Http 2.0你知道多少？

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

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

defer和async、动态创建DOM方式（创建script，插入到DOM中，加载完毕后callBack）、按需异步载入js。
defer并行加载js文件，会按照页面上script标签的顺序执行；
async并行加载js文件，下载完成立即执行，不会按照页面上script标签的顺序执行。

11、用过哪些设计模式？

1.工厂模式：

       主要好处就是可以消除对象间的耦合，通过使用工程方法而不是new关键字。将所有实例化的代码集中在一个位置防止代码重复。
       工厂模式解决了重复实例化的问题 ，但还有一个问题,那就是识别问题，因为根本无法搞清楚他们到底是哪个对象的实例。

function createObject(name,age,profession){//集中实例化的函数var obj = newObject();
obj.name =name;
obj.age = age;
obj.profession= profession;
obj.move =function () {
returnthis.name + ' at ' + this.age + ' engaged in ' + this.profession;
};
return obj;
}
var test1 = createObject('trigkit4',22,'programmer');//第一个实例var test2
=createObject('mike',25,'engineer');//第二个实例

2.构造函数模式

       使用构造函数的方法 ，即解决了重复实例化的问题 ，又解决了对象识别的问题，该模式与工厂模式的不同之处在于：
1）构造函数方法没有显示的创建对象 (new Object());
2）直接将属性和方法赋值给 this 对象;
3）没有 renturn 语句。

12、display:none和visibility:hidden的区别？

display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。
visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。

13、position:absolute和float属性的异同

共同点：对内联元素设置float和absolute属性，可以让元素脱离文档流，并且可以设置其宽高。
不同点：float仍会占据位置，absolute会覆盖文档流中的其他元素。

14、介绍一下box-sizing属性？

box-sizing属性主要用来控制元素的盒模型。默认值是content-box。
content-box：让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定，设置width/height属性指的是content部分的宽/高。
border-box：让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置width/height属性指的是border + padding + content
标准浏览器下，按照W3C规范对盒模型解析，一旦修改了元素的边框或内距，就会影响元素的盒子尺寸，就不得不重新计算元素的盒子尺寸，从而影响整个页面的布局。

15、选择符有哪些？

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

16、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 单选框或复选框被选中。

17、CSS3有哪些新特性？

CSS3实现圆角（border-radius），阴影（box-shadow），
对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）、 rgba

transform:rotate(9deg)
 scale(0.85,0.90)
 translate(0px,-30px) 
 skew(-9deg,0deg);//旋转,缩放,定位,倾斜

在CSS3中唯一引入的伪元素是::selection.
媒体查询，多栏布局

18、对BFC规范的理解？

BFC，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的margin会发生折叠。它决定了元素如何对其内容进行布局，以及与其他元素的关系和相互作用。

19、说说你对语义化的理解？

1）去掉或者丢失样式的时候能够让页面呈现出清晰的结构；
2）有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息；爬虫依赖于标签来确定上下文和各个关键字的权重；
3）方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
4）便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

20、Doctype作用? 严格模式与混杂模式如何区分？几种Doctype文档类型

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

---

2）严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
3）在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
4）DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

---

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

21、常见兼容性问题？

1、png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.也可以引用一段脚本处理.
2、浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
3、IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。浮动ie产生的双倍距离（IE6双边距问题：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。）

#box{ float:left; width:10px; margin:0 0 0 100px;}
这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入

4、上下margin重合问题：ie和ff都存在，相邻的两个div的margin-left和margin-right不会重合，但是margin-top和margin-bottom却会发生重合。解决方法，同时采用margin-top或者同时采用margin-bottom。
5、怪异模式问题：漏写DTD声明，Firefox仍然会按照标准模式来解析网页，但在IE中会触发怪异模式。为避免怪异模式给我们带来不必要的麻烦，最好养成书写DTD声明的好习惯。现在可以使用html5推荐的写法：

22、浮动元素引起的问题和解决办法？

浮动元素引起的问题：
（1）父元素的高度无法被撑开，影响与父元素同级的元素
（2）与浮动元素同级的非浮动元素（内联元素）会跟随其后
（3）若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构
解决方法：
1）额外标签法， <divstyle=“clear:both;”> （缺点：不过这个办法会增加额外的标签使HTML结构看起来不够简洁。）

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

2）使用after伪类
3）浮动外部元素
4）设置overflow为hidden或者auto

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

1）创建新节点

createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点

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

appendChild()
removeChild()
replaceChild()
insertBefore() //并没有insertAfter()

3）查找

getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值(IE容错能力较强，
会得到一个数组，其中包括id等于name值的)
getElementById() //通过元素Id，唯一性

24、html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

1）新特性

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；

2）移除的元素

纯表现的元素：basefont，big，center，font, s，strike，tt，u；
对可用性产生负面影响的元素：frame，frameset，noframes；

3）支持HTML5新标签：

IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，最好的方式是直接使用成熟的框架、使用最多的是html5shim框架。

4）如何区分：

DOCTYPE声明\新增的结构元素\功能元素

25、null和undefined的区别

null是一个表示”空”的对象，转为数值时为0；undefined是一个表示”空”的原始值，转为数值时为NaN。
当声明的变量还未被初始化时，变量的默认值为undefined。
null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。
undefined表示”缺少值”，就是此处应该有一个值，但是还没有定义。常见用法是：
（1）变量被声明了，但没有赋值时，就等于undefined。
（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。
（3）对象没有赋值的属性，该属性的值为undefined。
（4）函数没有返回值时，默认返回undefined。
null表示”没有对象”，即该处不应该有值。常见用法是：
（1） 作为函数的参数，表示该函数的参数不是对象。
（2） 作为对象原型链的终点。

26、new操作符具体干了什么呢?

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

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

27、javascript对象的几种创建方式

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

28、javascript继承的6种方法

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

29、GET和POST的区别，何时使用POST？

GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符
POST：一般用于修改服务器上的资源，对所发送的信息没有限制。
GET方式需要使用Request.QueryString来取得变量的值，而POST方式通过Request.Form来获取变量的值，也就是说Get是通过地址栏来传值，而Post是通过提交表单来传值。
然而，在以下情况中，请使用 POST 请求：无法使用缓存文件（更新服务器上的文件或数据库）向服务器发送大量数据（POST 没有数据量限制）发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠。

30、HTTP状态码

100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息。
200 OK 正常返回信息。
201 Created 请求成功并且服务器创建了新的资源。
202 Accepted 服务器已接受请求，但尚未处理。
301 Moved Permanently 请求的网页已永久移动到新位置。
302 Found 临时性重定向。
303 SeeOther 临时性重定向，且总是使用 GET 请求新的 URI。
304 Not Modified 自从上次请求后，请求的网页未修改过。
400 BadRequest 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
401 Unauthorized 请求未授权。
403Forbidden 禁止访问。
404 NotFound 找不到如何与 URI 相匹配的资源。
500 InternalServer Error 最常见的服务器端错误。
503 ServiceUnavailable 服务器端暂时无法处理请求（可能是过载或维护）。