面试题整理

 

html

什么是语义化的HTML?

1. 选择合适的标签。搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重。这对搜索引擎的抓取有好处。
2. 符合内容的结构化：在没有CSS的情况下，让页面展现出清晰地结构。
3. 有利于开发和维护：能够使阅读源代码的人更容易明白网页的结构。

说下行内元素和块级元素的区别？行内块元素的兼容性使用？（IE8 以下）

行内元素特性：

1. 和相邻的内联元素在同一行
2. 宽度、高度，padding-top/bottom、margin-top/bottom都不可设置

块级元素特性：

1. 总是独占一行
2. 宽度，高度，内边距，外边距都可以设置

div {
    display： inline-block；//先用display:inline-block属性触发块元素
    *zoom： 1；//通过zoom:1触发块元素的layout
    *display： inline；//让块元素呈x现为内联对象
}

XHTML和HTML有什么区别

XHTML是更严格的HTML标准，主要表现在：XHTML元素必须正确的嵌套和关闭，标签名必须用小写字母，文档必须要有根元素

前端页面有哪三层构成，分别是什么?作用是什么?

1. 结构层：主要指DOM节点，html
2. 表现层：主要指页面渲染，css
3. 行为层：主要指页面的动画效果，js

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

1. Doctype在文档的第一行，处于html标签之前。告诉我们的浏览器用什么文档标准来解析文档。Doctype不存在或格式不正确会导致文档以兼容模式呈现。
2. 标准模式：标准模式下的排版和js的运作模式都是按照该浏览器支持的最高标准来执行的。
3. 兼容模式下，页面以宽松的，向后兼容的方式显示，模拟老式浏览器的行为以防站点无法工作。

你知道多少种Doctype文档类型？

对于标准模式，有严格型。对于准标准模式，有过渡型，框架集型。这两种模式的差异几乎可以忽略不计。

HTML5 为什么只需要写 ？

HTML5不基于SGML（标准通用标记语言）的子集，因此不需要对DTD（文档类型定义规则）进行引用。但是需要Doctype来规范浏览器的行为。

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

HTML5？

新特性：

1. 语义化更好的标签：header，footer,nav,aside,article,section
2. 对本地离线存储更好的支持：localStorage长期存储数据，浏览器关闭后数据不丢失。sessionStorage浏览器关闭后自动删除。
3. 画布canvas，音频audio，视频video，地理Geolocation
4. 新的表单控件：calendar，date，time，email，URL，search
5. 新的表单元素：atalist 元素规定输入域的选项列表。 keygen 元素的作用是提供一种验证用户的可靠方法。 output 元素用于不同类型的输出
6. webworker:当前javascript的主线程中，使用Worker类加载一个javascript文件来开辟一个新的线程，起到互不阻塞执行的效果，并且提供主线程和新线程之间数据交换的接口：postMessage，onmessage。
7. JavaScript是单线程的，在执行过程中会阻塞页面的渲染和其他脚本的执行。因此webworker可以在主线程当中开启一个新的线程，起到互不阻塞执行的效果。通过 worker = new Worker( url ) 加载一个JS文件来创建一个worker，同时返回一个worker实例。通过worker.postMessage( data ) 方法来向worker发送数据。绑定worker.onmessage方法来接收worker发送过来的数据。
8. websocket:webscoket是HTML5提供的传输协议。它可以将服务器的更新及时主动的发给客户端

移除了纯表现的元素：big,center,font,strike等等。对可用性产生负面影响的元素：frame，frameset，noframes；

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

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

iframe的优缺点？

优点：

1. 解决加载缓慢的第三方内容如图标和广告等的加载问题
2. Security sandbox
3. 并行加载脚本

缺点：

1. iframe会阻塞主页面的Onload事件；
2. 即时内容为空，加载也需要时间
3. 没有语意

div+css的布局较table布局有什么优点？

1. 改版的时候更方便 只要改css文件。
2. 页面加载速度更快、结构化清晰、页面显示简洁。
3. 表现与结构相分离。
4. 易于优化（seo）搜索引擎更友好，排名更容易靠前。

文档编码格式 

http-equivcontent-type值可以设计文档的编码格式。把 content 属性关联到 HTTP 头部。

 

CSS

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

1. 就标签的分类来说，link属于HTML标签，而@import是CSS提供的。而且link的权重大于@import。
2. 加载顺序来说，link引用的css文件，页面载入的时候同时加载。而@import是等到页面加载完成后再加载。
3. 兼容性来说，link没有兼容性问题，@import在IE5以上才可识别
4. 使用DOM控制样式时，link支持js操作DOM改变样式。@import不行。

CSS放在顶部/底部有什么区别

1. CSS放在顶部时，页面会逐步呈现出来。因为浏览器在页面载入的时候同时加载css。浏览器会根据html生成DOM树，根据css生成渲染树。
2. 但是放在底部页面会出现白屏或者闪跳的情况。因为放在底部时，css是等页面下载完后再被下载。浏览器为了弥补样式比较靠后的加载，为了逐步呈现从而延迟呈现，因此出现白屏的情况。

什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？

就是@import引起的。@import是等到页面加载完成后再加载。因此会出现闪烁的感觉。解决办法是link引用css文件

简要说一下CSS的元素分类

块级元素：div p ul ol li form

行内元素：span a input img strong em label

CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？以及这些选择器的使用场景？

选择器：（按优先级）

1. 通配符*   （*， > ,+ 选择器的权重都是0）
2. id选择器 #myid （权重100）
3. class选择器 .class  （10）
4. 属性选择器 input[type="button"]（10）
5. 伪类选择器 a:link a:visited a:hover a:visited（10）
6. 标签选择器 p div （1）
7. 伪元素选择器 a:before a:after :first-child（1）
8. 相邻+，子>,后代选择器

优先级算法：同权重下以最近者为准

！important>行内样式(权重1000)>id选择器(权重100)>id选择器 |属性选择器|伪类选择器 (权重10)>标签选择器|伪元素选择器(权重1)

可继承的样式：font的样式，color,visiblity

不可继承的：关于盒模型的：width height margin padding border

新增伪类：first-child last-child nth-child（n）

CSS选择器，nth-chlid(n)和nth-of-type(n)区别

ele:nth-of-type(n)是指父元素下第n个ele元素， 而ele:nth-child(n)是指父元素下第n个元素且这个元素为ele，若不是，则选择失败

介绍一下CSS的盒子模型？

W3C标准盒模型：content，padding，border，margin。其中width指的是内容content的宽度

IE盒模型：content，padding，border，margin。其中width指的是content的宽度+padding+border的宽度

box-sizing常用的属性有哪些？分别有什么作用？

是CSS3中提供的属性。主要控制盒模型的解析方式。每种盒模型计算元素宽高的方式不同：

1. 它的默认值是content-box，也就是width的宽度指的是内容content的宽度。是W3C标准盒模型。
2. border-box的width是content+padding+border。也就是IE盒模型
3. 还有padding-box：width指的是content+padding的宽度。

display的值:

规定元素生成框的类型：

1. block:块类型元素
2. inline:行内元素
3. inline-block：行内块级元素
4. list-item：块类型元素，并添加样式列表标记
5. none：元素脱离文档流，不会显示

display:none与visibility:hidden的区别是什么？

他们都可以隐藏对应的元素。

1. display：none：使元素脱离文档流，不占用空间。其他元素会靠拢，就当他不存在一样。
2. visibility：hidden：不会脱离文档流。

position的值， relative和absolute分别是相对于谁进行定位的？

1. relative：相对于其在普通流中的位置定位
2. absolute：相对于离其最近的已定位的父元素定位，如果没有就相对于窗口。
3. fixed:相对于浏览器窗口定位。
4. static：元素在正常流当中，并且忽略其top,bottom,left,right值
5. inherit：从父元素继承position的值

