搜集整理的前端面试题1

ゝ一世哀愁。 2022-07-15 00:28 185阅读 0赞

**1.    Doctype作用？标准模式与兼容模式各有什么区别?**

（1）、<!DOCTYPE>声明位于位于HTML文档中的第一行，处于<html> 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

（2）、标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

**2.    HTML5 为什么只需要写 <!DOCTYPE HTML>？**

HTML5 不基于 SGML(标准通用语言)，因此不需要对DTD(文档类型定义)进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；

而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

**3.    行内元素有哪些？块级元素有哪些？空(void)元素有那些？**

（1）行内元素有：a b span img input select strong（强调的语气）

（2）块级元素有：div ul ol li dl dt dd h1 ~h6 p

（3）常见的空元素：<br> <hr> <img> <input> <link><meta>

鲜为人知的是：

替换元素：img、input、textarea、select、object都是替换元素。这些元素往往没有实际的内容，即是一个空元素。

非替换元素：大多数的元素都是非替换元素，如p

**4.    页面导入样式时，使用link和@import有什么区别？**

（1）link属于XHTML标签；@import是CSS提供的，只能用于加载CSS;

（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

（3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;

（4）dom控制样式差别，javascript控制dom去改变样式的时候，只能用link标签

**5.    浏览器的内核分别是什么?**

IE浏览器的内核Trident，     -ms-

Firefox的内核Gecko           -moz-

Chrome和safari的内核webkit  \-webkit-

Opera用的是presto引擎，后改为webkit引擎；  Opera早期浏览器  -o-

**6.    常见的兼容性问题？**

(1) 浏览器默认的margin和padding不同。解决方案是加一个全局的\*\{margin:0;padding:0;\}来统一。

(2) IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。     块+float+横向margin

浮动ie产生的双倍距离 \#box\{ float:left; width:10px; margin:0 0 0 100px;\};这种情况之下IE会产生20px的距离

解决方案是在float的标签样式控制中加入 \_display:inline;将其转化为行内属性。(\_这个符号只有ie6会识别)

