2020年前端笔试面试题(Dance camp)

一.CSS篇:

1.什么是渐进增强（progressive enhancement）、优雅降级（graceful degradation）？

渐进增强 progressive enhancement：

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

优雅降级 graceful degradation：

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

两者的区别：

• 优雅降级是从最复杂的现状开始,并试图减少用户体验的供给;而渐进增强是从最基础的、能够起作用的版本开始,并且不断扩充,以适应未来环境的需求。更合适的说话是,渐进增强是保证基本效果的情况下增强效果,优雅降级是保证最恶劣情况下的基本效果。

2.设计中使用了非标准的字体，该如何处理？

• a.用图片代替。

• b.使用一些在线字体库，例如Typekit，Google Webfonts等。

• c.使用@font-face

3.如何隐藏网页内容，只让它们在屏幕阅读器上使用？

• a.display：none;

• b.visibility:hidden;

• c.overflow:hidden;

• d.position：absolute;top:-999px;

• e.opacity:0;

4.CSS引入的方式有哪些？

• a.使用元素链接外部的样式文件

• b.在head中使用标签里面书写。

• c.在css中使用@import标记来导入样式表单

• d.在DOM中插入style属性。

5.link和@import的区别?

• a.link属于HTML标签的，而@import只是css提供的一种引入方式。

• b.link标签还能干其它很多的事，例如定义RSS，rel连接属性。@import只能加载css

• c.兼容性的差别：@import是CSS2.1提出的，IE5以上的才能识别，link标签无此问题

• d.link属于html文档中的标签，Dom能够控制，但不能对@import进行Dom操作

6.css属性position的属性值有哪些，描述它们的作用。

• a.position:static css中所有的position默认属性都是static.例如两个页面中都有同一个div，一个需要决定定位，另一个不需要。那么可以设置为static

• b.relative相对定位，设置relative之后，就可以设置TRBL("left", "top", "right" 以及 "bottom" ),相对于自己本身的位置进行定位。设置relative，没有TRBL设置，则不会进行任何位置改变。移动之后所占的物理空间还是存在的，相对定位后并不会影响相邻的元素。

• c.绝对定位absolute 给定absolute之后，会飘出文档流，本身的物理空间也消失了。找最近的设置了relative的元素位置进行参照，没有设置则以祖先元素html为参照。

• d.fixed绝对定位，相对于浏览器窗口进行绝对定位，同样可以通过TRBL设置位置。

• e.inherit从父元素中继承position属性。

7.前端页面由哪三层构成，分别是什么？作用是什么？

• 网页分成三个层次，即：结构层、表示层、行为层.

网页的结构层（structural layer）:

• 由 HTML 或 XHTML 之类的标记语言负责创建。标签,也就是那些出现在尖括号里的单词,对网页内容的语义含义做出了描述,但这些标签不包含任何关于如何显示有关内容的信息。例如，P标签表达了这样一种语义:"这是一个文本段."

网页的表示层（presentation layer）:

• 由 CSS 负责创建。CSS 对“如何显示有关内容”的问题做出了回答。 

网页的行为层（behavior layer）:

• 负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。

8.你怎么来实现页面设计图，你认为前端应该如何高质量完成工作? 一个满屏（品）字布局 如何设计?   

• 首先划分成头部、body、脚部； 

• 实现效果图是最基本的工作，精确到2px；与设计师，产品经理的沟通和项目的参与

• 做好的页面结构，页面重构和用户体验处理hack，兼容、写出优美的代码格式针对服务器的优化、拥抱 HTML5。

9、为什么要初始化CSS样式？

• 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异.当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

• 最简单的初始化方法就是： * {padding: 0; margin: 0;} 。

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

• (Q1) 行内元素：会在水平方向排列，不能包含块级元素，设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。 块级元素：各占据一行，垂直方向排列。从新行开始结束接着一个断行。

• (Q2) 兼容性：display:inline-block;*display:inline;*zoom:1;

11、 清除浮动有哪些方式？比较好的方式是哪一种？

(Q1)

• (1)父级div定义height。

• (2)结尾处加空div标签clear:both。

• (3)父级div定义伪类:after和zoom。

