前端笔试整理

前言

最近招聘会，内推，网申，笔试，面试很多，让人眼花缭乱，为了再接下来校招中找到一个适合的工作，做一份关于前端的笔试面试整理吧。

前端技能其实不算多，刷完三剑客的题目就差不多了，但是作为科班出身的计算机专业的同学，想要在笔试面试中获得好成绩，对数据结构+算法，计算机网络，操作系统等基础等要掌握；下面进行一些分类。

1.前端问答题

2.前端编程题

3.数据结构算法题

4.其他知识点

---

前端问答题

• HTML

1. XHTML和HTML的区别？

XHTML是可扩展超文本标记语言，但XHTML主要是为了传输数据，而不是展示数据；
XHTML必须被正确的嵌套；
XHTML必须闭合标签；
XHTML必须是用小写字母；
XHTML文档必须有根元素；

2.前端页面有哪三层，作用是什么？

结构层HTML，表示层CSS，行为层JS；

3.说说对HTML语义化的理解？

即用正确的标签做正确的事情；
让页面内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；
在没有CSS的情况下也以一种文档显示，并且容易阅读；
搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于SEO；
是阅读源码的人更容易分块，便于代码的维护；

4.DOCTYPE的作用？标准模式和兼容模式的区别？

DOCTYPE在文档最前面的位置，告知浏览器以何种标准解析这个文档，DOCTYPE不存在或格式不正确会导致浏览器以兼容模式呈现；
：H5不基于SGML，所以不需要对DTD进行引用，但是需要其来规范浏览器的行为，但是HTML4.01基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的类型；
标准模式的排版和JS运作模式都是以该浏览器的支持的最高标准运行；在兼容模式中，页面以宽松的向后兼容的方式显示，模拟老浏览器的行为以防站点无法工作；

5.HTML5的新特性？移除了哪些元素？如何处理H5标签的浏览器兼容性为？

HTML5现在已经不是SGML的子集，主要是关于图像，位置，存储，多任务等功能的增加；按优先级定义为结构性元素，块级性元素，行内语义性元素和交互性元素；
1.结构性元素（上下文结构的定义）；
section：区域的章节描述；
header：页面主体的头部；
footer：页面主体的尾部；
nav：专门用于菜单导航，链接导航；
article：用于展现文章的主体内容；
2.块级性元素（内容区域的划分）
aside：用于表达标记、贴士、侧栏、摘要和插入的引用等作为补充文章主体的内容；
figure：是对多个元素进行组合并展示的元素，常用figcation作为标题；
code：表示一段代码块；
dialog：用于表达对话框或窗口；
3.行内语义性元素（具体内容的引用和描述）
meter：标定特定范围的数值；
time：表示时间值；
progress：表示进度条;
video：音频元素；
audio：视频元素；
4.交互性元素（功能性的内容表达，各种事件的基础）
details：用来表示文档细节，但必须通过交互才能显示；
datagrid：用来控制客户端数据与显示，可以由动态脚本及时更新；
menu：交互菜单；
command：命令按钮；

6.前端存储需要了解的一些概念？

参考这篇文章
cookie：放在http请求头中，大小为4k；
localStorage：键值对方式本地存储，除非手动删除，否则永不失效，永久存储，每个域名5M；
sessionStorage：页面关闭后被清空，通过session会话来实现，其他和localStorage相同；
application cache：离线缓存；需要配置manifest，离线浏览，提升页面载入速度，降低服务器压力；
Web SQL：web浏览器中的关系型数据库；
IndexDB：索引数据库，用于创建具有丰富本地存储数据的数据密集型离线H5 web应用程序；
userdata：IE专用（IE6以上），存储64KB；
globalStorage：FF支持，类似于localStorage，一个域下面是5120K的存储大小；
session：服务器端存储，cookie是“客户通行证”，session就是“客户明细表”，在过期之前，第一次访问
建，以后每次更新访问时间等，并维护该session；

7.行内元素，块级元素，空（void）元素有哪些？

行内：a,b,span,img,input,strong,select,label,em,button,textarea等
块级：div,ul,li,dl,dt,dd,p,h1-h6,,blockquote,form等
空(void)：即没有内容的元素,不需要闭合标签，如br,meta,hr,link,input,img等

8.HTML全局属性有哪些？