(3图片默认有间距,几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。

解决方案：使用float属性为img布局

备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。

(4) 一个父标签与几个子标签嵌套，父标签不浮动，子标签float，子标签不撑开父的高度。

解决方法：a 在子标签最后清浮动\{<divstyle="height:0;clear:both;">&nbsp;</div>\}

b 父标签添加\{overflow：hidden；\}

c 给父标签设置高度

(5) Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性-webkit-text-size-adjust: none;

(6) 超链接访问过后hover样式就不出现了

被点击访问过的超链接样式不在具有hover和active了

解决方法是改变CSS属性的排列顺序:L-V-H-A: a:link \{\} a:visited \{\} a:hover \{\} a:active \{\}

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

HTML5 增加了 video 和 audio 元素

本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；

sessionStorage 的数据在浏览器关闭后自动删除

语意化更好的内容元素，比如 article、footer、header、nav、section

表单控件，calendar、date、time、email、url、search

新的技术webworker,websockt, Geolocation

section:页面中一个内容区块

article：页面中和上下文不相关的独立内容

aside：aritle元素的内容之外，与aritle元素内容相关的辅助信息

header：页面中一个内容区块或整个页面的标题

hgroup：整个页面或页面中一个内容区块的标题进行组合

footer：整个页面或者页面中一个内容区块的脚注

nav：页面中的导航链接部分

figure：一段独立的流内容，一般表示文档主体流内容的一个独立单元

embed：插入各种多媒体

mark：需要突出显示或高亮显示的文字

progress：运行中的进程

canvas：图形，比如图表和其他图像

command：表示命令按钮，比如单选按钮，复选框或按钮

detail：用户要求得到并且可以得到的细节信息

datalist：可选数据列表

keygen：生成秘钥

output：不同类型的输出，比如脚本的输出

source：元素的媒介元素，定义媒介资源。

**移除的元素**

纯表现的元素：basefont，big，center，font, s，strike，tt，u；

对可用性产生负面影响的元素：frame，frameset，noframes；

支持HTML5新标签：

IE8/IE7/IE6支持通过document.createElement方法产生的标签， 可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式：

当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

<!--\[if ltIE 9\]>

<!\[endif\]-->

如何区分： DOCTYPE声明\\新增的结构元素\\功能元素

**8.    语义化的理解？**

用正确的标签做正确的事情！

html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；

在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。

搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于SEO。

使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

**9.    iframe有那些优缺点？**

优点：1. 解决加载缓慢的第三方内容如图标和广告等的加载问题

2. Security sandbox

3. 并行加载脚本

缺点：1. iframe会阻塞主页面的Onload事件

2. 即时内容为空，加载也需要时间

3. 没有语意，使用ifame框架的弊端是无法被搜索引擎所爬行抓取；

**10. HTML5的form如何关闭自动完成功能？**

给不想要提示的 form设置为 autocomplete=off。

**11. 如何实现浏览器内多个标签页之间的通信?**

调用localstorge、cookies等本地存储方式

**12. webSocket如何兼容低浏览器？**

Adobe Flash Socket 、 ActiveX HTMLFile(IE) 、基于 multipart 编码发送 XHR 、基于长轮询的 XHR

**13. CSS的盒子模型？**

（1）有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 pading;

（2）盒模型：内容(content)、填充(padding)、边界(margin)、边框(border).

**14. CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？**

1.id选择器（ \# myid）

2.类选择器（.myclassname）

3.标签选择器（div, h1, p）

4.相邻选择器（h1 + p）

5.子选择器（ul > li）

6.后代选择器（li a）

7.通配符选择器（ \* ）

8.属性选择器（a\[rel ="external"\]）

9.伪类选择器（a: hover, li:nth - child）

可继承的样式： font-size font-family color, UL LI DL DD DT;

不可继承的样式：border padding margin width height ;

优先级就近原则，同权重情况下样式定义最近者为准;

载入样式以最后载入的定位为准;

优先级为: !important >  id >class > tag      important 比 内联优先级高

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

**15. 如何居中div？如何居中一个浮动元素？**

（1）给一个已知宽度的元素居中

div\{ width:200px;   margin:0 auto;   \}

（2）居中一个浮动的元素

<ul>

</ul>

</div>

.pagination \{

float: left;

width: 100%;

overflow: hidden;

position: relative;

.pagination ul \{

clear: left;

float: left;

position: relative;

left: 50%;/\*整个分页向右边移动宽度的50%\*/

text-align: center;

.pagination li \{

line-height: 25px;

margin: 0 5px;

display: block;

float: left;

position: relative;

right: 50%;/\*将每个分页项向左边移动宽度的50%\*/

(3)绝对定位实现一个已知宽度元素的居中

.element \{

width: 600px; height:400px;

position: absolute; left:50%; top: 50%;

margin-top: -200px;    /\* 高度的一半 \*/

margin-left: -300px;    /\* 宽度的一半 \*/

使用css3中的translate,transform中translate偏移的百分比值是相对于自身大小的

.element \{

width: 600px; height:400px;

position: absolute; left:50%; top: 50%;

transform: translate(-50%,-50%);    /\* 50%为自身尺寸的一半 \*/

(4)绝对定位实现一个未知宽度的元素居中

.pagination \{

position: relative;

.pagination ul \{

position: absolute;

left: 50%;//列表的元素向右移动50%

.pagination li \{

line-height: 25px;

margin: 0 5px;

float: left;

position: relative;/\*注意，这里不能是absolute，大家懂的\*/

right: 50%;//列表项向左移动一半

** 水平居中和垂直居中：**

** ** 水平居中（text-align）块级元素（margin:0 auto;）

垂直居中：vertical-align:middle;

父元素高度不确定的文本，图片，块级元素的竖直居中：给父元素设置相同的上下边距实现

父元素高度确定的单行文本垂直居中：line-height值与父元素的高度值相同

**16. 列出display的值，说明他们的作用。position的值，relative和absolute定位原点是？**

（1） block 像块类型元素一样显示。

none 缺省值。像行内元素类型一样显示。

inline-block 像行内元素一样显示，但其内容像块类型元素一样显示。

list-item 像块类型元素一样显示，并添加样式列表标记。

（2）static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。

fixed （老IE不支持）相对于浏览器窗口固定，即使窗口滚动它也不会移动。与文档流无关，不占空间

relative：相对于原来的位置，原来的位置仍保留，移动元素会导致覆盖其他框。

absolute：相对于最近已经定位的元素；

inherit 规定从父元素继承position 属性的值。

**17. CSS3有哪些新特性？**

边框：border-radius（圆角），box-shadow（阴影），border-image

文本效果：text-shadow（文本阴影），

text-overflow：clip         （修剪文本）， ellipsis         （显示省略符号来代表被修剪的文本）。     string（使用给定的字符串来代表被修剪的文本）

word-wrap：normal（只在允许的断字点换行）；break-word（在长单词或 URL 地址内部进行换行）

word-break：（normal）使用浏览器默认的换行规则；break-all（允许在单词内换行）；keep-all（只能在半角空格或连字符处换行）

转换：transform    过渡：transition

@keyframes创建动画，需要把它绑定到一个选择器

多列：column-count，column-gap

resize：指定一个元素是否应该由用户去调整大小

**box-sizing**：content-box（default），border-box，padding-box。

content-box，border和padding不计算入width之内

padding-box，padding计算入width内

border-box，border和padding计算入width之内，其实就是怪异模式了~

CSS3 弹性盒子(FlexBox)\*\*\*

**18. css定义的权重**

以下是权重的规则：标签的权重为1，class的权重为10，id的权重为100，以下例子是演示各种定义的权重值：

/\*权重为1\*/

div\{

/\*权重为10\*/

.class1\{

/\*权重为100\*/

\#id1\{

/\*权重为100+1=101\*/

\#id1 div\{

/\*权重为10+1=11\*/

.class1 div\{

/\*权重为10+10+1=21\*/

.class1 .class2 div\{

如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现

**19. 如果需要手动写动画，你认为最小时间间隔是多久，为什么？**

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms

**20. display:inline-block 移除空格？**

让列表的结束标签与下一个列表的开始标签连在一起，

**使用margin负值、使用font-size:0**、letter-spacing、word-spacing

**letter-spacing可以**控制文字间的水平距离的，**设置为负值**

**21. 说几条写JavaScript的基本规范？**

1.不要在同一行声明多个变量。

2.请使用 ===/!==来比较true/false或者数值

3.使用对象字面量替代new Array这种形式

4.不要使用全局函数。

5.switch语句必须带有default分支

6.函数不应该有时候有返回值，有时候没有返回值。

7.for循环必须使用大括号

8.If语句必须使用大括号

9.for-in循环中的变量 应该使用var关键字明确限定作用域，从而避免作用域污染。

**22.  eval是做什么的？**

它的功能是把对应的字符串解析成JS代码并运行；

应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。

eval("x=10;y=20;document.write(x\*y)")  //200

**23. Node.js的适用场景？**

高并发、聊天、实时消息推送

**24. 介绍js的基本数据类型。**

boolean，number, string, null ,undefined, object

**25. 如何创建一个对象? **

工厂模式，构造函数模式，原型模式，组合使用构造函数和原型模式，动态原型模式，寄生构造函数模式，稳妥构造函数模式

（1）     工厂模式

function createPerson(name)\{

var o=new Object();

o.name=name;

o.sayName=function()\{

alert(this.name);

return o;

var person=createPerson(“lwg”);

(2)构造函数模式

functionPerson(name) \{

this.name = name;

this.sing = function() \{alert(this.name); \};

var person=newPerson(“lwg”);

(3)  原型模式

function Person()\{\}

Person.prototype.name=”lwg”;

Person.prototype.sayName=function()\{

alert(this.name);

var person=newPerson();

(4)组合使用构造函数和原型模式

function Person(name)\{

this.name=name;    //构造函数用于定义实例属性

Person.prototype=\{  //原型模式定义方法和共享属性

constructor:Person,

sayName:function ()\{

alert(this.name);

\}   \}

(5) 动态原型模式

functionPerson(name)\{

this.name=name;

if(typeof this.sayName!=”function”)\{

Person.prototype.sayName=function ()\{

Person.prototype.sayName=function()\{

alert(this.name);

\}  \} \}   \}

(6)寄生构造函数模式   函数的作用仅仅是封装创建对象的代码，然后返回新对象

functionPerson(name)\{

var o=new Object();

o.name=name;

o.sayName=function()\{

alert(this.name);  \} ;

rerurn o; \}

var person=newPerson(“lwg”);    person.sayName();

(7) 稳妥构造函数模式

functionPerson(name)\{

var o=new object();

o.sayName=function()\{

alert(name);

\} ;

return o; \}

varperson=Person(“lwg”);   person.sayName();

**26. 谈谈This对象的理解**

this是js的一个关键字，随着函数使用场合不同，this的值会发生变化。

但是有一个总原则，那就是this指的是调用函数的那个对象。

this一般情况下：是全局对象Global。作为方法调用，那么this就是指这个对象

通过call和apply可以重新定义函数的执行环境，即this的指向

**27. 事件是？IE与火狐的事件机制有什么区别？如何阻止冒泡？**

我们在网页中的某个操作（有的操作对应多个事件）。例如：当我们点击一个按钮就会产生一个事件。是可以被 JavaScript 侦测到的行为。

事件处理机制：IE是事件冒泡、火狐是事件捕获；

ev.stopPropagation();

事件流的三个阶段：事件捕获阶段处于目标阶段 事件冒泡阶段

**28. new操作符具体干了什么呢?**

1、创建一个新对象。

2、将构造函数的作用域赋给新对象（this指向新对象）

3、执行构造函数的代码，为新对象添加属性

4 返回新对象

**29. Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是hasOwnProperty**

**30. JSON 的了解？**

JSON(JavaScript Object Notation) 是一种**轻量级的数据交换格式**。它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小

JSON中对象通过“\{\}”来标识，一个“\{\}”代表一个对象，如\{“AreaId”:”123”\}，对象的值是键值对的形式（key：value）。\{"age":"12", "name":"back"\}

**31.  js延迟加载的方式有哪些？**

defer和async、动态创建DOM方式（用得最多）、通过ajax下载js脚本，动态添加script节点，通过监听onload事件，动态添加script节点，按需异步载入js

**32. 如何解决跨域问题?**

**跨域：**域名，协议，端口一个不同，则是不同的域

**常用的方法：**document.domain+iframe设置，JSONP，window.name，HTML5中的window.postMessage

（1）document.domain+iframe的设置

对于**主域相同而子域不同**的例子，可以通过设置document.domain的办法来解决。具体的做法是可以在http://www.a.com/a.html和http://script.a.com/b.html两个文件中分别加上document.domain= ‘a.com’；然后通过a.html文件中创建一个iframe，去控制iframe的contentDocument，这样两个js文件之间就可以“交互”了。

[**www.a.com上的a.html**][www.a.com_a.html]

**<iframe src=”** [ http://script.a.com/b.html][http_script.a.com_b.html]**” id=”iframe” οnlοad=”test()”></iframe>**

**<script>**

document.domain = 'a.com';

functiontest()\{

alert(document.getElementById(‘iframe’).contentWindow);

\};

**</script>**

**script.a.com上的b.html**

document.domain = 'a.com';

document.domain的设置是有限制的，只能把document.domain设置成自身或者更高一级的父域，且主域必须相同。例如a.b.example.com的domain只能设置成a.b.example.com，b.example.com，example.com中的一个

（2）    JSONP

通过script标签引入一个js文件，这个js文件载入成功后，会执行url参数中指定的函数，并且把需要的json数据作为参数传入

比如a.html需要通过ajax获取不同域上的json数据，假设这个json数据是[http://example.com/data.php][http_example.com_data.php]

**a.html中的代码如下：**

functiondosomething(jsondata)\{

//获取json数据

</script>

//通过这个得到js文件，并且它的参数是需要的json数据

因为当做js文件来引入，所以example.com返回一个能执行的js文件

<? php

$callback=$\_GET\[‘callback’\]; //得到回调函数名

$data=array(‘a’,’b’,’c’);  //要返回的数据

echo $callback.’(’json\_encode($data).’)’; //输出

**jQuery实现jsonp操作**：

$getJSON(‘http://example.com/data.php?callback=?’,function(jsondata)\{

//处理获得的json数据

\});

</script>

jquery会自动生成一个全局函数来替换callback=?中的问号，之后获取到数据又自动销毁。$getJSON会自动判断是否跨域，不跨域的话，调用普通的ajax方法，跨域的话，异步加载js文件调用jsonp回调函数

（3）    window.name

在一个窗口的生命周期内，窗口载入的所有页面都共享一个window.name，每个页面对window.name都有读写权限。window.name是持久存在一个窗口载入过的所有页面中，不会因为新的页面载入而重置

比如有一个[www.example.com/a.html页面，需要通过a.html页面的js][www.example.com_a.html_a.html_js]获取另一个位于不同域上的页面[www.cnblogs.com/data.html][www.cnblogs.com_data.html]里的数据

**data.html页面里，给当前的window.name设置一个a.html页面想要得到的数据值**

window.name=’页面a需要的数据’；

</script>

**想要a.html不跳转也能得到data.html里的数据，在a.html页面中使用一个隐藏的iframe,由iframe去获取data.html的数据，然后a.html再去得到iframe获取到的数据**

function getData()\{

var iframe=docunment.getElementById(“iframe”);

iframe.οnlοad=function()\{

var data=iframe.contentWindow.name; //获取iframe的window.name,

alert(data);

iframesrc=’b.html’;//和a.htm同源的任何页面，目的是让a访问到iframe

（4）    HTML5 的window.postMessage方法实现跨域

window.postMessage(message,targetOrigin)可以用来向其他window对象发消息，无论这个window对象是同源的还是不同源的。

第一个参数message是要发送的消息，类型是字符串。第二个参数是限定接收消息的那个window对象所在域。如果不限定域，可以使用通配符\*

要接收消息的window对象，可以监听自身的message事件获取穿过来的消息，消息内容存储在该事件对象的data属性中

**页面[http://test.com/a.html][http_test.com_a.html]**

function onLoad()\{

var iframe=docunment.getElementById(“iframe”);

var win=iframe.contentWindow;//获取window对象

win.postMessage(‘来自页面a的消息’，’\*’);

</script>

**页面b.html的代码**

window.onmessage=function(e)\{

e=e|evevt;//获取事件对象

alert(e.data);

</script>

**33.  documen.write和innerHTML的区别**

document.write是直接将内容写入页面的内容刘，会导致页面全部重绘，innerHTML将内容写入某个DOM节点，不会导致页面全部重绘。document.write只能重绘整个页面；innerHTML可以重绘页面的一部分

document.write是直接写入到页面的内容流，如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数，会导致页面被重写。

innerHTML则是DOM页面元素的一个属性，代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。如果想修改document的内容，则需要修改document.documentElement.innerElement。

**34. .call() 和 .apply() 的区别？**

两个函数都是用来改变this指向的，call的第二个参数是参数依次传递，apply传递的第二个参数是参数数组

fuction add(c,d)\{  return this.a+this.b+c+d;  \}

var num=\{a:1,b:3\};

add.call(num,5,7);//16

add.apply(num,\[10,20\]);//34

**35. 那些操作会造成内存泄漏？**

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。

垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。

setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。

闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

**36. 你有哪些性能优化的方法？**

（1）减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存，图片服务器。

（2）前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数

（3）用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。

（4）当需要设置的样式很多时设置className而不是直接操作style。

（5）少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。

（6）避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。

（7）图片预加载，将样式表放在顶部，将脚本放在底部  加上时间戳。

（8）避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢。

将css放在页面最上面,将script放在页面最下面, 把js和css放到外部文件中, 避免重定向,

**37.  http状态码有那些？分别代表是什么意思？**

100-199 用于指定客户端应相应的某些动作。

200-299 用于表示请求成功。

300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。

400-499 用于指出客户端的错误。

400--语义有误，当前请求无法被服务器理解。

401--当前请求需要用户验证

403 --服务器已经理解请求，但是拒绝执行它。

500-599 用于支持服务器错误。 503--服务不可用

**38.  一个页面从输入URL 到页面加载显示完成，这个过程中都发生了什么？**

1、浏览器先查看浏览器缓存\-系统缓存\-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。

2、在发送http请求前，需要域名解析(DNS解析)，解析获取相应的IP地址。

3、浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手。

4、握手成功后，浏览器向服务器发送http请求，请求数据包。

5、服务器处理收到的请求，将数据返回至浏览器

6、浏览器收到HTTP响应

7、读取页面内容，浏览器渲染，解析html源码

8、生成Dom树、解析css样式、js交互

**39. 子元素的margin和padding设置为百分数**

margin和padding都可以使用百分比值的，就是 margin-top | margin-bottom | padding-top |padding-bottom 的百分比值参照的不是容器的高度，而是**宽度**。无论垂直还是水平，百分比值始终参考宽度。

**40.  jQuery中attr()、prop()、data()用法及区别？**

从性能上对比，.prop() > .data() > .attr()。

attr返回属性的值（标签自带属性和自定意属性都可以返回）

prop返回true或false（只能返回标签自带属性，不能返回自定义属性）

data向被选元素附加数据，或者从被选元素获取数据（即H5的自定义属性）

attribute表示HTML文档节点属性，property表示JS对象的属性。

// 这里的name、age、url均是obj的property

var obj =\{ name: "CodePlayer", age: 18, url:"http://www.365mini.com/" \};

prop()的设计目标用于设置或获取指定DOM元素(指的是JS对象，Element类型)上的属性(property);

attr()的设计目标是用于设置或获取指定DOM元素所对应的文档节点上的属性(attribute)。

在html5中DOM标签可以添加一些data-xxx的属性，可以把data()看作是存取data-xxx这样的DOM附加信息的方法。data()存取的内容可以是字符串、数组和对象

<divdata-role="page" data-last-value="43"data-hidden="true"></div>

**41.  css的渲染顺序？**

css的渲染顺序是**从右向左**** **

浏览器按“从右向左”读取。意味着在选择器 ul > lia\[title="home"\] 中，首先被解析的是a\[title="home"\]。这第一部分也被称为“目标选择器”，最终选择的元素是它。

**\#ID选择符最高效，通配选择符效率最低\#**

这里有四种目标选择器：ID,class,tag和通配符。按照效率排列如下。

\#main-navigation\{   \}     /\* ID (最快)\*/

body.home\#page-wrap \{   \}  /\* ID \*/

.main-navigation\{   \}     /\* Class \*/

ul lia.current \{   \}       /\* Class \*

ul \{   \}                    /\* Tag \*/

ul li a\{  \}                /\* Tag \*/

\* \{   \}                     /\*  通配 (最慢) \*/

**42. label标签**

如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。绑定的方法是：将for属性值指定为目的控件（绑定控件）的ID。一般情况下，在使用单选框和复选框时用label绑定比较常见。有两种使用方法：

方法1：<label for="userName">用户名：</label>

方法2：<label>用户名：<inputtype="text"/></label>

绑定的方法是：将for属性值指定为目的控件（绑定控件）的ID。一般情况下，在使用单选框和复选框时用label绑定比较常见。

Label中两个属性非常有用，一个是for，一个就是accesskey

For属性：表示Label标签要绑定的HTML元素，你点击这个标签的时候，所绑定的元素将获取焦点

Accesskey属性：表示访问label标签所绑定的元素的热键，当您按下热键，所绑定的元素将获取焦点。

用法：<labelfor="inputBox" accesskey="N">姓名</label>

局限性：accessKey属性所设置的快捷键不能与浏览器的快捷键冲突，否则将优先级或浏览器的快捷键。

**43. readystate的状态**

0：请求未初始化（还没有调用 open()）。

1：请求已经建立，但是还没有发送（还没有调用 send()）。

2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。

3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。

4：响应已完成；您可以获取并使用服务器的响应了。

**44. 手写事件委托  点击li的内容，删除对应的li元素**

利用冒泡的原理，把事件加到父级上，触发执行效果。最大的好处就是动态生成的元素还会保留原有的事件绑定。

<li>aaaaaaaa</li>

<li>bbbbbbbb</li>

<li>cccccccc</li>

</ul>

**//一般的事件绑定办法：**

window.onload = function()\{

var oUl= document.getElementById("ul");

var aLi= oUl.getElementsByTagName("li");

for(vari=0; i<aLi.length; i++)\{

aLi\[i\].onmouseover = function()\{

this.style.background = "red";

aLi\[i\].onmouseout = function()\{

this.style.background = "";

\}  \}  \}

**//利用事件委托绑定：**

window.onload = function()\{

var oUl= document.getElementById("ul");

var aLi= oUl.getElementsByTagName("li");

oUl.onmouseover = function(ev)\{

varev = ev || window.event;

vartarget = ev.target || ev.srcElement;

if(target.nodeName.toLowerCase() == "li")\{

target.style.background = "red";

\}  \}

oUl.οnmοuseοut= function(ev)\{

varev = ev || window.event;

vartarget = ev.target || ev.srcElement;

if(target.nodeName.toLowerCase() == "li")\{

target.style.background = "";

\}   \}  \}

//a点击的时候，ul都会新增一个li，新增的li都有绑定事件

</ul>

**//使用常用事件绑定实现**

$("\#oUl").find("li").on("click",function()\{

//do something

\})

$("\#addBtn").on("click",function()\{

$("\#oUl").append("<li></li>");

$("\#oUl").find("li").on("click",function()\{

//do something

\})

**//使用事件委托实现**

$("document").on("click","\#oUlli",function()\{

//dosomething

\})

$("\#addBtn").on("click",function()\{

$("\#oUl").append("<li></li>");

\})

**45. 数组去重的方法**

（1）遍历数组，建立新数组，利用indexOf判断是否存在于新数组中，不存在则push到新数组，最后返回新数组（方法效率很低，需要遍历数组）

function removeDuplicatedItem(ar) \{

varret = \[\];

for(var i = 0, j = ar.length; i < j; i++) \{

if (ret.indexOf(ar\[i\]) === -1) \{

ret.push(ar\[i\]);

return ret;

（2）数组下标判断法, 遍历数组，利用indexOf判断元素的值是否与当前索引相等，如相等则加入

function removeDuplicatedItem3(ar) \{

varret = \[\];

ar.forEach(function(e, i, ar) \{

if (ar.indexOf(e) === i) \{

ret.push(e);

\});

return ret;

（3）数组先排序，然后比较俩数组一头一尾进行去重

function removeDuplicatedItem4(ar) \{

varret = \[\], end;

ar.sort(); //先对数组进行排序

end =ar\[0\];

ret.push(ar\[0\]);

for(var i = 1; i < ar.length; i++) \{

if (ar\[i\] != end) \{

ret.push(ar\[i\]);

end = ar\[i\];

return ret;

（4）遍历数组，利用object对象保存数组值，判断数组值是否已经保存在object中，未保存则push到新数组并用object\[arrayItem\]=1的方式记录保存

function removeDuplicatedItem2(ar) \{

vartmp = \{\}, ret = \[\]; //tmp为hash表，ret为临时数组

for(var i = 0, j = ar.length; i < j; i++) \{ //遍历当前数组

if (!tmp\[ar\[i\]\]) \{        //如果hash表中没有当前项

tmp\[ar\[i\]\] = 1;     //存入hash表

ret.push(ar\[i\]);    //把当前数组的当前项push到临时数组里面

return ret;

**46. function(event)**

document.οnclick=function()\{

alert(this.value); //this代表着在该作用域中离它最近的对象。

当我们触发document的click事件时，便会产生一个事件对象，这个对象中包含着这个事件的相关信息，包括导致事件的元素、事件的类型、以及其它与特定事件相关的信息等。这个对象是在执行事件时，浏览器通过函数传递过来的。在W3C中可以直接接受event对象。但是IE中，是通过window.event来接收。

document.οnclick=function(evt)\{

var e=evt||window.event;

alert(e);

\};

event || (event = window.event);  //获得event对象兼容性写法

event.target||event.srcElement   //获得target兼容型写法

// 阻止浏览器默认行为兼容性写法

event.preventDefault ? event.preventDefault() :(event.returnValue = false);

// 阻止冒泡写法

event.stopPropagation ? event.stopPropagation(): (event.cancelBubble = true);

//注册和删除事件方法的形式

**47. 实现文字放不下时显示省略号的效果（css3）**

text-overflow:clip|ellipsis|string;

clip   修剪文本。

ellipsis    显示省略符号来代表被修剪的文本。

string      使用给定的字符串来代表被修剪的文本。

**48. 获取当前的网址并从中截取信息**

window.location.href  //返回当前加载页面的完整URL

window.location.search  //获取 href属性中跟在问号后面的部分

//解析查询字符串，然后返回包含所有参数的一个对象

functiongetQueryStringArgs()\{

//取得查询字符串并去掉开头的问号

varqs=(location.search.length>0?location.search.substring(1):” ”);

varargs=\{\};//保存数据对象

items=qs.length?qs.split(“&”):\[\],

item=null,name=null,value=null,i=0,len=items.length;

//逐个将每一项添加到args对象中

for(i=0;i<len;i++)\{

item=item\[i\].split(“=”);

name=decodeURIComponent(item\[0\]);

value=decodeURIComponent(item1);

if(name.length)\{

args\[name\]=value;

return args;

**49. 数组和字符串的各自的方法**

**数组的操作：**

concat  // 用于拼接多个数组，接受多个参数

push    // 从数组尾部插入一个数，并返回新的数组长度

pop     // 从数组尾部删除一个数，并返回被删除的数

shift   // 从数组头部删除一个数，并返回被删除的数

unshift //从数组头部插入一个数，并返回新的数组的长度

sort    // 将数组进行排序，可以传递一个参数，是一个函数，如果不传参默认是数字从小到大，字母从A到B

reverse //将数组颠倒，没有参数

slice   // 截取并返回一个新的数组，可以传两个参数，截取开始的位置，和截取到的位置

splice  // 可以传入多个参数，没有限制。第一个参数，找到一个参数的位置，第二个参数是删除的个数，剩的参数就是要插入的数

join    // 将一个数组变为一个字符串，有一个参数，可以指定之间的分割字符，如果不传参，默认是一个逗号

toString    // 将一个数组变为一个字符串，用逗号分隔

**对字符串的操作：**

indexOf //接受一个参数，在字符串中搜索的内容。返回正序搜索的第一次出现的位置。

lastindexOf// 接受一个参数，和上一个一样。倒叙搜索，返回最后一次出现的位置

charAt  // 接受一个数字，是字符串的第几个字符串的位置，返回搜索位置的那个数

concat  // 连接字符串

slice   // 截取一个字符串，传两个参数，一个开始的位置，和一个结束的位置支持两个参数，返回一个新的字符串

spilt   // 将一个字符串转化为一个数组

substr  // 截取一个字符串，接受两个参数，第一个是截取字符串的开始的位置，以及截取的长度

toLowerCase     // 将大写的英文转化为小写

toUpCase    // 将小写的英文转化的小写

50.  **将数组转化为字符串,将一个字符串转化为数字**，

**数组转字符串**：需要将数组元素用某个字符连接成字符串

var a, b;

a = new Array(0,1,2,3,4);

b = a.join("-");

**字符串转数组：**实现方法为将字符串按某个字符切割成若干个字符串，并以数组形式返回

var s = "abc,abcd,aaa";

ss = s.split(",");// 在每个逗号(,)处进行分解。

**51. 简述创建函数的几种方式**

1.函数声明：function sum1(num1,num2)\{

returnnum1+num2;

2.函数表达式：var sum2 = function(num1,num2)\{

returnnum1+num2;

3.函数对象方式：var sum3 = newFunction("num1","num2","return num1+num2");

**52. js数据类型和区分**

基本数据类型：String,boolean,Number,Undefined, Null

引用数据类型：Object(Array,Date,RegExp,Function)

区分基本数据类型：typeof;

区分引用数据类型：instanceof

区分各数据类型： Object.prototype.toString.call()

**53. 强制类型转换和隐式类型转换**

强制（parseInt,parseFloat,number）

隐式（== –）

**54. IE和标准下有哪些兼容性的写法**

var ev = ev || window.event

document.documentElement.clientWidth ||document.body.clientWidth

var target = ev.srcElement||ev.target

**55. document.ready与window.onload：**

1.执行时间

window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。

$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

2.编写个数不同

window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个

$(document).ready()可以同时编写多个，并且都可以得到执行

3.简化写法

window.onload没有简化写法

$(document).ready(function()\{\})可以简写成$(function()\{\});

**56. px和em的区别**

px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。

浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em

**57. 什么叫优雅降级和渐进增强？**

渐进增强 progressive enhancement：

针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation：

一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：

a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给

b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要

c. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带

**58. 写出几种IE6BUG的解决方法**

1.双边距BUG float引起的使用display

3像素问题使用float引起的使用dislpay:inline -3px

3.超链接hover 点击后失效使用正确的书写顺序 link visited hover active

4.Ie z-index问题给父级添加position:relative

5.Png 透明使用js代码改

6.Min-height 最小高度！Important 解决’

7.select 在ie6下遮盖使用iframe嵌套

8.为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）

**59. 你所了解到的Web攻击技术**

（1）XSS（Cross-Site Scripting，跨站脚本攻击）：指通过存在安全漏洞的Web网站注册用户的浏览器内运行非法的HTML标签或者JavaScript进行的一种攻击。

（2）SQL注入攻击

（3）CSRF（Cross-Site Request Forgeries，跨站点请求伪造）：指攻击者通过设置好的陷阱，强制对已完成的认证用户进行非预期的个人信息或设定信息等某些状态更新。

**60. 关于原生dom操作**

childNodes  //查找父元素的所有子元素（多层），返回一个类数组对象，支持到ie6

parentNode  //查找子元素的父节点（一层），返回父元素对象，支持到ie6

previousSibling//查找前一个紧邻的兄弟元素，返回兄弟元素对象，支持到ie6

nextSibling     //查找后一个紧邻的兄弟元素，返回兄弟元素对象，支持到ie6

firstChild  //查找父元素下的第一个子元素，返回子元素对象，支持到ie6

lastChild   //查找父元素下的最后一个子元素，返回子元素对象，支持到ie6

getElementById('')  //通过元素的id进行查找，兼容到IE6

getElementsByTagName('')    //通过元素的标签名进行查找，兼容到ie6

getElementsByName('')   //通过元素的name属性查找，兼容到IE8

getElementsByClass('')//通过元素的class属性去查找，html5新出的。兼容性你懂的。

document.createElement()   //创建HTML元素节点

document.createTextNode()   //创建文本元素节点

appendChild()   //向父元素的最后一个子元素处插入

insertBefore()  //两个参数，要插入的节点和作为参照的节点

replaceChild()  //两个参数，要插入的节点和要替换的节点

removeChild()   //要移除的对象

getAttribute()  // 传入一个参数，获取相应属性的值

setAttribute()  // 两个参数，第一个：属性名称，第二个：属性的值

removeAttribute()   // 删除属性，输入要删除的属性名称

innerHTML   // 属性返回与调用元素的所有子节点（包括元素、注释和文本节点），当然也可以写入父元素下的子元素

innerText   // 功能和上一条类似，但是只对操作元素下的文本元素有影响

[www.a.com_a.html]: http://www.a.xn--coma-294fz75s.html/
[http_script.a.com_b.html]: http://script.a.com/b.html
[http_example.com_data.php]: http://example.com/data.php
[http_example.com_data.php_callback_dosomething_script]: http://example.com/data.php?callback=dosomething
[www.example.com_a.html_a.html_js]: http://www.example.com/a.html%E9%A1%B5%E9%9D%A2%EF%BC%8C%E9%9C%80%E8%A6%81%E9%80%9A%E8%BF%87a.html%E9%A1%B5%E9%9D%A2%E7%9A%84js
[www.cnblogs.com_data.html]: http://www.cnblogs.com/data.html
[http_test.com_a.html]: http://test.com/a.html