• (4)父级div定义overflow:hidden。

• (5)父级div定义overflow:auto。

• (6)父级div也浮动，需要定义宽度。

• (7)父级div定义display:table。

• (8)结尾处加br标签clear:both。

(Q2)

• 比较好的是第3种方式，好多网站都这么用。

12、display有哪些值？说明他们的作用。

• block:块类型。默认宽度为父元素宽度，可设置宽高，换行显示。

• none:缺省值。象行内元素类型一样显示。

• inline:行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。

• inline-block:默认宽度为内容宽度，可以设置宽高，同行显示。

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

• table:此元素会作为块级表格来显示。

• inherit:规定应该从父元素继承 display 属性的值。

13、CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?

• 标签选择符 类选择符 id选择符

• 继承不如指定 Id>class>标签选择

• 后者优先级高

14、什么是静态网页？什么叫做动态网页？

• (1)静态网页：没有数据交互的网页，没有数据库参与，没有服务器端数据的加载。比如静态网页就是只有html+css+JavaScript做成的网站。

• (2)动态网页：有后台数据参与的网页，网页中的数据是从数据库取的，需要有后台逻辑的支持。比如动态网页就是jsp页面（后台语言是java）、asp页面（后台语言是asp.net）。

15、前端语言有哪些？后端语言有哪些？

• (1)前端语言：HTML、css、javascript。

• (2)后端语言（服务器端语言）：php、java、asp.net。最近新出的node.js

16、前端性能优化有哪些方法?

①对于页面来说：

• 尽量减少DOM元素的数量
• 减少iframe的数量
• 减少http的请求次数
• 提前加载

②对于CSS来说：

• 将样式表置顶

• 使用link代替@important

• 区别1：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

• 区别2：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。link支持定义RSS(简易信息聚合).

• 区别3：link支持使用Javascript控制DOM去改变样式；而@import不支持。

③对于JS来说：

• 将脚本置底

• 使用外部JS和CSS文件

• 精简JS和CSS文件，去除重复脚本

二.HTML篇

1.清除浮动的几种方法？

a.使用空标签清除浮动。

• 这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。

b.使用overflow。

• 给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。

c.使用after伪对象清除浮动。

• 该方法只适用于非IE浏览器。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；二、content属性是必须的，但其值可以为空，可设置content属性的值设为”.”。

2.使用 CSS 预处理器的优缺点有哪些？

优点:

• a.css的语法不够强大，需要重复书写很多重复的选择器.css预处理器刚好解决了这一问题。

• b.提供变量和逻辑控制

• c.合理的样式复用机制 减少代码的冗余

• d.提高代码的可维护性

• e.mixin 混入

缺点：

• a.学习成本有点高。

• b.使用这个预处理团队的难度加大

• c.个人感觉是css本来就是很简单的东西，这样搞的更复杂

3.假若你有5个不同的 CSS 文件, 加载进页面的最好方式是?

• 用一个大的css文件代替这5个css文件

4.xhtml的局限性

• a.语法上更严格，放弃了一些语义不好的标签

• b.必须要有head，body.标签必须闭合

• c.一些老的浏览器并不兼容

5.如果把HTML5看做一个开放的平台，那么它构建的模块有哪些？

• a.基于位置服务的LBS

• b.Web Storage API

• c.无插件播放音频和视频

• d.调用相机和GPU图像处理单元等硬件设备

• e.拖拽和Form AP

6.XHTML和HTML有什么区别

• HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言

最主要的不同：

• XHTML 元素必须被正确地嵌套。

• XHTML 元素必须被关闭。

• 标签名必须用小写字母。

• XHTML 文档必须拥有根元素。

7.HTML5 为什么只需要写 !DOCTYPE HTML？

• HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行

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

8.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?

• 用于声明文档使用那种规范（html/Xhtml）一般为严格过度基于框架的html文档。

• 加入XMl声明可触发，解析方式更改为IE5.5 拥有IE5.5的Bug。

9.请描述一下 cookies，sessionStorage 和 localStorage 的区别？

• cookie在浏览器和服务器间来回传递。 sessionStorage和localStorage不会