为什么要初始化CSS样式？

因为浏览器的兼容问题，不同浏览器对某些标签的默认值不同。如果没有初始化，会导致页面在不同浏览器中存在差异。

垂直居中设置（已知大小和未知大小，图片）多行文本居中

已知大小：

块元素：绝对定位后margin左上都设置为负的1/2宽高。

.center{
        position: absolute;
        width: 200px;
        height: 200px;
        left:50%;
        top:50;
        margin-top:-100px;
        margin-left: -100px;
    }

文本：将文本text-align：center；line-height设置为父容器的高；

  .text{
        height:100px;
        text-align: center;
        line-height: 100px;
    }

多行文本居中：width，height必须使用px单位，再配合vertial-align:middle和display:table-cell属性，且div不能浮动，如果浮动就在里面再添加一个div

.parent{
     display: table-cell;
     vertical-align: middle;
}

未知大小元素居中：

方法一：使用CSS3的flex-box

.wrap {
        display: flex;
        align-items: center;
        justify-content: center;
    }

方法2：父元素相对定位，子元素绝对定位，左右为50%，再使用transform：translate上下移动自身的-50%;

.parent{
   position: relative；
}
.child{
    position: absolute;
    left: 50%;
    top: 50%; 
    -webkit-transform: translate(-50%,-50%);
}

方法4：给子元素加上table标签，让table的margin:0 auto;height:100%;

<table style="margin: 0 auto;height: 100%;">
            <tbody>
                <tr>
                    <td>
                        <ul >
                            <li>8888888888li>
                            <li>8888888888li>
                            <li>8888888888li>
                            <li>8888888888li>
                            <li>8888888888li>
                        ul>
                    td>
                tr>
            tbody>
table>

居中图片：

.parent{
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

浮动原理，浮动产生的问题，CSS清除浮动的几种方法（至少两种）

浮动的元素脱离文档流，不占用空间。可以向左和向右浮动，直到它的外边缘碰到包含框或者另外一个浮动框的边缘为止。

浮动产生的问题：

1. 因为浮动的元素脱离文档流，同级非浮动的元素会表现的他不存在一样。
2. 如果父元素没有设置宽高，其子元素都浮动的话，会导致父元素的高度无法撑开。影响与父元素同级的元素。

解决办法：

1. 同级的元素被覆盖，可以浮动同级元素，但是不推荐这种做法，因为后面的布局会受到影响。也可以给非浮动元素添加clear:both;
2. 可以在浮动元素的后面加上空标签清除浮动
3. 可以给父元素添加一个after伪元素。也可以让父元素overflow：hidden/auto；*zoom:1;

CSS隐藏元素的几种方法（至少说出三种）

1. display:none;不占用空间
2. height:0;overflow:hidden
3. visibility：hidden；占用空间，不影响点击事件
4. opacity：0；

，和，标签

1. strong：逻辑标记，粗体强调标签表示内容的重要性
2. em:斜体强调标签，更强烈强调，表示内容的强调点
3. b:物理标记，只是单纯的加粗
4. i:物理标记，单纯的斜体

img的alt与title有何异同？

1. alt:用于图片的替代文字，当不能显示图片时显示。
2. title:用于提供元素的信息，鼠标悬停时显示（在IE浏览器下会在没有title时显示alt）

px,em的区别

它们都是长度单位，px的值是固定的，指定多少就是多少，em的值是不固定的，他会继承父级元素的大小。浏览器默认字体高都是16排序，所以未经调整的话1em=16px;

怎么实现三角形？

宽高设为0，border设置很大的宽度，再根据所需要的三角形方向设置border-left/right等。

#triangle-left {    
            width: 0px;    
            height: 0px;   
            border: 100px solid transparent;   
            border-right:  100px solid red;   
         } 

怎么实现一个圆形可点区域？

1.border-radius设置成50%；

.circle {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        cursor: pointer;
    }

2.map+area

<img src="t.jpg" width="1366" height="768" border="0" usemap="#Map" />  
    <map name="Map" id="Map">  
    <area shape="circle" coords="821,289,68" href="www.baidu.com" target="_blank" />  
map>  

表示设定热点的形状为圆形，圆心坐标为（X1,y1），半径为r。

3.JS实现，获取鼠标点击位置坐标，判断其到圆点的距离是否不大于圆的半径，来判断点击位置是否在圆内

document.onclick = function(e) {    
    var r = 50;   
    var x1 = 100;  
    var y1 = 100;  
    var x2= e.clientX;  
    var y2= e.clientY;    
    var distance = Math.abs(Math.sqrt(Math.pow(x2 - x1, 2) +      Math.pow(y2 - y1, 2)));    
    if (distance <= 50)  alert("Yes!");    
}  

css一个冒号和两个冒号区别？

一个冒号用于CSS伪类，两个冒号用于CSS伪元素。它是CSS3中引入的，为了区分伪类和伪元素。为了兼容IE，还是用一个比较好。

两栏分布，左边定宽右边自适应。

左侧固定宽度，让他绝对定位。右侧margin-left设为左侧宽度

.left{
           width:200px;
           height: 800px；
           position: absolute;
           left:0;
           top:0;
        }
.right{
       height: 800px;
       margin-left: 200px;
       background-color: green;
    }

三栏分布

左侧右侧固定宽度并且绝对定位。中间设置marginleft和right。

        .left{
            width: 200px;
            position: absolute;
            left: 0;
            top: 0;
            height: 800px;
        }
        .right{
            width: 300px;
            position: absolute;
            right: 0;
            top: 0;
            height: 800px;
        }
         .main{ 
         /*     position: absolute; 
                      left: 200px;
                     right: 300px;  */
             margin-left: 200px;
             margin-right: 300px;
        } 

css hack原理和分类，利弊

原理：由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样，以及CSS优先级对浏览器展现效果的影响，我们可以据此针对不同的浏览器情景来应用不同的CSS。

分类：

1. CSS属性前缀法 ：IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，IE6~IE10都认识"\9"，但firefox前述三个都不能认识
2. 选择器前缀法：IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}
3. IE条件注释法（即HTML头部引用if IE）针对所有IE(注：IE10+已经不再支持条件注释)： ，针对IE6及以下版本： 。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

利弊：使用hack虽然对页面表现的一致性有好处，但过多的滥用会造成html文档混乱不堪，增加管理和维护的负担。

浏览器前缀

现在写css3代码的时候，为了实现兼容性，需要在前面加前缀以便兼容对应的浏览器。

-webkit  //Webkit 谷歌和Safari浏览器
-moz  //Gecko内核，火狐浏览器
-o     //Presto内核，Opera浏览器
-ms  //Trident内核，IE浏览器

什么是Css Hack？ie6,7,8的hack分别是什么？

对不同的浏览器写不同的CSS的过程，就是CSS hack

 background-color:red\9;      /*all ie*/
 background-color:yellow\0;    /*ie8*/
+background-color:pink;        /*ie7*/
 _background-color:orange;       /*ie6*/ 

解释下 CSS sprites，以及你要如何在页面或网站中使用它。

把网页中一些背景图片整合到一张图片文件中。利用CSS的background-image,background-position组合进行定位。减少HTTP请求次数。

对BFC规范的理解？

块级格式化上下文，是CSS2.1提出的一个概念：它决定了元素如何对其内容进行布局，以及和其他元素的关系和相互作用。一个创建了BFC的盒子是独立布局的，盒子里面的元素的样式不会影响到外面的元素。

Css渲染机制

在网页中的应该使用奇数还是偶数的字体？为什么呢？

