前端面试题4

目录：
21.XHTML和HTML有什么区别?
22.什么是语义化的HTML?
23.常见的浏览器内核有哪些？
24.HTML5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和HTML5？
思考题两道
11. 前端开发中有什么经典的*值得自己去实现一遍？
12.在你的日常开发中遇到过哪些常用布局是无法用纯 CSS 实现的？

25.请描述一下 cookies，sessionStorage 和 localStorage 的区别？
26.谈谈This对象的理解。
27.谈一谈JavaScript作用域链?
28.如何理解JavaScript原型链?
思考题两道
13.对前端工程师这个职位你是怎么样理解的？
14.平时如何管理你的项目？

29..JavaScript如何实现继承？
30.清除浮动有哪些方式？比较好的方式是哪一种？
31.box-sizing常用的属性有哪些？分别有什么作用？
32.Doctype作用？标准模式与兼容模式各有什么区别?
思考题两道
15.如何视觉隐藏网页内容，只让它们在屏幕阅读器中可用？
16.你觉得WebAssembly为什么比asm.js快？

33.HTML5 为什么只需要写 ？
34.页面导入样式时，使用link和@import有什么区别？
35.介绍一下你对浏览器内核的理解？
36.IE和DOM事件流的区别?
思考题两道
17.前端安全方面有没有了解？CSRF 如何攻防？
18.说说你对 SVG 理解?

37.哪些地方会出现css阻塞，哪些地方会出现js阻塞？
38.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?
39.在JavaScript我们会遇到闭包，请你们根据自己的理解分析一下什么是闭包？闭包有什么好处？使用闭包要注意什么？
40.如何阻止事件冒泡和默认事件（程序）
两道思考题～
19.谈谈垃圾回收机制方式及内存管理.
20.开发过程中遇到的内存泄露情况，如何解决的？

21.XHTML和HTML有什么区别

HTML是一种基本的WEB网页设计语言，xhtml:可扩展超文本标记语言，是一种置标语言，表现方式与超文本标记语言（HTML）类似，不过语法上更加严格。

最主要的不同：
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。

补充：

h5新特性：

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

强大的HTML5的新功能

（1）强大的绘图功能
可能有些动画，或者图片，在html5可以通过强大的绘画功能，加上JS可以实现。而在html4.0却不行。
在HTML5中，有两个东西，是可以进行绘图的，我们一起来看看是哪两个神奇的玩意。
1.Canvas标签
Canvas 通过 JavaScript 来绘制 2D 图形，Canvas 是逐像素进行渲染的。
在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
2.SVG
SVG 是一种使用 XML 描述 2D 图形的语言，SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：
（1）SVG 图像可通过文本编辑器来创建和修改
（2）SVG 图像可被搜索、索引、脚本化或压缩
（3）SVG 是可伸缩的
（4）SVG 图像可在任何的分辨率下被高质量地打印
（5）SVG 可在图像质量不下降的情况下被放大
那么都两者都可以用于绘图，我们一起来看看他们之间有何区别：
Canvas
1.依赖分辨率
2.不支持事件处理器
3.弱的文本渲染能力
4.能够以 .png 或 .jpg 格式保存结果图像
5.最适合图像密集型的游戏，其中的许多对象会被频繁重绘
SVG
1.不依赖分辨率
2.支持事件处理器
3.最适合带有大型渲染区域的应用程序（比如谷歌地图）
4.复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
5.不适合游戏应用
（2）新增视频标签
可能在html4.0的时候，我们想要插入一段视频，还需要引用一长段的代码。但是在html5的情况下。我们只需要用于一个video标签即可。

22.什么是语义化的HTML?

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

在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。

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

23.常见的浏览器内核有哪些？

• Trident内核[ˈtraɪdnt] ：
  IE浏览器(遨游、世界之窗、腾讯TT、360、搜狗浏览器…都是IE)Trident内核最慢
  IE 以Trident 作为内核引擎

• Gecko：[ˈgekəʊ]
  开放源代码、以C++编写的网页排版引擎，是跨平台的
  FireFox是基于 Gecko 开发;

• presto：[ˈprestəʊ]
  目前公认网页浏览速度最快的浏览器内核，然而代价是牺牲了网页的兼容性。由Opera Software开发的浏览器排版引擎，Opera（欧朋浏览器），但由于市场选择问题，主要应用在手机平台–Opera mini