accesskey：设置快捷键；提供快速访问元素；
class：类标识；
contenteditable：指定元素内容是否可编辑；
contextmenu：自定义鼠标右键弹出内容；
data-*：为元素增加自定义属性；
dir：设置元素文本方向；
draggable：设置元素是否可拖拽；
dropzone：设置元素拖放类型，copy，move，link；
hidden：Is a Boolean attribute indicates that the element is not yet, or is no longer, relevant.用于隐藏；
id：元素id，文档内唯一；
lang：元素语言的内容；
spellcheck：是否启动拼写或语法检查；
style：行内样式；
tabindex：设置元素可以获得焦点，通过tab可以导航；
title：元素相关的建议信息；
translate：元素和子孙节点内容是否需要本地化。

---

• CSS

1.CSS兼容性的几种写法？

* ：IE6、IE7可以识别；
_和- ：IE6可以识别；
!important ：表示高优先级，IE7及以上、Firefox都支持，IE6认识带!important的样式属性，但不认识!important的优先级
-webkit- ：针对谷歌浏览器内核支持的CSS样式
-moz- ：针对Firefox浏览器的内核CSS写法
-ms- ：针对ie内核CSS写法
-o- ：针对opera内核CSS写法

2.常见浏览器的内核有？

1.Trident 内核，IE，360，MaxThon（遨游），搜狗，又称为MSHTML；
2.Gecko 内核，FF；
3.Presto 内核，Opera，13年Opera加入谷歌；
4.Webkit 内核，Safari，Chrome；
5.Blink 内核，Webkit的分支，现Chrome和Opera；

3.src和href的区别？

src用于替换当前元素，href用于在当前文档和引用资源之间确立联系；
src会暂停其他资源的下载和处理，直到将该资源加载、编译和执行完毕，类似于将所指向资源嵌入到当前标签内；
href即Hypertext Reference，指向网络资源所在位置，href会并行下载资源并不会停止对当前文档的处理。

4.介绍一下CSS盒模型？

IE盒模型：IE的content包含了border和padding
标准W3C盒模型：content，padding，border，margin

5.什么是CSS Hack？

一般来说，针对不同的浏览器写不同CSS，就是CSS Hack，IE 的Hack分三种