1. 偶数字号相对更容易和 web 设计的其他部分构成比例关系
2. 为了迁就ie6，ie6会把定义为13px的字渲染成14px
3. 偶数宽的汉字显得均衡

iconfont矢量图标优点和缺点

Iconfont 就是指用字体文件取代图片文件，来展示图标、特殊字体等元素的一种方法。

优点：

1. 加载文件体积小。
2. 可以直接通过css的font-size，color修改它的大小和颜色，对于需要缩放多个尺寸的图标，是个很好的解决方案。
3. 支持一些css3对文字的效果，例如：阴影、旋转、透明度。
4. 兼容低版本浏览器。

缺点：

1. 矢量图只能是纯色的。
2. 制作门槛高，耗时长，维护成本也很高。

知道的网页制作会用到的图片格式有哪些？

1. png-8，png-24，jpeg，gif，svg，Webp,Apng
2. Webp:谷歌开发的为了加快图片下载速度的图片格式。它的图片大小只有JPEG的2/3.
3. Apng:可以实现png格式的动态图片效果

canvas为什么会出现，用来做什么的；

canvas 元素使用 JavaScript 在网页上绘制图像，适合像素处理，动态渲染和大数据量绘制

简述一下src与href的区别。

1. src用于替换当前元素，指向外部资源的位置，指向的内容会嵌入到文档当中，它会阻塞其他资源的下载。直到该资源下载执行完毕。比如js脚本，image图片等
2. href指向网络资源所在的位置，它会并行下载资源并且不会停止对当前文档的处理，比如link方式引入css文件。

什么是外边距重叠？重叠的结果是什么？

CSS中相邻两个盒子的外边距会结合成一个单独的外边距，这种合并的方式称为折叠。两个浮动的块元素不存在margin折叠的情况

折叠结果遵循以下原则：

1. 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值
2. 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值
3. 两个外边距一正一负时，折叠结果是两者的相加的和

两个块状元素上下的margin-top和margin-bottom会重叠。啥原因？怎么解决？

CSS中相邻两个盒子的外边距会结合成一个单独的外边距，这种合并的方式称为折叠。

而对于标准浏览器来说：两个浮动的块元素不存在margin折叠的情况，但是此时加浮动后会造成IE6的双边距bug，可以让其设置为_diplay:inline;

rgba()和opacity的透明效果有什么不同？

都能实现透明效果。opacity会作用于元素的背景和内容，rgba只会作用于背景。

关于letter-spacing的妙用知道有哪些么？

以用于消除inline-block元素间的换行符空格间隙问题。

Sass、LESS是什么？大家为什么要使用他们？

他们是CSS预处理器，他们是一种特殊的语法/语言编译成CSS。例如LESS是一种动态样式语言. 将CSS赋予了动态语言的特性，如变量，继承，运算， 函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)

为什么要使用它们？

1. 结构清晰，便于扩展。
2. 可以方便地屏蔽浏览器私有语法差异。
3. 可以轻松实现多重继承。
4. 完全兼容 CSS 代码，可以方便地应用到老项目中。

知道css有个content属性吗？有什么作用？有什么应用？

用在before和after伪元素上，用来插入生成内容。

最常见的应用就是清除浮动：

.parent:after{
    content:'.';
    height:0;
    visiblity:hidden;
    display:block;
    clear:both;
    *zoom:1;   // for IE6
} 

去除inline-block间隙的方法

1. 去除标签内的空格和换行符（代码可读性变差，中间可以加注释分开）
2. inline-clock的元素设一个负的margin值：3px；margin负值的大小与上下文的字体和文字大小相关
3. 父元素设置font-size:0;-webkit-text-size-adjust:none;
4. 使用letter-spacing字符间距：父元素letter-spacing: -3px;inline-clock的元素设letter-spacing: 0px;
5. 使用word-spacing单词间距：父元素word-spacing: -6px;inline-clock的元素设letter-spacing: 0px;word-spacing的负值只要大到一定程度，其兼容性上的差异就可以被忽略

媒体查询

使用@media可以针对不同的媒体类型或者不同屏幕大小来定义不同的样式

@media screen and/not/only (min-width:365px,max-width:667px;)//iphone6
@media screen and/not/only (min-width:768px,max-width:1024px;)//ipad
@media screen and/not/only (min-width:1024px)//sm-screen

 

Css实现动画效果Animation还有哪些其他属性。

CSS3动画的属性主要分为三类：

transform

1. 元素顺时针旋转的角度rotate
2. 设置元素放大或缩小的倍数scale
3. 设置元素的位移translate
4. 设置元素倾斜的角度skew

transition过渡：可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

animation：@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果

怎么在页面里放置一个很简单的图标，不能用img和background-img

canvas,icon库

谈一谈flexbox，讲一讲哪些浏览器已经支持。

弹性布局。把复杂的网站布局变得简易和快速。

如果我们把Flexbox新语法、旧语法混合在一起使用，在现代浏览器（Chrome、Firefox、Safari、Opera Presto 12.1+，IE10+，IOS和Android）可以得到很好的支持。在这里新旧语法的顺序显得非常重要。需要确保老语法不要覆盖新语法。写的时候对于不同的浏览器加上不同的前缀。

任何一个容器都可以指定为Flex布局，它有如下属性（主轴排列方向flex-direction，是否换行flex-wrap，主轴对齐方式justify-content，与主轴垂直的对其方式align-content）：

.flex-container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
   /*主轴方向：项目排列方向水平*/
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
  /*超出容器后是否换行：换行*/
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  /*主轴对齐方向：水平居中*/
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
  /*垂直方向的对齐方式:垂直居中*/
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    }

你了解哪些布局？你平时有使用过什么布局实现？

1. 浮动布局
2. 弹性盒模型布局：主要解决移动端屏幕宽度不定的问题。
3. 定位布局

DOM

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

1. createAttribute() 创建属性节点。
2. createElement() 创建元素节点。
3. createTextNode() 创建文本节点。
4. parent.removeChild(child);
5. parent.replaceChild(new,old);
6. parent.appendChild(child)
7. parent.insertBefore(before,old)
8. getElementById("id")
9. getElementsByClassName("class")
10. getElementsByTagName("p")

NodeList和Array的区别

NodeList是DOM操取出来的集合，是集合而不是普通的数组，因此不能使用数组元素的方法来操作nodelist

NodeList具有length，下标索引这些数组的属性特征

NodeList最大的特点就是时效性（live），这个集合是“动态的”：每当文档结构发生变化时，它会得到更新，因此在迭代nodelist的时候，应该将其length缓存到变量值，否则有可能会造成无限循环的问题，而且应该尽量减少访问nodelist的次数，因为每次访问nodelist都会进行一次基于文档的查询，我们应该将nodelist中取得的值缓存起来。

另外，我们可以把NodeList转化为数组，方便操作

在IE8+和其他浏览器当中可以使用

Array.prototype.slice.call(nodelist,0)

在IE中必须手动枚举成员

使用try-catch

另外ES6当中提供了Array.from()将类数组对象转化为数组var brr=Array.from(nodelist);

function converToArray(nodelist) {
        var arr = [];
        var len = nodelist.length;
        try {
            arr = Array.prototype.slice.call(nodelist, 0)); //针对非IE浏览器
            } catch (error) {

              for (var i = 0; i < len; i++) {
                  arr.push(nodelist[i])
                 }
        }
        return arr;
    }

事件委托是什么？事件委托的缺点

事件委托：是 JavaScript 中绑定事件的常用技巧，利用事件模型中的冒泡原理，将事件绑定在更上层的父元素时，通过检查事件的目标对象来判断并获取事件源。使用事件代理的好处是可以提高性能。

使用场景：

