面试题二

创建AJAX过程

1. 创建XMLHttpRequest对象，也就是创建一个异步调用的对象。

2. 创建一个新的HTTP请求，并指定该HTTP请求的方法、URL及验证信息。

3. 设置响应HTTP请求状态变化的函数。

4. 发送HTTP请求。

5. 获取异步调用返回的数据。

6. 使用javaScript和DOM实现局部刷新。

请介绍一下XMLhttprequest对象（ajax工作原理、核心思想）

Ajax的核心是JavaScript对象XmlHttpRequest。它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。通过XMLHttpRequest对象，Web开发人员可以在页面加载以后进行页面的局部更新。

ajax的优点

1、最大的一点是页面无刷新，在页面内与服务器通信，给用户的体验非常好。

2、使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。

3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。

XML是什么？

• XML 指可扩展标记语言（EXtensible Markup Language）

• XML 是一种标记语言，很类似 HTML

• XML 的设计宗旨是传输数据，而非显示数据

• XML 标签没有被预定义。您需要自行定义标签。

• XML 被设计为具有自我描述性。

• XML 是 W3C 的推荐标准

XML 与 HTML 的主要差异

• XML 被设计为传输和存储数据，其焦点是数据的内容。

• HTML 被设计用来显示数据，其焦点是数据的外观。

• HTML 旨在显示信息，而 XML 旨在传输信息。

XHTML是什么

• XHTML 是更严谨更纯净的 HTML 版本

• XHTML 指可扩展超文本标签语言（EXtensible HyperText Markup Language）。

• 是作为一种 XML 应用被重新定义的 HTML。

• XHTML 是一个 W3C 标准。

CSS中link 和@import的区别是？

• (1) link属于HTML标签，而@import是CSS提供的;

• (2) 页面被加载的时，link会同时被加载，而@import被引用的CSS会等到引用它的CSS文件被加载完再加载;

• (3) import只在IE5以上才能识别，而link是HTML标签，无兼容问题;

• (4) link方式的样式的权重 高于@import的权重.

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

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）

优先级为:

!important > id > class > tag

important 比 内联优先级高,但内联比 id 要高

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

CSS3有哪些新特性？

CSS3实现圆角（border-radius），阴影（box-shadow），

对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）

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

增加了更多的CSS选择器 多背景 rgba

在CSS3中唯一引入的伪元素是::selection.

媒体查询，多栏布局

border-image

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

1）创建新节点

​ createDocumentFragment() //创建一个DOM片段

​ createElement() //创建一个具体的元素

​ createTextNode() //创建一个文本节点

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

​ appendChild()

​ removeChild()

​ replaceChild()

​ insertBefore() //并没有insertAfter()

3）查找

​ getElementsByTagName() //通过标签名称

​ getElementsByName() //通过元素的Name属性的值(IE容错能力较强，

​ 会得到一个数组，其中包括id等于name值的)

​ getElementById() //通过元素Id，唯一性

null和undefined的区别？

null是一个表示”无”的对象，转为数值时为0；undefined是一个表示”无”的原始值，转为数值时为NaN。

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

§ absolute :生成绝对定位的元素， 相对于最近一级的 定位不是 static 的父元素来进行定位。

§ fixed （老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口或 frame 进行定位。

§ relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。

§ static 默认值。没有定位，元素出现在正常的流中

§ sticky 生成粘性定位的元素，容器的位置根据正常文档流计算得出

说说你对作用域链的理解

作用域链的作用是保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问，变量访问到window对象即被终止，作用域链向下访问变量是不被允许的。

说说你对闭包的理解

使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。在js中，函数即闭包，只有函数才会产生作用域的概念

闭包有三个特性：

1.函数嵌套函数

2.函数内部可以引用外部的参数和变量

3.参数和变量不会被垃圾回收机制回收

javascript对象的几种创建方式

1，工厂模式

2，构造函数模式

3，原型模式

4，混合构造函数和原型模式

5，动态原型模式

6，寄生构造函数模式

7，稳妥构造函数模式

javascript继承的6种方法

1，原型链继承

2，借用构造函数继承

3，组合继承(原型+借用构造)

4，原型式继承

5，寄生式继承

6，寄生组合式继承

说说你对前端架构师的理解

负责前端团队的管理及与其他团队的协调工作，提升团队成员能力和整体效率； 带领团队完成研发工具及平台前端部分的设计、研发和维护； 带领团队进行前端领域前沿技术研究及新技术调研，保证团队的技术领先 负责前端开发规范制定、功能模块化设计、公共组件搭建等工作，并组织培训。

vue-router是什么？它有哪些组件？

答：vue用来写路由一个插件。router-link、router-view

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

把CSS样式表置于顶部

把JS脚本置于页面底部

避免使用 CSS 表达式（Expression）

使用外部 JavaScript 和 CSS 削减 JavaScript 和 CSS 用 <link> 代替 @import

剔除重复脚本

减少DOM访问

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

使用eval parse,鉴于安全性考虑 使用parse更靠谱

JSON.parse(jsonstr); //可以将JSON字符串反序列化成JSON对象

JSON.stringify(jsonobj); //可以将JSON对象序列化成JSON对符串

写一段css3动画，在5s内，div背景色从red变为blue

div

{

width:100px;

height:100px;

background:red;

animation:myfirst 5s;

}

 

@keyframes myfirst

{

from {background:red;}

to {background:yellow;}

}

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

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

html5有哪些新特性？如何区分 HTML 和 HTML5？

HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。(1)绘画 canvas;(2)用于媒介回放的 video 和 audio 元素;(3)本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;(4)sessionStorage 的数据在浏览器关闭后自动删除;(5)语意化更好的内容元素，比如 article、footer、header、nav、section;(6)表单控件，calendar、date、time、email、url、search;

区别：<!DOCTYPE html>

javascript数据类型有哪些?

js中有六种数据类型，包括五种基本数据类型（Number,String,Boolean,Undefined,Null）,和一种复杂数据类型（Object）。

MVVM和MVC的区别

MVVM中的View 和 ViewModel可以互相通信。也就是可以互相调用。MVC中的是单向通信。也就是View跟Model，必须通过Controller来承上启下

关于数组的10个操作方法！

shift() 方法：把数组的第一个元素删除，并返回第一个元素的值

concat() 方法：用于连接两个或多个数组,并返回一个新数组，新数组是将参数添加到原数组中构成的

join() 方法：用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。

pop() 方法：用于删除并返回数组的最后一个(删除元素)元素,如果数组为空则返回undefined ,把数组长度减 1

 push() 方法：可向数组的末尾添加一个或多个元素，并返回新的长度，（用来改变数组长度）。

reverse() ：方法用于颠倒数组中元素的顺序。

slice() 方法：可从已有的数组中返回选定的元素。slice(开始截取位置，结束截取位置)

splice() ：方法向/从数组中添加/删除项目，然后返回被删除的项目。

unshift：将参数添加到原数组开头，并返回数组的长度

sort(orderfunction)：按指定的参数对数组进行排序