• sessionStorage和localStorage的存储空间更大;

• sessionStorage和localStorage有更多丰富易用的接口;

• sessionStorage和localStorage各自独立的存储空间;

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

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

11.什么是盒子模型？

• 在网页中,一个元素占有空间的大小由几个部分构成,其中包括元素的内容(content),元素的内边距(padding),元素的边框(border),元素的外边距(margin)四个部分.这四个部分占有的空间中,有的部分可以显示相应的内容,而有的部分只用来分隔相邻的区域或区域.4个部分一起构成了css中元素的盒模型.

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

1、行内元素：

• a、b、span、img、input、strong、select、label、em、button、textarea

2、块级元素：

• div、ul、li、dl、dt、dd、p、h1-h6、blockquote

3、空元素：

• 即系没有内容的HTML元素，例如：br、meta、hr、link、input、img

13.简述一下src与href的区别

• href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。

• src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

14.什么是CSS Hack?

• 一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。

• IE浏览器Hack一般又分为三种，条件Hack、属性级Hack、选择符Hack（详细参考CSS文档：css文档）。例如：

1、条件Hack    <!--[if IE]>       <style>             .test{color:red;}       </style>    <![endif]-->

2、属性Hack

    .test{
    color:#0909; /* For IE8+ */
    *color:#f00;  /* For IE7 and earlier */
    _color:#ff0;  /* For IE6 and earlier */
    }