1. 给许多子元素绑定相同的事件，比如ul的li元素，或者table的td元素。可以大量节省内存，减少事件注册。
2. 可以实现当新增子对象时无需再次绑定事件，对于动态内容及其合适

缺点：事件代理的常用应用应该仅限于上述需求，如果把所有事件都用事件代理，可能会出现本不该被触发的事件被绑定上了事件的情况。

DOM0和DOM2的区别

1. DOM0中事件一旦发生就直接调用事件句柄，无传播过程。在DOM2中有一个事件的传播过程。包括事件捕获，目标元素的事件处理程序运行，事件冒泡。
2. 一个DOM对象注册多个类型相同的事件时，DOM0级中会发生事件的覆盖，而DOM2级中则会依次执行各个事件函数。
3. DOM0级事件的注册是直接将事件处理程序作为js对象的属性，或者是将js代码作为HTML元素的性质值。在DOM2中，事件的注册可以使用addEventListener("click",fn,false)的方法。事件删除用removeEventListener()

冒泡和捕捉

1. 事件捕捉：事件由document对象一直向下传播到目标元素
2. 事件冒泡：事件从目标元素上升一直打到document

如何阻止事件冒泡和默认事件

1. IE:window.event.cancelBuble=true;
2. DOM2:ev.stopPropogation();
3. 阻止默认行为：return false；

事件模型

在各种浏览器中存在3种事件模型：

1.DOM0(所有浏览器都支持)：

1. DOM0中事件一旦发生就直接调用事件句柄，无传播过程
2. 一个DOM对象注册多个类型相同的事件时，DOM0级中会发生事件的覆盖
3. DOM0级事件的注册是直接将事件处理程序作为js对象的属性，或者是将js代码作为HTML元素的性质值。

2.DOM2(除了IE意外都支持)

1. 在DOM2中有一个事件的传播过程。包括事件捕获，目标元素的事件处理程序运行，事件冒泡。
2. DOM2级中一个DOM对象注册多个类型相同的事件时，则会依次执行各个事件函数。
3. 在DOM2中，事件的注册可以使用addEventListener("click",fn,false)的方法。事件删除用removeEventListener()
4. event对象是事件处理函数的参数，事件源是e.target

3.IE事件模型：

1. IE的事件传播过程只有DOM0级和DOM2级中第二第三阶段，也就是只冒泡，不捕捉。
2. ie中也可以在一个对象上添加多个事件处理函数
3. 事件的注册用attachEvent("onclik",fn);事件删除用detachEvent();
4. IE中的event对象不是事件处理函数的参数，而是window，并且事件源是srcElement

document.write()用法，和innerHTML区别？

document.write()方法可以用在两个方面：

1. 页面载入过程中用实时脚本创建页面内容
2. 用延时脚本创建本窗口或新窗口的内容。

document.write只能重绘整个页面。innerHTML可以重绘页面的一部分

window.onload和$(document).ready区别？用原生实现

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

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

function ready(fn){
    if(document.addEventListener) {        //标准浏览器
        document.addEventListener('DOMContentLoaded', function() {
            //注销事件, 避免反复触发
            document.removeEventListener('DOMContentLoaded',arguments.callee, false);
            fn();            //执行函数
        }, false);
    }else if(document.attachEvent) {        //IE
        document.attachEvent('onreadystatechange', function() {
            if(document.readyState == 'complete') {
                document.detachEvent('onreadystatechange', arguments.callee);
                fn();        //函数执行
            }
        });
    }
};

attribute和property的区别是什么？

1. attribute是dom元素在文档中作为html标签拥有的属性；
2. property就是dom元素在js中作为对象拥有的属性。

所以：

1. 对于html的标准属性来说，attribute和property是同步的，是会自动更新的，
2. 但是对于自定义的属性来说，他们是不同步的，

dom3新增加了哪些特性，哪些已经被完全接受了

事件循环

如何在页面中插入一些数据

原生js添加class怎么添加，如果本身已经有class了，会不会覆盖，怎么保留？

document.getElementById("flag").className = "mycalss"

 

 

JavaScript

eval是做什么的？

1. 作用：把对应的字符串解析成js代码并运行，返回执行的结果。
2. 缺点：应该避免使用eval,因为不安全，非常耗性能（两次，一次解析成js语句，一次执行）
3. 应用场景：把json字符串转化为json对象。

js有哪些内置对象？

1. Object,Array
2. Boolean,Number,String
3. Math,Date,Function,RegExp,Error,Argument,Global

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

延迟javascript代码的加载是为了加快网页的访问速度

1.把延迟脚本放在页面底部（body标签里）：如果把script标签放在head中，那么js加载完后才会加载页面,因为js会阻塞后面的代码的运行。这时候可以放在页面的底部，文档会按照从上到下的顺序加载。

2.动态创建DOM的方式：在文档都加载完后，创建script标签，插入到DOM中

//这些代码应被放置在标签前(接近HTML文件底部)

3.defer:在script标签里设置这个属性，脚本会被延迟到整个页面都解析完毕后再运行，就是相当于告诉浏览器立即下载但延迟执行。

4.async：它的作用和defer类似，但是不能控制加载的顺序。

如何实现跨浏览存储

跨域

说一下什么是javascript的同源策略？

它是一种安全协议。指一段脚本只能读取来自同一来源的窗口和文档的属性，同一来源指的是端口，域名，协议相同。

为什么要有同源限制？

比如一个黑客将真正的银行登录的页面嵌入到他的页面，当用户登录时它就可以通过js读取到你表单的内容。

如何解决跨域问题

1、JSONP/ Jsonp的原理。怎么去读取一个script里面的数据。

由于同源策略的限制，在js中不可以使用AJAX跨域请求，但可以在页面上引入不同域的脚本。jsonp正是利用这个特性来实现的。

JSONP又叫填充式json，它由回调函数和传入回调函数的json数据组成。

原理是动态插入script标签，通过script标签引入一个js文件，这个文件载入成功后会执行我们在url中指定的函数，并且会把服务器端输出的json数据作为参数传入。

其中jsonCallback是客户端注册的，获取跨域服务器上的JSON数据后，回调的函数。http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback 这个url是跨域服务器取JSON数据的接口，参数为回调函数的名字，返回的格式为：jsonpCallback({msg:'this is json data'}) 。如此就生成了一段js语法的文档, 传回客户端就可以调用jsonpCallBack函数了.

优点：简单易用，兼容性好

缺点：

1. 只支持get请求，不支持POST请求。
2. 不容易调试：如果回调函数没有调入成功无法检测出具体原因
3. 有可能会出现安全问题：远程服务器可能注入任何内容，所以必须确保对方安全

2、CORS(跨域资源共享)

它定义了浏览器和服务器是如何通过可控的方式来进行跨域通信的，CORS通过一些列特殊的HTTP头还实现的，通过HTTP头信息可以允许双方判断请求应该是成功还是失败。

3、通过修改document.domain来跨子域

将主域和子域的document.domain设置成同一个主域。前提条件：这两个域名必须属于同一个基础域名，而且所用的协议，端口都要一致，否则无法利用document.domain进行跨域

4、使用window.name跨域

一个窗口内所有的页面共享一个window.name属性，可以读写。

5、使用HTML5提供的window.postMessage()来跨域传递数据。IE8+都支持

个人认为window.name方法既不复杂也能兼容几乎所有浏览器，所以比较好用。

iframe实现跨越的具体方法？

应用页面创建iframe，src指向数据页面；数据页面把数据附加到window.name上；应用界面监听iframe的onload事件，在此事件中设置这个iframe的src指向本地域的代理文件；获取数据后销毁iframe

AJAX

ajax的内部原理

其核心有JavaScript、XMLHTTPRequest、DOM对象组成，通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面。

创建ajax过程