• Webkit：
  苹果公司自己的内核，google的chrome也使用webkit作为内核。
  是一个开源的浏览器引擎，同时WebKit 也是苹果Mac OS X 系统引擎框架版本的名称，它拥有清晰的源码结构、极快的渲染速度。
  许多网站都是按照IE来架设的，很多网站不兼容Webkit内核，比如登录界面、网银等网页均不可使用Webkit内核的浏览器。
  Safari([səˈfɑri]), Google Chrome, 傲游3, 猎豹浏览器, 百度浏览器 opera浏览器 基于 Webkit 开发。
  注：2013年2月Opera宣布转向WebKit引擎
  注：2013年4月Opera宣布放弃WEBKIT，跟随GOOGLE的新开发的blink引擎

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

HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。

绘画 canvas
用于媒介回放的 video 和 audio 元素
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 的数据在浏览器关闭后自动删除

语意化更好的内容元素，比如 article、footer、header、nav、section
表单控件，calendar、date、time、email、url、search
新的技术webworker, websockt, Geolocation

移除的元素

纯表现的元素：basefont，big，center，font, s，strike，tt，u；
对可用性产生负面影响的元素：frame，frameset，noframes；

支持HTML5新标签：

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

前端思考题

11.前端开发中有什么经典的*值得自己去实现一遍？
你只要去实现那些每年被重新实现过一遍的*就行了。UI *轮播、Tab、懒加载……照着饿了么UI库、Bootstrap 挨个实现就好。做这种*比较考验 CSS 功力，你需要用尽量少的代码适应尽量多的场景。流行 UI 模式的实现瀑布流、视差滚动、fullpage等。原理简单又炫酷，何乐不为。
可以参考知乎：https://www.zhihu.com/question/29380608

12.在你的日常开发中遇到过哪些常用布局是无法用纯 CSS 实现的？

1. 多行文字溢出显示省略号
2. 最大行数
3. 更好用的 Flex
4. 元素查询（Element Queries）
5. CSS 分页滚动
6. 非矩形布局
7. 流式 Grid 布局

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

cookie在浏览器和服务器间来回传递。 sessionStorage和localStorage不会
sessionStorage和localStorage的存储空间更大；
sessionStorage和localStorage有更多丰富易用的接口；
sessionStorage和localStorage各自独立的存储空间；

26.谈谈This对象的理解。

this是js的一个关键字，随着函数使用场合不同，this的值会发生变化。
但是有一个总原则，那就是this指的是调用函数的那个对象。
this一般情况下：是全局对象Global。 作为方法调用，那么this就是指这个对象

27.谈一谈JavaScript作用域链

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

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

28.如何理解JavaScript原型链

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

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

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

前端思考题

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

a. 前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好
b. 参与项目，快速高质量完成实现效果图，精确到1px；
c. 与团队成员，UI设计，产品经理的沟通；
d. 做好的页面结构，页面重构和用户体验；
e. 处理hack，兼容、写出优美的代码格式；
f. 针对服务器的优化、拥抱最新前端技术。

14.平时如何管理你的项目？

先期团队必须确定好全局样式（globe.css），编码模式(utf-8) 等；
1编写习惯必须一致（例如都是采用继承式的写法，单样式都写成一行）；
2标注样式编写人，各模块都及时标注（标注关键样式调用的地方）；
3 页面进行标注（例如 页面 模块 开始和结束）；
4 CSS跟HTML 分文件夹并行存放，命名都得统一（例如style.css）；
5 JS 分文件夹存放 命名以该JS功能为准的英文翻译。
6图片采用整合的 images.png png8 格式文件使用 尽量整合在一起使用方便将来的管理

29.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);//得到被继承的属性

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

（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。
比较好的是第3种方式，好多网站都这么用。

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

(1)box-sizing: content-box|border-box|inherit;
(2)content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。
(3)border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

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

(1)告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

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

前端思考题

15.如何视觉隐藏网页内容，只让它们在屏幕阅读器中可用？

1.display:none;的缺陷搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略屏幕阅读器（是为视觉上有障碍的人设计的读取屏幕内容的程序）会忽略被隐藏的文字。

2.visibility:hidden;的缺陷这个大家应该比较熟悉就是隐藏的内容会占据他所应该占据物理空间