3、选择符Hack

    * html .test{color:#090;}       /* For IE6 and earlier */
    * + html .test{color:#ff0;}     /* For IE7 */

15.简述同步和异步的区别

• 同步是阻塞模式，异步是非阻塞模式。

• 同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；

• 异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。

16.px和em的区别

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

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

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

渐进增强 progressive enhancement：

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

优雅降级 graceful degradation：

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

区别：

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

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

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

18.怎样添加、移除、移动、复制、创建和查找节点？

1）创建新节点

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

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

appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入

3）查找

getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性

19、实现一个函数clone，可以对JavaScript中的5种主要的数据类型（包括Number、String、Object、Array、Boolean）进行值复制。

/*
* 对象克隆
* 支持基本数据类型及对象
* 递归方法
*/

function clone(obj) {
    var o;
    switch (typeof obj) {
        case "undefined":
            break;
        case "string":
            o = obj + "";
            break;
        case "number":
            o = obj - 0;
            break;
        case "boolean":
            o = obj;
            break;
        case "object": // object 分为两种情况 对象（Object）或数组（Array）
            if (obj === null) {
                o = null;
            } else {
                if (Object.prototype.toString.call(obj).slice(8, -1) === "Array") {
                    o = [];
                    for (var i = 0; i  obj.length; i++) {
                        o.push(clone(obj[i]));
                    }
                } else {
                    o = {};
                    for (var k in obj) {
                        o[k] = clone(obj[k]);
                    }
                }
            }
            break;
        default:
            o = obj;
            break;
    }
    return o;
}

20、如何消除一个数组里面重复的元素？

// 方法一：
var arr1 =[1,2,2,2,3,3,3,4,5,6],
    arr2 = [];
for(var i = 0,len = arr1.length; i< len; i++){
    if(arr2.indexOf(arr1[i]) < 0){
        arr2.push(arr1[i]);
    }
}
document.write(arr2); // 1,2,3,4,5,6

21、在Javascript中什么是伪数组？如何将伪数组转化为标准数组？

伪数组（类数组）：

• 无法直接调用数组方法或期望length属性有什么特殊的行为,但仍可以对真正数组遍历方法来遍历它们.典型的是函数的argument参数,还有像调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组. 可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。

function log(){
      var args = Array.prototype.slice.call(arguments);  
//为了使用unshift数组方法，将argument转化为真正的数组
      args.unshift('(app)');
 
      console.log.apply(console, args);
};

22.请描述一下cookies，sessionStorage和localStorage的区别.

• sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

23.web storage和cookie的区别

• Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
• 除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。

24.手写数组快速排序

• 关于快排算法的详细说明，可以参考阮一峰老师的文章快速排序

“快速排序”的思想很简单，整个排序过程只需要三步：

• （1）在数据集之中，选择一个元素作为”基准”（pivot）。

• （2）所有小于”基准”的元素，都移到”基准”的左边；所有大于”基准”的元素，都移到”基准”的右边。

• （3）对”基准”左边和右边的两个子集，不断重复第一步和第二步，直到所有子集只剩下一个元素为止。

25.一次完整的HTTP事务是怎样的一个过程？

基本流程：

• a. 域名解析

• b. 发起TCP的3次握手

• c. 建立TCP连接后发起http请求

• d. 服务器端响应http请求，浏览器得到html代码

• e. 浏览器解析html代码，并请求html代码中的资源

• f. 浏览器对页面进行渲染呈现给用户

26.CSS优化、提高性能的方法有哪些？

• ①尽量将样式写在单独的css文件里面，在head元素中引用

• ②避免使用复杂的选择器，层级越少越好

• ③精简页面的样式文件，去掉不用的样式

• ④利用CSS继承减少代码

27.XML和JSON的区别？

• (1).数据体积方面。JSON相对于XML来讲，数据的体积小，传递的速度更快些。

• (2).数据交互方面。JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互。

• (3).数据描述方面。JSON对数据的描述性比XML较差。

• (4).传输速度方面。JSON的速度要远远快于XML。

28.cookie 和session 的区别？

• 1、cookie数据存放在客户的浏览器上，session数据放在服务器上。

• 2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗，考虑到安全应当使用session。

• 3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能， 考虑到减轻服务器性能方面，应当使用COOKIE。

• 4、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。

三、Javascript篇

1.Javascript中callee和caller的作用？

• caller是返回一个对函数的引用，该函数调用了当前函数；

• callee是返回正在被执行的function函数，也就是所指定的function对象的正文。

2.什么是事件代理？

• JavaScript事件代理则是一种简单的技巧，通过它你可以把事件处理器添加到一个父级元素上，这样就避免了把事件处理器添加到多个子级元素上。

• 当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。这主要得益于浏览器的事件冒泡机制。

3.javascript的typeof返回哪些数据类型

• typeof 返回值有六种可能： "number," "string," "boolean," "object," "function," 和 "undefined"

4.js中的split、slice、splice函数区别？

a . string.split(separator,limit):

• 该方法是将string分割成片段来创建一个字符串数组,可选参数limit可以限制被分割的片段数量
• separator参数可以是字符串,或者正则表达式,separator是一个空字符,会返回一个单字符的数组。
• limit是返回的数量限制

//"hello world".split('',1);//["h"]
//"hello world".split('',5);//["h", "e", "l", "l", "o"]
//"hello world".split('',-1);//["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d"]
//"hello world".split(' ',2);//["hello", "world"]
//"hello world".split(' ',3);//["hello", "world"]

b .string.slice(start,end)

• slice方法复制string的一部分来构造一个新的字符串

//"hello world".slice(0,5);//"hello"
//"hello world".slice(0,-1);//"hello worl"

c.数组的splice:

• array.splice(start,deleteCount,item...)
• splice方法从array中移除一个或多个数组，并用新的item替换它们。
• 参数start是从数组array中移除元素的开始位置,默认从0开始，参数deleteCount是要移除的元素的个数。

//var a=['a','b','c'];//var b=a.splice(1,1,'e','f');  //a=['a','e','f','c'],b=['b']

• Jquery/Bootstrap/React等框架类库

5、常见浏览器端存储技术有哪些？

cookie:

• cookie会随着每次HTTP请求头信息一起发送，无形中增加了网络流量，另外，cookie能存储的数据容量有限，根据浏览器类型不同而不同，IE6大约只能存储2K。

Flash ShareObject:

• 这种方式能能解决上面提到的cookie存储的两个弊端，而且能够跨浏览器，应该说是目前最好的本地存储方案。不过，需要在页面中插入一个Flash，当浏览器没有安装Flash控件时就不能用了。所幸的是，没有安装Flash的用户极少。
• 缺点： 需要安装Flash插件。

Google Gear:

• Google开发出的一种本地存储技术。
• 缺点： 需要安装Gear组件。

userData:

• IE浏览器可以使用userData来存储数据，容量可达到640K，这种方案是很可靠的，不需要安装额外的插件。
• 缺点： 它仅在IE下有效。

sessionStorage:

• 使用于Firefox2+的火狐浏览器，用这种方式存储的数据仅窗口级别有效，同一个窗口（或者Tab）页面刷新或者跳转，都能获取到本地存储的数据，当新开窗口或者页面时，原来的数据就失效了。
• 缺点： IE不支持、不能实现数据的持久保存。

globalStorage:

• 使用于Firefox2+的火狐浏览器，类似于IE的userData。

1//赋值

2 globalStorage[location.hostname]['name'] = 'tugai'; 

3//读取

4 globalStorage[location.hostname]['name']; 

5//删除

6 globalStorage[location.hostname].removeItem('name');
缺点：IE不支持。

localStorage:

• localStorage是Web Storage互联网存储规范中的一部分，现在在Firefox 3.5、Safari 4和IE8中得到支持。
• 缺点： 低版本浏览器不支持。
• 结论： Flash shareobject是不错的选择，如果你不想在页面上嵌入Flash，可以结合使用userData(IE6+)和globalStorage(Firefox2+)和localStorage(chrome3+)实现跨浏览器。

6.制作一个网站的流程有哪些？

1.咨询:

• 网站的一个目的，服务宗旨，总体的色调，主体内容...包括网站的上线时间，预算。

2.计划:

• 项目的一个建议书，这里罗列出前期咨询沟通的所有细节，包括一些不确认因素

3.准备一个合同:

• 没有合同决不搞任何交易。有合同那基本上可以保证您和客户都不会再随意更改了。

4.做一些研究:

• 这种网站同行是如何做的，竞争对手是如何做的，例如有没有必要做一些seo优化等

5.制作一个网站地图:

• 网站的框架图，骨架。网站的组织架构，易于分工操作

6.准备网站所需的材料:

• 图像，视频，音频材料等

7.开始网站的设计、coding阶段

8.建立测试站点

9.启动网站

7.介绍js的基本数据类型

• Undefined、Null、Boolean、Number、String

8.js有哪些内置对象？ 

• 数据封装类对象：Object、Array、Boolean、Number 和 String

• 其他对象：Function、Arguments、Math、Date、RegExp、Error          

9.this对象的理解

• this总是指向函数的直接调用者（而非间接调用者）；如果有new关键字，this指向new出来的那个对象；在事件中，this指向触发这个事件的对象，特殊的是，IE中的attachEvent中的this总是指向全局对象Window。                                              

10.eval是做什么的？

• 它的功能是把对应的字符串解析成JS代码并运行；应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。由JSON字符串转换为JSON对象的时候可以用eval，var obj =eval('('+ str +')')。

11.DOM怎样添加、移除、移动、复制、创建和查找节点                           

// 创建新节点
                                              
createDocumentFragment() //创建一个DOM片段
                                           
createElement() //创建一个具体的元素
                                             
createTextNode() //创建一个文本节点
                                              
// 添加、移除、替换、插入
                                              
appendChild()
                                              
removeChild()
                                              
replaceChild()
                                             
insertBefore() //在已有的子节点前插入一个新的子节点

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

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

12.null和undefined的区别？

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

undefined：
                             
（1）变量被声明了，但没有赋值时，就等于undefined。
                                              
（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。
                                              
（3）对象没有赋值的属性，该属性的值为undefined。
                                              
（4）函数没有返回值时，默认返回undefined。
                                        
null：
                                    
（1）作为函数的参数，表示该函数的参数不是对象。

（2）作为对象原型链的终点。
                                             

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

• （1）创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。

• （2）属性和方法被加入到 this 引用的对象中。

• （3）新创建的对象由 this 所引用，并且最后隐式的返回 this 。

14. JSON 的了解？

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

• 格式：采用键值对，例如：{'age':'12', 'name':'back'}                                      

15.call() 和 apply() 的区别和作用？

• apply()函数有两个参数：第一个参数是上下文，第二个参数是参数组成的数组。如果上下文是null，则使用全局对象代替。

• 如：function.apply(this,[1,2,3]);

• call()的第一个参数是上下文，后续是实例传入的参数序列。

• 如：function.call(this,1,2,3);

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

• （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）图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。

17.哪些常见操作会造成内存泄漏？

• 1.内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
• 2.垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。
• 3.setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
• 4.闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）。

18.线程与进程的区别

• 1.一个程序至少有一个进程,一个进程至少有一个线程。线程的划分尺度小于进程，使得多线程程序的并发性高。
• 2.另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。
• 3.线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。
• 4.从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。

19、谈一谈JavaScript作用域链

• 当执行一段JavaScript代码（全局代码或函数）时，JavaScript引擎会创建为其创建一个作用域又称为执行上下文（Execution Context），在页面加载后会首先创建一个全局的作用域，然后每执行一个函数，会建立一个对应的作用域，从而形成了一条作用域链。每个作用域都有一条对应的作用域链，链头是全局作用域，链尾是当前函数作用域。

• 作用域链的作用是用于解析标识符，当函数被创建时（不是执行），会将this、arguments、命名参数和该函数中的所有局部变量添加到该当前作用域中，当JavaScript需要查找变量X的时候（这个过程称为变量解析），它首先会从作用域链中的链尾也就是当前作用域进行查找是否有X属性，如果没有找到就顺着作用域链继续查找，直到查找到链头，也就是全局作用域链，仍未找到该变量的话，就认为这段代码的作用域链上不存在x变量，并抛出一个引用错误（ReferenceError）的异常。

20、如何理解JavaScript原型链

• JavaScript中的每个对象都有一个prototype属性，我们称之为原型，而原型的值也是一个对象，因此它也有自己的原型，这样就串联起来了一条原型链，原型链的链头是object,它的prototype比较特殊，值为null。

• 原型链的作用是用于对象继承，函数A的原型属性(prototype property)是一个对象，当这个函数被用作构造函数来创建实例时，该函数的原型属性将被作为原型赋值给所有对象实例，比如我们新建一个数组，数组的方法便从数组的原型上继承而来。

• 当访问对象的一个属性时, 首先查找对象本身, 找到则返回; 若未找到, 则继续查找其原型对象的属性(如果还找不到实际上还会沿着原型链向上查找, 直至到根). 只要没有被覆盖的话, 对象原型的属性就能在所有的实例中找到，若整个原型链未找到则返回undefined

21.JavaScript如何实现继承？

• 构造继承
• 原型继承
• 实例继承
• 拷贝继承
• 原型prototype机制或apply和call方法去实现较简单，建议使用构造函数与原型混合方式。

        function Parent(){
            this.name = 'wang';
        }

        function Child(){
            this.age = 28;
        }
        Child.prototype = new Parent();//继承了Parent，通过原型
        var demo = new Child();
        alert(demo.age);
        alert(demo.name);//得到被继承的属性

23、你做的页面在哪些流览器测试过？

• IE内核浏览器：360，傲游，搜狗，世界之窗，腾讯TT。 

• 非IE内核浏览器：firefox opera safari chrome 。

23、著名的前端框架都有哪些的呢？

• 布局框架：bootstrap、easy UI、 Flutter 等。

• Js动效框架：jquery、angular.js 等。

24、做一个网页设计师或者前端工程师，平常访问学习的IT网站都有哪些？

• （1）、W3Cshool,MDN,网道,菜鸟教程
• （2）、掘金
• （3）、segmentFault
• （4）、csdn
• （5）、博客园
• （6）、知乎论坛
• （7）、简书

25、切图工作是UI设计师来做？还是前端工程师来做？

• 对于app工程师，也就是ios和Android工程师，大多由UI设计师来完成切图。

• 对于web前端工程师，也就是PC端、浏览端，大多有web前端工程师自己完成切图。

26、切图工程师、前端工程师、UI设计师、美工、网页设计师区别是什么？

• (1)UI设计师俗称美工，不过UI设计师工作高端、名字大气、工资上档次，不过大多公司都称呼UI为美工，你也不要介意的，不管他们怎么称呼的，反正就是做网站设计图的就OK，别人怎么称呼不重要的了，只要你拿了高工资就是UI设计师了： UI的主要任务是设计。了解用户的意图，分析网站配色，基本布局。绘制出一个网站效果图。 UI需要掌握的知识体系应该包括网页设计，UI(User Interface)用户界面人机交互、操作逻辑、界面美观的整体设计，UED(user experience design)用户体验设计--简单来说就是如何使得网站更加便于交互。

• (2)前端开发： 美工在完成设计效果图之后，由前端开发人员将其制作成为适合浏览器查看的HTML页面。 由于现在移动互联网的大规模流行，加上各个不同厂商的浏览器的激烈竞争，前端开发的主要任务简单来说就是使网页在不同浏览器不同分辨率不同设备上提供相似或相近的浏览体验。 前端开发需要掌握的知识体系主要是兼容性问题的解决，流畅完美的交互体验。具体到技术细节上就是HTML，CSS，JavaScript，各大公司各种不同内核的浏览器、各种各样的JS库、简单的与后台交互的知识。

27、对前端工程师这个职位你是怎么样理解的？

• a. 前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好

• b. 参与项目，快速高质量完成实现效果图，精确到1px；

• c. 与团队成员，UI设计，产品经理的沟通；

• d. 做好的页面结构，页面重构和用户体验；

• e. 处理hack，兼容、写出优美的代码格式；

• f. 针对服务器的优化、拥抱最新前端技术。

• 28、平时是如何学习前端开发知识？

四.vue篇

1.对于mvvm的理解

• MVVM 是 Model-View-ViewModel 的缩写。
• Model 代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑。 View 代表UI 组件，它负责将数据模型转化成 UI 展现出来。
• ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model 的对象，连接 Model 和 View。
• 在 MVVM 架构下，View 和 Model 之间并没有直接的联系，而是通过 ViewModel 进行交互，Model 和 ViewModel 之间的交互是双向的， 因此 View 数据的变化会同步到 Model 中，而Model 数据的变化也会立即反应到 View 上。
• ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而 View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

2.vue 生命周期

• beforeCreate（创建前） 在数据观测和初始化事件还未开始
• created（创建后） 完成数据观测，属性和方法的运算，初始化事件，$el属性还没有显示出来
• beforeMount（载入前） 在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。
• mounted（载入后） 在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。
• beforeUpdate（更新前） 在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。
• updated（更新后） 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
• beforeDestroy（销毁前） 在实例销毁之前调用。实例仍然完全可用。
• destroyed（销毁后） 在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

3、Vue 实现数据双向绑定的原理：Object.defineProperty（）

• vue 实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。
• vue 的数据双向绑定，将 MVVM 作为数据绑定的入口，整合 Observer，Compile和Watcher三者，通过 Observer 来监听自己的 model 的数据变化，通过 Compile 来解析编译模板指令（vue中是用来解析 {{}}），最终利用 watcher 搭起 observer 和 Compile 之间的通信桥梁，达到数据变化 —>视图更新；视图交互变化（input）—>数据 model 变更双向绑定效果。

4.Vue组件间的参数传递

• (1)父组件与子组件传值：
• ①父组件传给子组件：子组件通过props方法接受数据;
• ②子组件传给父组件：$emit方法传递参数
• (2)非父子组件间的数据传递，兄弟组件传值：
• ①eventBus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。项目比较小时，用这个比较合适。
• ②使用vuex也可以

5.Vue的路由实现：hash模式 和 history模式

• ⑴hash模式：在浏览器中符号“#”，#以及#后面的字符称之为 hash，用window.location.hash 读取；
• 特点：hash 虽然在URL中，但不被包括在 HTTP 请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。
• ⑵history模式：history 采用 HTML5 的新特性；且提供了两个新方法：pushState（），replaceState（）可以对浏览器历史记录栈进行修改，以及 popState 事件的监听到状态变更。

6.Vue 与 React 的区别？

• 相同点： React 采用特殊的 JSX 语法，Vue.js 在组件开发中也推崇编写 .vue 特殊文件格式，对文件内容都有一些约定，两者都需要编译后使用；中心思想相同：一切都是组件，组件实例之间可以嵌套；都提供合理的钩子函数，可以让开发者定制化地去处理需求；都不内置列数 AJAX，Route 等功能到核心包，而是以插件的方式加载；在组件开发中都支持 mixins 的特性。
• 不同点： React 采用的 Virtual DOM 会对渲染出来的结果做脏检查；Vue.js 在模板中提供了指令，过滤器等，可以非常方便，快捷地操作 Virtual DOM。

7.vue 路由的钩子函数

• 首页可以控制导航跳转，beforeEach，afterEach 等，一般用于页面 title 的修改。一些需要登录才能调整页面的重定向功能。
• beforeEach 主要有3个参数 to，from，next：
• to：route即将进入的目标路由对象，
• from：route当前导航正要离开的路由
• next：function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转。

8.vuex 是什么？怎么使用？哪种功能场景使用它？

• 只用来读取的状态集中放在 store 中； 改变状态的方式是提交 mutations，这是个同步的事物； 异步逻辑应该封装在 action 中。

• 在 main.js 引入 store，注入。新建了一个目录 store，….. export 。场景有：单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车

• state: Vuex 使用单一状态树,即每个应用将仅仅包含一个 store 实例，但单一状态树和模块化并不冲突。存放的数据状态，不可以直接修改里面的数据。

• mutations: mutations 定义的方法动态修改Vuex 的 store 中的状态或数据。

• getters: 类似 vue 的计算属性，主要用来过滤一些数据。

• action: actions 可以理解为通过将mutations里面处里数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据。view 层通过 store.dispath 来分发 action。

五.微信小程序

1.微信小程序有几个文件

• WXML （WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。内部主要是微信自己定义的一套组件。
• WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式，
• js 逻辑处理，网络请求
• json 小程序设置，如页面注册，页面标题及 tabBar。
• app.json 必须要有这个文件，如果没有这个文件，项目无法运行，因为微信框架把这个作为配置文件入口，整个小程序的全局配置。包括页面注册，网络设置，以及小程序的window 背景色，配置导航条样式，配置默认标题。
• app.js 必须要有这个文件，没有也是会报错！但是这个文件创建一下就行 什么都不需要写以后我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。
• app.wxss 配置全局 css

2.微信小程序组件封装

3.微信小程序怎样跟事件传值

• 给 HTML 元素添加 data-*属性来传递我们需要的值，然后通过 e.currentTarget.dataset 或onload的param参数获取。但 data -名称不能有大写字母和不可以存放对象

4.小程序的 wxss 和 css 有哪些不一样的地方？

• wxss的图片引入需使用外链地址；
• 没有 Body；样式可直接使用 import 导入。

5.小程序关联微信公众号如何确定用户的唯一性？

• 使用 wx.getUserInfo 方法 withCredentials 为 true 时 可获取 encryptedData，里面有 union_id。后端需要进行对称解密

6.微信小程序怎样获取用户信息

• 微信小程序获取用户信息需要用户授权，首先用户登陆微信小程序使用 wx.login 这个 API，然后通过 wx.getUserInfo 这个 API 在拿到用户信息

7.微信小程序与vue区别

• 生命周期不一样，微信小程序生命周期比较简单
• 数据绑定也不同，微信小程序数据绑定需要使用{{}}，vue 直接:就可以
• 显示与隐藏元素，vue中，使用 v-if 和 v-show 控制元素的显示和隐藏，小程序中，使用wx-if 和h idden 控制元素的显示和隐藏
• 事件处理不同，小程序中，全用 bindtap(bind+event)，或者 catchtap(catch+event) 绑定事件,vue：使用 v-on:event 绑定事件，或者使用@event 绑定事件。
• 数据双向绑定也不也不一样在 vue 中,只需要再表单元素上加上 v-model,然后再绑定 data中对应的一个值，当表单元素内容发生变化时，data中对应的值也会相应改变，这是 vue 非常 nice 的一点。微信小程序必须获取到表单元素，改变的值，然后再把值赋给一个 data中声明的变量。
• 取值也不一样，小程序中，通过 this.data.reason 取值，vue 中，通过 this.reason 取值，父子组件间的通信也不同。