1. 创建一个新的xhr对象
2. 使用open方法创建一个新的HTTP请求，包含了请求的方法（GET/POST）,URL，是否异步
3. 创建一个响应http请求变化的函数onreadystatechange函数，每当 readyState 属性改变时，就会调用该函数。当 readyState 等于 4 且http状态status为 200 时，表示响应已就绪
4. 使用send方法发送http请求。
5. 获取异步调用返回的数据, 它是xhr对象的 responseText 或 responseXML 属性
6. 使用JavaScript和DOM局部刷新页面

readyState几个状态的含义

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

1. 0：请求未初始化
2. 1：服务器连接已建立
3. 2：请求已接收
4. 3：请求处理中
5. 4：请求已完成，且响应已就绪

原生jquery的ajax实现，具体思路

原生：

//首先检查浏览器是否支持XMLHttpRequest对象。
var xhr;
if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
} else {
    xhr = new ActiveXObject("Microsoft.XMLHTTP")
};
var xhr = new XMLHttpRequest();
//可以向URL添加需要发送的数据
//为了避免得到缓存的结果可以向URL添加一个唯一的id
//xhr.open("GET","demo_get.asp?t=" + Math.random(),true);
xhr.open("GET", "test.php?key1=value1&key2=value2", true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var result = xhr.responseText;
    };
}
xhr.send();

jquery：

$.ajax()是最底层的AJAX实现。它包含一个对象参数，以键值对的方式提供该方法的请求设置和回调函数。

$.ajax({
    /*发送请求的地址*/
    url: "url",
    /*请求的方式*/
    type: "POST/GET",
    /*是否异步*/
    async: true,
    发送到服务器的数据
    data: {
        name: "furong",
        age: 20
    },
    /*服务器返回数据类型*/
    dataType: "json/html/xml/text/jsonp/script",
    /*请求成功后的回调函数*/
    success: function(data, status, xhr) {
        //..callback
    },
    /*请求失败时的回调函数*/
    error: function() {
        //error
    }
});

同步和异步的区别

同步：js代码加载到当前AJAX的时候，页面里所有的代码都会停止加载，当AJAX执行完毕后才会执行ajax后面的代码，页面会出现假死状态。

异步：当ajax发送请求，等待服务器端返回数据的这个过程当中，前台会继续执行ajax后面的代码，也就是说这时候是两个线程（ajax发送的线程和ajax块后的线程）                

ie各版本和chrome可以并行下载多少个资源

IE6 两个并发，iE7升级之后的6个并发，之后版本也是6个 Firefox，chrome也是6个                                         

ajax的优缺点和在IE下的问题？

优点：

1. 不需要插件支持，可以被大多数浏览器支持
2. 能在不刷新整个页面的前提下更新数据，提升用户体验
3. A减轻服务器和带宽的负担

缺点：

1. 不支持后退按钮
2. 对搜索引擎不友好
3. 开发和调试工具匮乏
4. 安全问题，AJAX暴露了与服务器交互的细节。

IE缓存问题：在IE下，如果是GET请求，并且URL不变，这个结果会被缓存

解决办法：可以向URL添加一个唯一的id 

xhr.open("GET","demo_get.asp?t=" + Math.random(),true);　　

ajax请求的时候get 和post方式的区别?

1. GET从服务器获取数据，POST向服务器发送数据
2. GET使用url传递参数，对传递数据的类型（ASCII编码）和长度（2kb）有限制,POST没有限制。
3. GET安全性较差，因为发送的数据在url中，是可见的。POST更加安全，因为它是通过http post机制传值，是不可见的。

什么情况下分别使用GET和POST？

POST：

1. 无法使用缓存文件（更新服务器上的文件或数据库）
2. 向服务器发送大量数据（POST 没有数据量限制）
3. 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

GET：

1. 请求是为了查找资源，HTML表单数据仅用来帮助搜索。
2. 请求的数据不超过2kb

Post一个file的时候file放在哪的？

请求实体

ajax请求时，如何解释json数据

原生js的AJAX：

1. eval( '('+jsonstr+')' ) :这种方法不推荐，这种方法解析的时候不会去判断字符串是否合法，而且json对象中的js方法也会被执行，这是非常危险的。
2. JSON.parse(jsonstr):解析JSON格式的字符串,返回一个js值，如果字符串不合法会报错。

Jquery的AJAX:

jquery异步请求将type设为“json”，如果不添加该条属性，则返回来的为字符串。或者利用$.getJSON()方法获得服务器返回json数据，这时候返回的就是json对象了

$.each()是用来在回调函数中解析JSON数据的方法

$.each( collection, callback(indexInArray, valueOfElement) )

success : function(data) {
      $.each(data.list,function(index,item){
       alert(item.id);
      })
     }

多个ajax怎么处理

Ajax 同时处理多个异步请求，可能出现这样的错误：只有最后一个异步请求有效，其他的都没效果。所以当我们执行完一次异步请求就应该把这次创建出来的 XMLHttpRequest 对象删除，然后再执行下一次异步请求。删除使用 delete 即可:delete xhr;  

    
Input1: 
    
Input2: 
    
Input3: 
    

php
    header('Content-Type:text/html;Charset=utf-8');
    echo $_GET['text'];
?>

JSON

JSON 的了解？

1. JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。
2. 它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小，是前后台数据交互最常见的一种形式。
3. 格式采用键值对的方式，{'age':'12', 'name':'back'}

XML和JSON的区别？

1. 数据体积方面：json比xml数据体积小
2. 数据交互方面：json与JavaScript的交互更加方便，更容易解析处理
3. 数据描述方面：json比xml要差
4. 传输速度方面：json比xml快的多

JSON字符串转换为JSON对象（互转）

1. eval( '('+jsonstr+')' ) :这种方法不推荐，该方法解析的时候不会去判断字符串是否合法。eval会执行json串中的表达式， 这种方式不安全
2. JSON.parse(jsonstr):解析JSON格式的字符串,返回一个js值，如果字符串不合法会报错。 
3. jQuery支持的转换方式：$.parseJSON( jsonstr );
4. JSON.stringify(jsonobj); //可以将json对象转换成json字符串

浏览器、http

一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）

1. 用户发送一个url请求
2. 浏览器通过DNS获取网站的IP地址：客户端先检查本地是否有对应的IP地址，若找到则返回，若没有则请求上级DNS服务器，直到找到或找到根节点。
3. 浏览器和服务器通过TCP三次握手来建立TCP连接。
4. 一旦连接建立，浏览器会通过该连接向服务器端发送HTTP请求
5. 远程服务器找到资源并返回响应报文，响应报文中包含状态码。（200表示请求成功）
6. 请求成功后服务器返回相应的资源，客户端下载资源
7. 释放TCP连接。
8. 接下来就是页面渲染阶段了。首先解析HTML生成DOM树，再解析CSS文件生产渲染树。 javascript又可以根据 DOM API 操作 DOM

说说TCP传输的三次握手四次挥手策略

1、三次握手：为了将数据准确无误的送达目标处，TCP协议采用三次握手策略。

三次握手的过程是：

1. 发送端先发送一个带有SYN标志的数据包给接收端
2. 接收端收到数据包后，传回一个带有SYN/ACK标志的数据包以示传达确认信息
3. 发送端再发送一个带有ACK表示的数据包以示握手成功。

在这个过程当中，如果发送方在规定的延迟时间内没有收到回复则默认接收方没有收到请求，TCP协议会再次发送数据包。直到收到回复为止。

2、断开一个TCP连接需要四次握手：

