1.Doctype作用？严格模式与混杂模式有什么区别？
<!DOCTYPE>声明叫做文件类型定义（DTD），声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。
怪异模式（即兼容模式）服务于旧式规则，严格模式服务于标准规则。
标准模式（浏览器按W3C标准解析执行代码）/怪异模式（兼容老页面，使用浏览器自己的方法解析执行代码，使用一种比较宽松的向后兼容的方式来显示页面）。
2.常用的行内元素有哪些？块级元素有哪些？空(void)元素有哪些？
行内元素：a、b、span、img、input、strong、select、label、em、button、textarea
块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img
鲜为人知的是：<area><base><col><command><embed><keygen><param><source><track><wbr>
3.link和@import的区别？
1.从属关系区别：@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
2.加载顺序区别：加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
3.兼容性区别：@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
4.DOM可控性区别：可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。
5.权重区别：link引入的样式权重大于@import引入的样式。
CSS 权重优先级顺序简单表示为：
!important > 行内样式(内联样式) > ID > 类、伪类、属性 > 标签名 > 继承 > 通配符
4.HTML5有哪些新特性、移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？
绘画 canvas;
用于媒介回放的 video 和 audio 元素;
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;
sessionStorage 的数据在浏览器关闭后自动删除;
语意化更好的内容元素，比如 article、footer、header、nav、section;
表单控件，calendar、date、time、email、url、search;
新的技术webworker, websockt, Geolocation;
移除的元素
纯表现的元素：basefont，big，center，font，s，strike，tt，u；
对可用性产生负面影响的元素：frame，frameset，noframes；
HTML5新标签的浏览器兼容问题是浏览器不能识别HTML5新标签而不能使用，解决办法有两种：
方法1：实现标签被识别
通过document.createElement（tagName）方法即可让浏览器识别新标签，浏览器支持新标签后，还可以为新标签添加CSS样式。
方法2：JavaScript解决方案
A）使用html5shim：
在<head>中调用以下代码：
<!--[if lt IE 9]>
<script>src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
也可以直接把这个文件下载到自己的网站上，但这个文件必须在head标签中调用。
B）使用kill IE6
在</body>之前调用以下代码：
<!--if lte IE6]>
<scriptsrc="http://letskillie6.googlecode.com/svn/trunk/letskillie6.zh_CN.pack.js"></script>
<![endif]-->
6.iframe有哪些缺点？
优点:
重载页面时不需要重载整个页面，只需要重载页面中的一个框架页(减少了数据的传输，加快了网页下载速度);
技术易于掌握，使用方便，使用者众多，可主要应用于不需搜索引擎来搜索的页面;方便制作导航栏 ;
缺点:
页面样式调试麻烦，出现多个滚动条；浏览器的后退按钮失效；过多会增加服务器的HTTP请求；小型的移动设备无法完全显示框架；产生多个页面，不易管理；不容易打印；代码复杂，无法被一些搜索引擎解读。
1、在网页中使用框架结构最大的弊病是搜索引擎的“蜘蛛”程序无法解读这种页面。当“蜘蛛”程序遇到由数个框架组成的网页时，它们只看到框架而无法找到链接，因此它们会以为该网站是个死站点，并且很快转身离去。对一个网站来说这无异于一场灾难。
2、框架结构有时会让人感到迷惑，特别是在几个框架中都出现上下、左右滚动条的时候。这些滚动条除了会挤占已经非常有限的页面空间外，还会分散访问者的注意力。访问者遇到这种网站往往会立刻转身离开。他们会想，既然你的主页如此混乱，那么网站的其他部分也许更不值得浏览。
3、链接导航问题。使用框架结构时，你必须保证正确设置所有的导航链接，如不然，会给访问者带来很大的麻烦。比如被链接的页面出现在导航框架内，这种情况下访问者便被陷住了，因为此时他没有其他地方可去。
7.描述一下cookies，sessionStorage和localStorage的区别？
essionStorage 和 localStorage 是HTML5 Web Storage API 提供的，可以方便的在web请求之间保存数据。有了本地数据，就可以避免数据在浏览器和服务器间不必要地来回传递。
sessionStorage、localStorage、cookie都是在浏览器端存储的数据，其中sessionStorage的概念很特别，引入了一个“浏览器窗口”的概念。sessionStorage是在同源的同窗口（或tab）中，始终存在的数据。也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口后，sessionStorage即被销毁。同时“独立”打开的不同窗口，即使是同一页面，sessionStorage对象也是不同的。
共同点：都是保存在浏览器端，且同源的。
区别：
cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。
Web Storage 的 api 接口使用更方便。
8.介绍一下CSS的盒子模型？
盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)
有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 padding;
9.CSS选择符有哪些？哪些属性可以继承？优先级是怎么样的？
id选择器( # myid) ;类选择器(.myclassname) ;标签选择器(div, h1, p) ；相邻选择器(h1 + p) ；子选择器(ul < li) ；后代选择器(li a) ；通配符选择器( * ) ；属性选择器(a[rel = “external”]) ；伪类选择器(a: hover, li: nth - child)；
可继承的样式: font-size font-family color, UL LI DL DD DT;
不可继承的样式:border padding margin width height ;
10.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(n) 选择属于其父元素的第n个子元素的每个<p>元素。
p:nth-last-child(n) 选择属于其父元素的倒数第n个子元素的每个<p>元素。
p:nth-of-type(n) 选择属于其父元素第n个<p>元素的每个<p>元素。
p:nth-last-of-type(n) 选择属于其父元素倒数第n个<p>元素的每个<p>元素。
p:last-child 选择属于其父元素最后一个子元素的每个<p>元素。
p:empty 选择没有子元素的每个<p>元素（包括文本节点）。
p:target 选择当前活动的<p>元素。
:not(p) 选择非<p>元素的每个元素。
:enabled 控制表单控件的可用状态。
:disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中。
HTML5的form如何关闭自动完成功能？
给不想要提示的 form 或下面某个 input 设置为 autocomplete = off`。
如何实现浏览器内多个标签页之间的通信？（阿里）
调用 localStorage、cookies 等本地存储方式
webSocket 如何兼容低浏览器？（阿里）
Adobe Flash Socket
ActiveX HTMLFile（IE）
基于 multipart 编码发送 XHR
基于长轮询的 XHR
11.如何居中一个浮动元素？
容器的宽高 宽800 高 600 的层
设置层的外边距
.div { Width:800px ; height:600px;//高度可以不设 margin: -300px 0 0 -400px; position:relative;相对定位 background-color:pink;//方便看效果 left:50%; top:50%;}
12.relative和absolute定位原点是？
absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
fixed (老IE不支持) 生成绝对定位的元素,相对于浏览器窗口进行定位。
relative 生成相对定位的元素,相对于其正常位置进行定位。
static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right z-index 声明)。
inherit 规定从父元素继承 position 属性的值。
13.CSS3有哪些新特性？
实现圆角（border-radius），阴影（box-shadow），边框图片（border-image）；
对文字加特效（text-shadow），强制文本换行（word-wrap），线性渐变（linear-gradient）；
实现旋转transform:rotate(90deg),缩放scale(0.85,0.90),translate(0px,-30px)定位,倾斜skew(-9deg,0deg);
增加了更多的CSS选择器、多背景、rgba()；
唯一引入的伪元素是::selection ；
实现媒体查询(@media)，多栏布局（flex）。
14.常遇到的CSS的兼容性有哪些？原因，解决方法是什么？
1.PNG24位的图片在ie6浏览器上出现背景，解决方案是做成PNG8
2.浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}
3.ie6双边距bug:块属性标签float后，又有横行的margin情况下，在IE6显示的margin比设置的大
4.IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute()获取自定义的属性；在FireFox下，只能使用getAttribute()获取自定义属性；解决方法：统一通过getAttribute()获取自定义属性
5.IE下，even对象有x,y属性，但是没有pageX,pageY属性；在Firefox下，even对象有pageX,pageY属性，但是没有x,y属性；解决方法：(条件注释)缺点是在IE浏览器下可能会增加额外的HTTP请求数
6.Chrome中文界面下默认会将小于12px的文本强制按照12px显示，可通过加入CSS属性-webkit-text-size-adjust:none解决
15.为什么要初始化CSS样式？
因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化。
最简单的初始化方法就是: {padding: 0; margin: 0;} (不建议)
16.JavaScript原型，原型链是什么？有什么特点？
1.JS中每个函数都存在有一个原型对象属性prototype。并且所有函数的默认原型都是Object的实例。
2.每个继承父函数的子函数的对象都包含一个内部属性_proto_。该属性包含一个指针，指向父函数的prototype。若父函数的原型对象的_proto_属性为再上一层函数。在此过程中就形成了原型链。
3.原型链实现了继承。原型链存在两个问题：a 包含引用类型值的原型属性会被所有实例共享。b 在创建子类型时，无法向超类型的构造函数中传递参数。
17.null,undefined的区别？
null表示”没有对象”,即该处不应该有值。典型用法是:
(1) 作为函数的参数,表示该函数的参数不是对象。(2) 作为对象原型链的终点。Object.getPrototypeOf(Object.prototype)// null
undefined表示”缺少值”,就是此处应该有一个值,但是还没有定义。典型用法是:
(1)变量被声明了,但没有赋值时,就等于undefined。(2) 调用函数时,应该提供的参数没有提供,该参数等于undefined。(3)对象没有赋值的属性,该属性的值为undefined。(4)函数没有返回值时,默认返回undefined。var i;i // undefined function f(x){console.log(x)}f() // undefined var o = new Object();o.p // undefined var x = f();x // undefined
18.js的基本数据类型有哪些？
数字number； 字符串string； 布尔boolean； 对象object ；undefined；数组；Null
19.JavaScript如何实现继承？
通过原型和构造器；构造函数绑定；prototype模式；直接继承prototype；利用空对象作为中介；拷贝继承；
[“1”, “2”, “3”].map(parseInt) 答案是多少?
[1, NaN, NaN] 因为 parseInt 需要两个参数 (val, radix) 但 map 传了 3 个 (element, index, array) ；
Node.js的适用场景?——JS,服务器
高并发、聊天、实时消息推送
IE与火狐的事件机制有什么区别? 如何阻止冒泡?
事件处理机制:IE是事件冒泡、火狐是 事件捕获;
ev.stopPropagation();
20.谈谈this对象的理解？
this是js的一个关键字,随着函数使用场合不同,this的值会发生变化。
但是有一个总原则,那就是this指的是调用函数的那个对象。
this一般情况下:是全局对象Global。 作为方法调用,那么this就是指这个对象
21.什么是闭包(closure）,为什么要用它？
闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域，将函数内部的变量和方法传递到外部。
闭包的特性：
1.函数内再嵌套函数
2.内部函数可以引用外层的参数和变量
3.参数和变量不会被垃圾回收机制回收
<script>
function outer(){
var num=0;//内部变量
return function add(){//通过return返回add函数，就可以在outer函数外访问了。
num++;//内部函数有引用，作为add函数的一部分了
console.log(num);
};
}
var func1=outer();//
func1();//实际上是调用add函数， 输出1
func1();//输出2
var func2=outer();
func2();// 输出1
func2();// 输出2
</script>
22.js延迟加载的方式有哪些？
defer 属性；async 属性；动态创建DOM方式；使用jQuery的getScript方法；使用setTimeout延迟方法；让JS最后加载；
23.document.write和innerHTML的区别？
document.write是直接写入到页面的内容流，如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数，会导致页面被重写。
innerHTML则是DOM页面元素的一个属性，代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。如果想修改document的内容，则需要修改document.documentElement.innerElement,且innerHTML将内容写入某个DOM节点，不会导致页面全部重绘。
document.write是重写整个document, 写入内容是字符串的html
innerHTML是HTMLElement的属性，是一个元素的内部html内容
所以两者都可向页面输出内容,innerHTML比document.write更灵活，而innerHTML很多情况下都优于document.write，其原因在于其允许更精确的控制要刷新页面的那一个部分。
24. .call()和.apply()的区别？
call 的第二个参数可以是任意类型,而apply的第二个参数必须是数组。
相同点：这两个方法的作用是一样的。
都是在特定的作用域中调用函数，等于设置函数体内this对象的值，以扩充函数赖以运行的作用域。
一般来说，this总是指向调用某个方法的对象，但是使用call()和apply()方法时，就会改变this的指向。
不同点：接收参数的方式不同。
apply()方法 接收两个参数，一个是函数运行的作用域（this），另一个是参数数组。
语法：apply([thisObj [,argArray] ]);，调用一个对象的一个方法，2另一个对象替换当前对象。
说明：如果argArray不是一个有效数组或不是arguments对象，那么将导致一个
TypeError，如果没有提供argArray和thisObj任何一个参数，那么Global对象将用作thisObj。
call()方法 第一个参数和apply()方法的一样，但是传递给函数的参数必须列举出来。
语法：call([thisObject[,arg1 [,arg2 [,...,argn]]]]);，应用某一对象的一个方法，用另一个对象替换当前对象。
说明： call方法可以用来代替另一个对象调用一个方法，call方法可以将一个函数的对象上下文从初始的上下文改变为thisObj指定的新对象，如果没有提供thisObj参数，那么Global对象被用于thisObj。
25.“==”和“===”有什么不同？
== equality 等同，=== identity 恒等。
==， 两边值类型不同的时候，要先进行类型转换，再比较。
==，不做类型转换，类型不同的一定不等。
===
1、如果类型不同，就[不相等]
2、如果两个都是数值，并且是同一个值，那么[相等]；(！例外)的是，如果其中至少一个是NaN，那么[不相等]。（判断一个值是否是NaN，只能用isNaN()来判断）
3、如果两个都是字符串，每个位置的字符都一样，那么[相等]；否则[不相等]。
4、如果两个值都是true，或者都是false，那么[相等]。
5、如果两个值都引用同一个对象或函数，那么[相等]；否则[不相等]。
6、如果两个值都是null，或者都是undefined，那么[相等]。
==
1、如果两个值类型相同，进行 === 比较。
2、如果两个值类型不同，他们可能相等。根据下面规则进行类型转换再比较：
a、如果一个是null、一个是undefined，那么[相等]。
b、如果一个是字符串，一个是数值，把字符串转换成数值再进行比较。
c、如果任一值是 true，把它转换成 1 再比较；如果任一值是 false，把它转换成 0 再比较。
d、如果一个是对象，另一个是数值或字符串，把对象转换成基础类型的值再比较。对象转换成基础类型，利用它的toString或者valueOf方法。 js核心内置类，会尝试valueOf先于toString；例外的是Date，Date利用的是toString转换。非js核心的对象，令说（比较麻 烦，我也不大懂）
e、任何其他组合，都[不相等]。
26.写一个js程序在jQuery中将数组转化为json字符串，然后在转化回来。
$.fn.stringifyArray = function(array) {
return JSON.stringify(array)； //JSON.stringify()方法 将数组，对象转成json。
}
$.fn.parseArray = function(array) {
return JSON.parse(array); //JSON.parse 把一个json字符串解析成对象。
}
$("").stringifyArray(array);
对浏览器内核的理解
主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
（1）渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
（2）JS引擎则：解析和执行javascript来实现网页的动态效果。
最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。
对Node的优点和缺点提出自己的看法?
(优点)因为Node是基于事件驱动和无阻塞的,所以非常适合处理并发请求,
因此构建在Node上的代理服务器相比其他技术实现(如Ruby)的服务器表现要好得多。
此外,与Node代理服务器交互的客户端代码是由javascript语言编写的,
因此客户端和服务器端都用同一种语言编写,这是非常美妙的事情。
(缺点)Node是一个相对新的开源项目,所以不太稳定,它总是一直在变,
而且缺少足够多的第三方库支持。看起来,就像是Ruby/Rails当年的样子。
一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么?
查找浏览器缓存
DNS解析、查找该域名对应的IP地址、重定向(301)、发出第二个GET请求
进行HTTP协议会话
客户端发送报头(请求报头)
服务器回馈报头(响应报头)
html文档开始下载
文档树建立,根据标记请求所需指定MIME类型的文件
文件显示
浏览器这边做的工作大致分为以下几步:
加载:根据请求的URL进行域名解析,向服务器发起请求,接收文件(HTML、JS、CSS、图象等)。
解析:对加载到的资源(HTML、JS、CSS等)进行语法解析,建议相应的内部数据结构(比如HTML的DOM树,JS的(对象)属性表,CSS的样式规则等等)
扫一扫
1511
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
