面试闯关1

面试闯关1

在面试过程中，总会被问到一些你用到过、但是记不清一些零碎的知识，现在做一下总结。

第一部分：HTML+CSS

1.常用那几种浏览器测试？有哪些内核(Layout Engine)?

• 主要内核：Trident，Gecko，Presto，Webkit。

• IE（Trident）、Firefox（Gecko）、Opera（Presto）、Chrome（Webkit）

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

• content-box：在宽度和高度之外绘制元素的内边距和边框。

• border-box：为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

• inherit：从父元素继承 box-sizing 属性的值。

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

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

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

4.页面导入样式时，使用link和@import 、行内、嵌入中有什么区别？

• 行内：失去的css的优势，但是优先级最高

• 嵌入：style方式，修改起来复杂

• @inportant：页面全部加载完成才导入css，在页面非常大的情况下会到时页面加载完成闪一下出现样式

• link：在页面加载之前加载css文件

<!-- more -->

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

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

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

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

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

6.html5有哪些新特性？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

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

• 拖拽释放(Drag and drop) API
  语义化更好的内容标签（header,nav,footer,aside,article,section）

音频、视频API(audio,video)
画布(Canvas) API
地理(Geolocation) API
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 的数据在浏览器关闭后自动删除

表单控件，calendar、date、time、email、url、search
新的技术webworker, websocket, Geolocation

• 移除的元素

纯表现的元素：basefont，big，center，font, s，strike，tt，u；

对可用性产生负面影响的元素：frame，frameset，noframes；

支持HTML5新标签：

• IE8/IE7/IE6支持通过document.createElement方法产生的标签，
  可以利用这一特性让这些浏览器支持HTML5新标签，

浏览器支持新标签后，还需要添加标签默认的样式：

• 当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
  <!--[if lt IE 9]>

<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->

7.简述一下你对HTML语义化的理解？

• HTML语义化：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

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

• 关闭浮动&BFC

• 使用after清除浮动的好处原理

• RunJS清除浮动代码

第二部分：JS

1.js的基本数据类型？

null 、undefined、boolean、string、number

2.js有哪些内置对象？

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

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

3.js中的this、call和apply

• 纯函数调用，this指向全局对象global

• 作为对象方法的调用：指向调用他的对象

• 作为构造函数调用，指向新对象

自己做的总结：链接

4.eval是做什么的？

• 把对应的字符串解析成JS代码并运行。 alert(eval('2'+'2')) //alert(4)

应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。

• JSON字符串转换为JSON对象的时候可以用eval，var obj =eval('('+ str +')')。

5.null和undefined的区别？

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

undefined：

（1）变量被声明了，但没有赋值时，就等于undefined。

（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。

（3）对象没有赋值的属性，该属性的值为undefined。

（4）函数没有返回值时，默认返回undefined。

null：

（1） 作为函数的参数，表示该函数的参数不是对象。

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

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

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

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

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

7.JSON 的了解？

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

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

参考

面试总结