1. 主动关闭方发送一个FIN，用来关闭主动方到被动方的数据传送。（但是在fin包之前发送出去的数据，如果没有收到ack确认报文，主动关闭方还是会再次发送这些数据。此时主动关闭方还可以接受数据）
2. 被动关闭方收到fin包后，发送一个ack给对方。确认序号为收到序号+1。
3. 被动关闭方发送一个fin，用来关闭被动关闭方到主动关闭方的数据传送。
4. 主动关闭方收到fin后，发送一个ack给对方，确认序号为收到序号+1，至此，完成四次握手。

其他 HTTP 请求方法

在请求头的第一行包含了请求的方法，它包括OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE

1. GET：从指定资源请求数据
2. POST：向指定的资源发送数据
3. HEAD：和GET相同，但是只返回HTTP报头，不返回文档主体
4. DELETE：删除指定资源
5. OPTIONS：返回服务器支持的HTTP方法
6. CONNECT:把请求的连接转换到透明的TCP/IP通信
7. PUT：上传指定的URL表示

TCP和UDP的区别

1. TCP（Transmission Control Protocol,传输控制协议）：是基于连接的协议。也就是说在发送数据前，必须和对方建立可靠的连接。一个TCP连接必须通过三次握手才能建立起来。
2. UDP（User Data Protocol,用户数据报协议）：是于TCP相对应的协议。它是面向非连接的协议。也就是说他不与对方建立连接，而是直接把数据包发送过去。UDP适用于一次只传少量的数据、并且对可靠性要求不高的应用环境

HTTP状态码

1. 200 OK 请求成功
2. 201 Created 请求成功并且服务器创建了新的资源
3. 202 Accepted 请求接受但尚未处理
4. 301 Move Permanently 永久性重定向，请求的网页已被永久性的移到了新的位置。请求的报文中会附带重定向的URL。
5. 302 Found 临时性重定向
6. 304 Not Modified 自从上次请求后，请求的网页未修改过。可直接使用缓存
7. 400  Bad Request 服务器无法理解请求的格式
8. 401 Unauthorized 请求未授权。
9. 402 Forbidden 禁止访问。
10. 404 Not Found 找不到如何与 URI 相匹配的资源。
11. 500 Internal Server Error 最常见的服务器端错误。
12. 503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。

HTTP最常见的响应头

1. Allow 服务器支持哪些请求方法（如GET、POST等）；
2. Content-Encoding 数据的压缩格式
3. Content-Length 表示内容长度
4. Content-Type 数据的类型.
5. Cache-controll 它是一个相对时间，表示从请求时间到过期时间的秒数。
6. Date：当前的GMT时间。
7. ETag：Last-Modified类似, 不过他发送的是一个字符串来标识url的版本
8. Expires 它是一个绝对时间，表示在指定时间后缓存失效。-1或0则是不缓存. 
9. Last-Modified 当前资源的最后修改时间，客户可以通过If-Modified-Since请求头提供一个日期，只有改动时间迟于指定时间的文档才会返回，否则返回一个304状态
10. Location 配合302状态码（临时性重定向）使用, 用于告诉客户找谁
11. Server 服务器的类型

http请求头有哪些字段

1. 请求行：请求的方法，url,http协议版本（ url在请求行, cookie在请求头）
2. Accept-Encoding 客户端支持的数据压缩格式
3. Accept-Language 客户端的语言环境
4. Connection:处理完这次请求后是否断开连接还是继续保持连接
5. Cache-Control 指定请求和响应遵循的缓存机制
6. pragma:no-cache表示禁用缓存，必须返回一个刷新后的文档

HTTP和HTTPS

1. HTTP协议通常在TCP协议之上
2. 在HTTP和TCP之间添加一个安全协议层，这个时候就成了HTTPS
3. http端口号80，https是443。http更加安全

http的端口号，ftp的端口号

1. HTTP默认的端口号为80
2. FTP默认的端口号为21
3. HTTPS默认的端口号为443

为什么HTTPS安全

1. 因为网络请求需要中间有很多的服务器路由器的转发。中间的节点都可能篡改信息
2. 而使用HTTPS，密钥只有在你和终点站才有。
3. 之所以比较安全是因为它利用SSL/TSL协议传输，保证了数据传输过程的安全。

关于Http 2.0 你知道多少？、http1和http2的区别

1. http2采用二进制格式而非文本格式
2. http2使用爆头压缩，降低了开销
3. 让服务器可以将响应主动推送到客户端的缓存中
4. http2是完全的多路复用，非有序并阻塞的。只需要一个连接即可实现并行。

什么是Etag？应用

1. 服务器使用它来判断页面是否被修改过。
2. 当浏览器请求一个页面，服务器返回页面并且给页面加上一个Etag，浏览器缓存页面和Etag，再次请求该页面时将Etag发送给服务器，服务器检查Etag判断未修改，返回304和空的响应体。浏览器收到304的状态码后使用缓存文件。

web缓存,浏览器怎么知道要从缓存获取；

1. 当浏览器请求一个页面，服务器返回页面并且给页面加上一个Etag，浏览器缓存页面和Etag，再次请求该页面时将Etag发送给服务器，服务器检查Etag判断未修改，返回304和空的响应体。浏览器收到304的状态码后使用缓存文件。

有没有方法不请求不经过服务器直接使用缓存。（强缓存和协商缓存的命中和管理）、浏览器缓存的区别

1. 浏览器在加载资源时，首先浏览器会根据第一次请求资源时缓存的响应头里的Expires和Cache-Control信息来判断是否命中强缓存，如果命中，浏览器直接从缓存中读取资源，不会发送请求到服务器。
2. 当强缓存没有命中的时候，浏览器发送一个请求到服务器。服务器根据响应头的Last-Modified和Etag信息来判断是否命中协商缓存，如果命中，服务器返回一个304的状态码和空的响应体，浏览器收到304的状态码后使用缓存文件。
3. 当协商缓存没有命中的时候，浏览器直接从服务器加载资源。

Expires和Cache-Control

Expires和Cache-Control是http响应头信息，都用来表示资源在客户端缓存的有效期。浏览器强缓存就是利用它们来实现的。

Expires是较老的强缓存管理header，它是服务器返回的一个绝对时间。用GMT格式的字符串表示。它的缓存原理是：

1. 当浏览器第一次请求一个资源时，服务器返回资源的同时，会在响应头里加上Expires的header。
2. 浏览器收到这个资源后，会把资源和响应头都缓存下来。
3. 当浏览器再次请求这个资源时，先在自己的缓存里寻找，找到后判断当前请求时间是否在Expires之前。如果是就命中强缓存，浏览器直接从缓存中读取资源，不会发送请求到服务器。
4. 如果缓存都没有命中，浏览器直接从服务器加载资源时，Expires会被更新。

Cache-Control是比较新的缓存管理header，它是一个相对时间，单位是秒，它的缓存原理是：

1. 当浏览器第一次请求一个资源时，服务器返回资源的同时，会在响应头里加上Cache-Control的header。
2. 浏览器收到这个资源后，会把资源和响应头都缓存下来。
3. 当浏览器再次请求这个资源时，先在自己的缓存里寻找，找到后根据第一次请求时间和Cache-Control设定的有效期，计算出一个资源过期时间。如果当前请求事情在过期时间之前。如果是就命中强缓存，浏览器直接从缓存中读取资源，不会发送请求到服务器。
4. 如果缓存都没有命中，浏览器直接从服务器加载资源时，Cache-Contro会被更新。

304与200读取缓存的区别？讲讲304缓存的原理

1. 当浏览器对某个资源的请求命中了强缓存时，返回的http状态为200
2. 当浏览器对某个资源的请求没有命中强缓存，就会发一个请求到服务器，验证协商缓存是否命中，如果协商缓存命中，请求响应返回的http状态为304，浏览器收到304的状态码后使用缓存文件。

禁止缓存，期限，修改/请列举三种禁止浏览器缓存的头字段, 并写出相应的设置值