3.overflow:hidden;一个比较合理的方法.
texthidden{display:block;
overflow:hidden;
width:0;height:0;}
就像上面的一段CSS所展示的方法，将宽度和高度设定为0，然后超过部分隐藏，就会弥补上述一、二方法中的缺陷，也达到了隐藏内容的目的。

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

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

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

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

（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;

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

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

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

主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。

渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

JS引擎则：解析和执行javascript来实现网页的动态效果。

最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

36.IE和DOM事件流的区别

1执行顺序不一样
2参数不一样
3事件加不加on
4this指向问题

IE采用冒泡型事件
Netscape使用捕获型事件
DOM使用先捕获后冒泡型事件

示例：

<body> 
<div> 
<button>点击这里</button> 
</div> 
</body> 

冒泡型事件模型： button->div->body (IE事件流)

捕获型事件模型： body->div->button (Netscape事件流)

DOM事件模型： body->div->button->button->div->body (先捕获后冒泡)

补充：

5.阻止事件默认行为
IE：oEvent.returnValue=false;
DOM：oEvent.preventDefault();

6.停止事件复制（冒泡）
IE：oEvent.cancelBubble=true;
DOM：oEvent.stopPropagation();
这篇文章写得不错，可以参考。Javascript Event事件中IE与标准DOM的比较

37.哪些地方会出现css阻塞，哪些地方会出现js阻塞？

js 的阻塞特性：所有浏览器在下载 JS 的时候，会阻止一切其他活动，比如其他资源的下载，内容的呈现等等。直到 JS 下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。为了提高用户体验，新一代浏览器都支持并行下载 JS，但是 JS 下载仍然会阻塞其它资源的下载（例如.图片，css文件等）。

由于浏览器为了防止出现 JS 修改 DOM 树，需要重新构建 DOM 树的情况，所以就会阻塞其他的下载和呈现。嵌入 JS 会阻塞所有内容的呈现，而外部 JS 只会阻塞其后内容的显示，2 种方式都会阻塞其后资源的下载。也就是说外部样式不会阻塞外部脚本的加载，但会阻塞外部脚本的执行。

CSS 怎么会阻塞加载了？CSS 本来是可以并行下载的，在什么情况下会出现阻塞加载了(在测试观察中，IE6 下 CSS 都是阻塞加载）当 CSS 后面跟着嵌入的 JS 的时候，该 CSS 就会出现阻塞后面资源下载的情况。而当把嵌入 JS 放到 CSS 前面，就不会出现阻塞的情况了。

根本原因：因为浏览器会维持 html 中 css 和 js 的顺序，样式表必须在嵌入的 JS 执行前先加载、解析完。而嵌入的 JS 会阻塞后面的资源加载，所以就会出现上面 CSS 阻塞下载的情况。

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

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 ;

通用选择器（*） < 元素(类型)选择器 < 类选择器 < 属性选择器 < 伪类 < ID 选择器 <内联样式

可以理解为：每条样式的权重值就是该样式所包含的所有选择器相对应的权重值之和：
元素，伪元素：+1
类，伪类，属性：+10
ID：+100
内联样式：+1000
例如： p {} //p为元素，总权重就是：1
div p{} //p与div都是元素，总权重是：1+1=2
.div p // .div是类，p是元素，总权重是：10+1=11

后者优先级高
可以参考这篇不错的文章。css权重问题

39.在JavaScript我们会遇到闭包，请你们根据自己的理解分析一下什么是闭包？闭包有什么好处？使用闭包要注意什么？

闭包：函数嵌套函数，内部函数可以引用外部函数的参数和变量，变量和参数不会被垃圾回收机制所回收

好处：（1）希望一个变量长期驻扎在内存之中
（2）避免全局变量的污染
（3）私有成员的存在
注意：可能会造成内存泄漏
参考理解javascript闭包

40.如何阻止事件冒泡和默认事件（程序）

function stopBubble(e) {  
  if(e && e.stopPropagation){  
      e.stopPropagation();  
  } else {  
    window.event.cancelBubble = true;  
  }  
};  
// 阻止浏览器的默认事件  
function stopDefault(e){  
  if(e && e.preventDefault) {  
    e.preventDefault();  
  } else {  
    window.event.returnValue = false;  
  }  
  return false;  
};