// 1、条件Hack
  
  // 2、属性Hack
   .test{
   color:#090\9; /* 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 */

6.em和rem的区别？

em是相对于父级元素，rem相对于文档根元素，html；
两者都是根据font-size的百分比定义大小；

7.浮动的原理和工作方式？以及浮动造成的问题如何解决？

1.浮动元素是脱离文档流的，不占据空间。
2.浮动元素遇到包含他的元素的边框或其他浮动元素的边框会停下来。
dsads

---

• Javascript

1.谈谈JS内存泄漏的问题？

循环引用：一个DOM对象被多个Javascript对象引用就可能会引发内存泄露；
js闭包的应用；
DOM插入顺序；

2.谈谈对JS闭包的理解？

闭包是指有权访问另一个函数作用域中的变量的函数（《JS高级程序设计》）；

闭包的作用有两个，第一个是读取函数内部的变量，第二个是让这些变量不随函数的执行完毕而销毁，保存在内存中；
因为变量都在内存中不销毁，所以滥用闭包会造成网页性能问题；使用闭包时，要小心不改变父函数内部变量的值；

3.如何消除一个数组里重复的元素？

var arr1 = [1, 2, 2, 3, 3, 3, 3, 4, 4, 5];
    var arr2 = [];

    for (var i = 0; i < arr1.length; i++) {
        if (arr2.indexOf(arr1[i]) < 0) {
            arr2.push(arr1[i]);
        }
    }

4.在JS中什么是伪数组？如何将伪数组转化成标准数组？

伪数组不是真正的数组，所以无法直接调用数组方法，也没有length等数组的属性，但仍可以像遍历数组一样进行遍历，典型的是函数的argument参数，还有通过document.getElementsByTagName，document.childNodes的方法得到的NodeList，都是伪数组（类数组）；
可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的对象；call将this（this指向调用当前函数的对象）指向伪数组，即在伪数组中使用数组的slice方法，slice无参数时默认从0开始，就可以将整个伪数组变成一个标准数组了。

5.JS中caller和callee的作用？

caller保存着调用当前函数的函数的引用；
callee是一个指向拥有这个arguments对象的函数；

function outer() {
        inner();
    }

function inner(){
        console.log(arguments.callee.caller);
}

outer();
//会输出outer()函数的源代码

---

前端编程题

更多请见github
https://github.com/MatthewMaYao/JavaScriptNotes

---

数据结构算法题

1.各种排序算法的时间复杂度、空间复杂度、稳定性？

排序算法时空复杂度.png

---

其他知识点

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

1.在浏览器输入url；
2.浏览器查看缓存，如果请求资源在缓存中并且新鲜，跳转到转码步骤；
a.如果资源未缓存，发起新请求；
b.如果已缓存，检查是否足够新鲜，若足够新鲜直接提供给客户端，否则与服务器进行验证；(检查新鲜度常用HTTP1.0提供的Expiers和Cache-Control:max-age=，前者为一个绝对时间表示缓存新鲜日期，后者为以秒为单位的最大新鲜时间)
3.浏览器解析URL获取协议，主机，端口，path；
4.浏览器组装一个HTTP请求报文；
5.浏览器获取主机IP地址，过程如下：
a.浏览器缓存；
b.本机缓存；
c.hosts文件；
d.路由器缓存；
e.ISP DNS查询；
f.DNS 递归查询（可能存在）
6.打开一个socket，与目标IP地址、端口号建立TCP连接，三次握手如下：
a.客户端发送TCP的SYN = 1，Seq = X的包到服务器端口
b.服务器发回SYN = 1，ACK = X + 1，SYN = Y的响应包
c.客户端发送ACK = Y + 1，Seq = Z
7.TCP建立连接后发送HTTP请求
8.服务器接受请求并解析，将请求转发到服务程序，如虚拟机使用HTTP Host头部判断请求的服务程序
9.服务器检查HTTP请求头是否包含缓存验证信息，如果验证缓存新鲜，返回304等对应状态码
10.处理程序读取完整请求并准备HTTP响应，可能需要查询数据库等操作
11.服务器将响应报文通过TCP连接发送回浏览器
12.浏览器接受HTTP响应，然后根据情况选择关闭TCP连接或者保留重用；
13.浏览器检查响应状态码，是否为1XX，3XX，4XX，5XX，这些情况处理与2XX不同
14.如果资源可缓存，进行缓存
15.对响应进行解码，如gzip压缩
16.根据资源类型决定如何处理（假设为HTML文档）
17.解析HTML文档，构建DOM树，下载资源，构造CSSOM树，执行JS脚本；参考1 参考2
18.显示页面，HTML解析过程会逐步显示页面

前端需要注意哪些SEO？

1.合理的title，description，keywords；
2.语义化的HTML代码，符合W3C规范：让搜索引擎更容易理解网页；
3.重要内容HTML代码放在最前面，搜索引擎抓取内容从上到下，且可能有长度限制；
4.重要内容不要用JS输出，爬虫不会执行JS获取内容；
5.少用iframe，搜索引擎不会抓去iframe的内容；
6.非装饰性图片必须加alt；
7.提高网站的速度：网站速度是搜索引擎排序的一个重要指标。

web开发中的会话跟踪方法有哪些？

请参考这篇文章
1.使用隐藏域进行会话跟踪；
2.cookie(session)；
3.URL重写；
4.ip地址；

如何进行前端的性能优化？

• 减少HTTP请求数量
  1.CSS Sprites：CSS精灵，将多张图片合并成一张图片达到减少HTTP请求的一种解决方案，可以通过CSS background属性来访问图片内容，同时可以减少图片的总字节数
  2.合并CSS和JS文件，webpack等打包工具，将多个CSS和JS合并成一个文件
  3.lazyLoad：懒加载，即用户需要用到的时候再去加载的元素，如图片的懒加载 **
• 控制资源文件加载优先级
  1.根据浏览器加载HTML的原则，为了将页面第一时间显示给用户，需要提前加载CSS，不受JS加载影响，所以将CSS文件放在head内部，JS文件放在body底部；
• 利用浏览器缓存
  1. 强缓存：在web服务器返回的响应中添加Expiers和Cache-Control Header
  2.协商缓存

• 使用CDN
  即Content Delivery Network，内容分发网络；其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快，更稳定。
• 减少重排（Reflow）
  若渲染树的一部分更新，且尺寸发生变化，则会发生重排，重新计算元素的集合属性。，会使渲染树中受到影响的部分失效

有哪些Web攻击技术？

1.XSS（Cross-Site scripting，跨站脚本攻击）：指通过存在安全漏洞的Web网站注册用户的浏览器内运行非法的HTML或者JavaScript进行的一种攻击；
2.SQL注入攻击
3.CSRF（Cross-Site Request Forgeries，跨站点请求伪造）：指攻击者通过设置好的陷阱，强制对已完成的认证用户进行非预期的个人信息和设定信息等某些状态更新。

---

参考链接：
http://www.cnblogs.com/bigboyLin/p/5272902.html#职业规划
http://web.jobbole.com/88041/
https://www.nowcoder.com/ta/review-frontend?query=&asc=true&order=&page=3
https://github.com/qiu-deqing/FE-interview