1.加载文件的时候在文件末尾给一个时间戳作为版本参数以强制刷新

2.meta方法:在meta标签里设置http-equiv属性，它是用来在HTML文档中模拟HTTP响应头报文的东西。

1. expires： 告诉浏览器把回送的资源缓存多长时间  -1或0则是不缓存
2. Cache-Control: no-cache 描述的是相对时间。　　
3. Pragma: no-cache 设定禁止浏览器从本地获取缓存。

在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次js请求一般情况下有哪些地方会有缓存处理？

dns缓存，cdn缓存，浏览器缓存，服务器缓存。

webscoket会用吗？webSocket如何兼容低浏览器,websocket原理，应用场景

1、webscoket是HTML5提供的传输协议。websocket是应用层第七层上的一个应用层协议，它必须依赖 HTTP 协议进行一次握手 ，握手成功后，数据就直接从 TCP 通道传输，与 HTTP 无关了。它可以将服务器的更新及时主动的发给客户端,而不需要客户端以一定时间间隔去轮询。

2、目前主流的浏览器都支持这个协议，IE还不支持。如何兼容呢？

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

3、原理：Websocket的数据传输是frame形式传输的，比如会将一条消息分为几个frame，按照先后顺序传输出去。这样做会有几个好处：

1. 大数据的传输可以分片传输，不用考虑到数据大小导致的长度标志位不足够的情况。
2. 和http的chunk一样，可以边生成数据边传递消息，即提高传输效率。

4、应用场景：社交聊天、弹幕、多玩家游戏、协同编辑、基于位置的应用、体育实况更新、视频会议/聊天等需要高实时的场景

说说网络分层里七层模型是哪七层(从上到下)

1. 应用层:允许访问OSI环境的手段
2. 表示层:对数据进行翻译、加密和压缩
3. 会话层:建立、管理和终止会话
4. 传输层(TCP和UDP)：提供端到端的可靠报文传递和错误恢复
5. 网络层(IP)：负责数据包从源到宿的传递和网际互连
6. 数据链路层：将比特组装成帧和点到点的传递
7. 物理层：通过媒介传输比特,确定机械及电气规范

各种协议

1. ICMP协议： 因特网控制报文协议。它是TCP/IP协议族的一个子协议，用于在IP主机、路由器之间传递控制消息。
2. TFTP协议： 是TCP/IP协议族中的一个用来在客户机与服务器之间进行简单文件传输的协议，提供不复杂、开销不大的文件传输服务。
3. HTTP协议： 超文本传输协议，是一个属于应用层的面向对象的协议，由于其简捷、快速的方式，适用于分布式超媒体信息系统。
4. DHCP协议： 动态主机配置协议，是一种让系统得以连接到网络上，并获取所需要的配置参数手段。

介绍一下你对浏览器内核的理解？

主要分为渲染引擎和JS引擎，浏览器内核不同导致渲染的效果不同。

1. 渲染引擎：负责取得网页的内容（HTML、图片,css等），以及计算网页的显示方式，再输出到显示器或打印机
2. JS引擎：解析和执行JavaScript来实现网页的动态效果。

介绍常用的几种浏览器和内核

1. IE：Trident 
2. Firefox:Gecko
3. Opera:以前是presto内核，Opera现已改用Google Chrome的Blink内核
4. chrome:Blink(基于webkit，Google与Opera Software共同开发) 
5. safari:WebKit

WEB应用从服务器主动推送Data到客户端有那些方式？

1. 基于 AJAX 的长轮询（long-polling）方式，服务器Hold一段时间后再返回信息；
2. HTTP Streaming，通过iframe和

点击按钮后把数据存在数组里，数组元素是对象存放name和age,然后按照age排序，清空tbody后把内容逐次加到列表当中

    window.onload = function() {
        var btn = document.getElementById('age');//获取要刷新那一行的按钮
        var tbody = document.getElementsByTagName('tbody')[0];
        var tr = tbody.getElementsByTagName('tr');
        var age = [],//保存哪一行的数据
            result = [];//保存刷新后的值
        for (var i = 0; i < tr.length; i++) {
            var msg = parseInt(tr[i].getElementsByTagName('td')[2].innerHTML);
            var brr = [msg, i]
            age.push(brr);//将每一行的数据和对应的行数保存在二维数组中
        };
        flag = true;//只能点击一次
        btn.onclick = function() {
            if (flag) {
                age = age.sort();//从小到大排序
                for (var i = 0; i < age.length; i++) {
                    var key = age[i][1];
                    result.push(tr[key]);//将排序后的tr保存起来
                };
                tbody.innerHTML = "";
                for (var i = 0; i < result.length; i++) {
                    tbody.appendChild(result[i]);//更新整个table
                };
                flag = false;
            };
        }

    }

实现一个可拖动的div(要考虑到浏览器兼容性)

/*盒子设置宽高，并且相对定位*/
 #box {
        width: 100px;
        height: 100px;
        background-color: red;
        position: relative; 
    }

//确定窗口大小
var screenheight=document.body.clientHeight   /*混杂模式*/
                 ||document.documentElement.clientHeight /*标准模式*/
                 ||window.innerHeight;  /*移动设备*/
var screenwidth=  document.body.clientWidth   /*混杂模式*/
                  ||document.documentElement.clientWidth /*标准模式*/
                   ||window.innerWidth; 

/*  a) 给需要拖拽的节点绑定mousedown, mousemove, mouseup事件
    b) mousedown事件触发后， 开始拖拽
    c) mousemove时， 需要通过event.clientX和clientY获取拖拽位置， 并实时更新位置
    d) mouseup时， 拖拽结束
    e) 需要注意浏览器边界的情况*/

手写闭包，继承,

//闭包内的变量不会被垃圾回收机制回收
function fn(){
    var n=0;
    return function(){
        n++;
        console.log(n);
    }
}
var foo=fn();
foo();//1
foo();//2
foo();//3

手写事件绑定

var EventUtil={
            addEvent:function(item,type,fn){
               if (item.addEventListener) {
                     item.addEventListener(type,fn,false);
               }else if (item.attachEvent) {
                     item.attachEvent('on'+type,fn)  //IE
               }else{
                     item['on'+type]=fn;
               }
            },
            removeEvent:function(item,type,fn){
                if (item.removeEventListener) {
                     item.removeEventListener(type,fn,false);
               }else if (item.detachEvent) {
                     item.detachEvent('ob'+type,fn)  //IE
               }else{
                     item['on'+type]=null;
               }
            },
            getEvent:function(e){
               return e || window.event;
            },
            getTarget: function(e) {
                var e = this.getEvent(e);
                var target = e.target || e.srcElement;
                if (target.nodeType === 3) {//空白节点
                    target = target.parentNode;
                }
                return target;
            }
        }

手写一个原生ajax

    AJAX局部刷新
    

    

 手写实现jquery里面的insertAfter（结合nextSibling和insertBefore来实现）

写一个通用的事件侦听器函数?

    window.onload = function() {
        var Event = {
            /*视能力分别使用dom2||IE||dom0方式 来绑定事件*/
            addEvent: function(ele, type, fn) {
                if (ele.addEventListener) {
                    ele.addEventListener(type, fn, false);
                } else if (ele.attachEvent) {
                    ele.attachEvent('on' + type, function() {
                        fn.call(ele);
                    });
                } else {
                    ele['on' + type] = fn;
                }
            },
            removeEvent: function(ele, type, fn) {
                if (ele.removeEventListener) {
                    ele.removeEventListener(type, fn, false);
                } else if (ele.detachEvent) {
                    ele.detachEvent('on' + type, fn);
                } else {
                    ele['on' + type] = null;
                }
            },
            stopProrpgation: function(e) {

                e = this.getEvent(e);
                console.log(e);
                if (e.stopProrpgation) {
                    e.stopProrpgation();
                } else {
                    e.cancleBubble = true;
                }
            },
            preventDefault: function(e) {
                e = this.getEvent(e);
                if (e.preventDefault) {
                    e.preventDefault();
                } else {
                    e.returnValue = false;
                }
            },
            getEvent: function(e) {

                return e || window.event;
            },
            getTarget: function(e) {
                var e = this.getEvent(e);
                var target = e.target || e.srcElement;
                if (target.nodeTypr === 3) {
                    target = target.parentNode;
                }
                return target;
            }
        }
        var btn = document.getElementById('btn');

        function handler() {
            /*alert(this.id);*/
            Event.getEvent();
            Event.stopProrpgation();
            Event.preventDefault();
        }
        Event.addEvent(btn, 'click', handler);
        /* Event.removeEvent(btn, 'click', handler);*/
    }

如何获取UA

用来表明用户的浏览器名称和版本，操作系统等信息。在每一次HTTP请求中，响应头部都会包含UA字符串，用于浏览器识别和数据统计。在js中可以用navigator.userAgent属性来获取本浏览器的UA字符串。UA可以让网页开发者能够根据不同的浏览器发送不同的显示内容，为了避免浏览器不支持的功能，以获得更好的用户体验。例如“Mozilla/1.0 (Windows NT 6.1; rv:2.0.1) Gecko/20100101Firefox/4.0.1”,此字符串表明这是一个 Windows 版的使用 Gecko 引擎(火狐浏览器内核)的火狐浏览器。

    浏览器名称：

    完整的浏览器名称：

    浏览器版本：

    浏览器的用户代理字符串：

    点击获取浏览器信息

字符串匹配，一个字符串子在另一个字符串中出现的次数 

function getStrNum(subStr,str){
    //RegExp构造函数动态创建正则表达式，RegExp构造函数第一个参数是正则表达式主题部分，
    //第二个参数可选，是正则的修饰符，g表示全局搜索
    var pattern=new RegExp(subStr,'g');//全局匹配的正则对象
    //
    return str.match(pattern).length;
}

将一篇文章的每个单词首字母大写；不改变原有的格式

function tooUpperLetter(str) {
    return str.replace(/\b\w+\b/g, function(word) {
        return word.substring(0, 1).toUpperCase() + word.substring(1);
    })
}

快排实现的原理

function quickSort(arr){
    if (arr.length<=1) return arr;
    var left=[],right=[];
    var num=Math.floor(arr.length/2);//取得中间的数值，将它从数组中删除
    var value=arr.splice(num,1);
    for (var i = 0; i < arr.length; i++) {
        if (arr[i]<value) {
           left.push(arr[i])；
        }else{
            right.push(arr[i]);
        }
    }
 return arguments.callee(left).concat(numValue,arguments.callee(right));
}

请用Css写一个简单的幻灯片效果页面

百度搜索框

手机某一行均分为四个，不知道尺寸的情况下

如何自己实现一个alert

三个tab页面，实现代码

有没有写过插件，用js写过什么（然后就是具体描述怎么实现的）

给你一个url,判断是否是同一个域名(qq.com)下的

图片预加载

.js：写一个递归。就是每隔5秒调用一个自身，一共100次。

js轮播实现思路

使用js画一个抛物线,抛物线上有个小球随着抛物线运动,有两个按钮能使小球继续运动停止运动

实现两个大整数的相加,怎么实现两个大整数的相乘说下思路

说下选择排序,冒泡排序的实现思路

url去参数的题

手写一个盒子模型中，获取盒子内子节点的class样式

深度遍历DOM节点 

复杂的酒店预订table

手写jsonp的实现

手写链表倒数第K个查找

手写一个jQuery插件

手写一个简单遍历算法

手写归并排

实现两个数组的排序合并，我一开始先合并再排序，他不乐意，然后我用了类似插入排序的方法

手写实现一个promise（不会）

手写实现requireJS模块实现（想了半天才想到createElement("script"），配合异步来加载，闭包导出）

JS配合DOM实现EChart柱状图

 

移动端

有移动端的经验么？

移动端适配问题

1)    

 //width=device-width ：强制让文档的宽度与设备的宽度保持1:1

 // initial-scale=1.0：文档初始化缩放比例是1:

 //user-scalable=0：不允许用户点击屏幕放大浏览，   

//maximum-scale=1.0：允许用户缩放到的最大比例，   

注意：content里多个属性的设置一定要用逗号+空格来隔开，如果不规范将不会起作用。

其他属性有：width;height; initial-scale; minimum-scale; maximum-scale; user-scalable;

2)     

 //iPhone私有标签，它表示：允许全屏模式浏览

3)     

//iPhone私有标签，它指定的iPhone中safari顶端的状态条的样式

4)     //不识别邮件和不把数字识别为电话号码

你用了移动端的什么库类和框架？

移动端要注意哪些
适配有去考虑么，retina屏幕啊？

 

关于前端

你觉得哪些站点前端技术比较好的？或者说你平时怎么学前端的？看过哪些前端的书

你有什么规划？

你所了解的前端技术栈有哪些

你有什么问题要问的么？前端妹子的发展路线都有哪些？前端技术多而杂，好的学习方法?

移动端和pc差别

 自学经历

数据结构

解释平衡二叉树，以及在数据结构中的应用

平衡二叉树相关知识

图论最短路径算法

数组和链表的区别，空间和时间上的优劣，查找和删除的选择

快排的时间复杂度和空间复杂度。

常见排序算法的时间复杂度 

数据集A、数据集B大小500GB，电脑内存很小，如何求得AB的差集。

数组和链表的区别 

后序遍历的实现代码

排序算法总结

栈和队列

冒泡快排算法思路，复杂度

整型数组全排列问题

virtual dom的实现，diff算法

对模块化了解吗？说说有哪些模块化的库，有了解过模块化的发展的历史吗？（commonJS，RequireJS，SeaJS）

分别说说同步和异步模块化的应用场景，说下AMD异步模块化实现的原理？（看JS设计模式的时候看过同步模块模式，所以我只答了同步模块化的实现，但是AMD异步的不会）

如何将项目里面的所有的require的模块语法换成import的ES6的语法？

复习数据结构 排序算法重新写一遍，二分，链表的算法，BFS，DFS，图论最短路径等算法，以前基础不错写了大量博客， 所以看看自己的博客，复习起来很快

刷前端面经 bind，debounce，once，深浅拷贝等的ployfill

事件委托，JQ链式调用实现，原生ajax，函数式，柯里化

常见的跨域方式和原理（主要是jsonp和CORS，记得CORS一定要动手自己写后端才能理解深刻）

前端安全之XSS和CSRF，以及如何防御

ES6部分，let暂时性死区，箭头函数（this指针，arguments的坑），generator/iterator，promise，阮一峰老师的那本电子书

模块化历史以及同步异步原理

webpack 2.0 慕课网上看一个大神的视频，讲的很好

360奇舞团瓜瓜老师的性能优化的视频，关键渲染路径，网页渲染过程，资源对渲染的阻塞

根据前几轮面试暴露的缺点，做了下面的实践

80行代码的类工厂，原型链继承面向对象的一个实践

100行简单实现AMD异步模块加载器（JS设计模式这本书上有样例代码）

看Vue文档练手，然后阅读Vue.js早期源码，简单实现MVVM双向绑定，数组监听，简单指令实现

看gayhub上的仓库的代码，模仿virtual-dom的实现，diff算法

• padding百分比是相对于父级宽度还是自身的宽度

 

转载于:https://www.cnblogs.com/t1amo/p/6600828.html