前端工程师面试题题及答案(全面综合)全解

一首简单的歌
596次浏览
2020年01月05日 01:14
最佳经验
本文由作者推荐
app前端开发工程师怎么学
11  link 和@import 的区别是?
(1)link属于XHTML标签,而@import是CSS提供的;
(2)页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载;
(3)import只在IE5以上才能识别,而link是XHTML标签,无兼容问题;
(4)link方式的样式的权重 高于@import的权重.
12  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支持通过Element方法产生的标签,
可以利用这一特性让这些浏览器支持HTML5新标签,
浏览器支持新标签后,还需要添加标签默认的样式:
* 当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

如何区分: DOCTYPE声明\新增的结构元素\功能元素
13    HTML5的离线储存?
localStorage    长期存储数据,浏览器关闭后数据不丢失;
sessionStorage  数据在浏览器关闭后自动删除。
14:介绍一下CSS的盒子模型?
(1)有两种, IE 盒子模型、标准 W3C 盒子模型;IE的content部分包含了 border 和 pading;
(2)盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border).
15    CSS 选择器有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些?
*  选择器( # 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
*  优先级就近原则,同权重情况下样式定义最近者为准;
*  载入样式以最后载入的定位为准;
优先级为:
!important >  id > class > tag 
important 比 内联优先级高
16    列出display的值,说明他们的作用。position的值, relative和absolute定位原点是?
1. 
block 象块类型元素一样显示。
none 缺省值。象行内元素类型一样显示。
inline-block 象行内元素一样显示,但其内容象块类型元素一样显示。
list-item 象块类型元素一样显示,并添加样式列表标记。
2.
*absolute
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
*fixed (老IE不支持)
生成绝对定位的元素,相对于浏览器窗口进行定位。
*relative
生成相对定位的元素,相对于其正常位置进行定位。
* static  默认值。没有定位,元素出现在正常的流中
*(忽略 top, bottom, left, right z-index 声明)。
* inherit 规定从父元素继承 position 属性的值。
17 介绍js的基本数据类型。
number,string,boolean,object,undefined
18 Javascript如何实现继承?
通过原型和构造器
19 什么是闭包(closure),为什么要用它?
一、变量的作用域要理解闭包,首先必须理解Javascript特殊的变量作用域。变量的作用域无非就是两种:全局变量和局部变量。Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量。二、如何从外部读取局部变量?出于种种原因,我们有时候需要得到函数内的局部变量。但是,前面已经说过了,正常情况下,这是办不到的,只有通过变通方法才能实现。那就是在函数的内部,再定义一个函数。三、闭包的概念上一节代码中的f2函数,就是闭包。各种专业文献上的“闭包”(closure)定义非常抽象,很难看懂。我的理解是,闭包就是能够读取其他函数内部变量的函数。由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成“定义在一个函数内部的函数”。所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。--------------------------------------------------------------------------------------------------------b四、闭包的用途闭包可以用在许多地方。它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。
闭包的用途闭包可以用在许多地方。它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。
20 针对 jQuery 的优化方法?
1,总是从ID选择器开始继承
2,在class前使用tag(标签名)
在jQuery中第二快的选择器是tag(标签)选择器( 比如:$$(“head”) )。
跟ID选择器累时,因为它来自原生的getElementsByTagName() 方法。
继续看刚才那段HTML代码:
比如需要选择 红绿 单选框,
那么可以使用一个tag name来限制(修饰)class ,如下所示:
var active_light = $$(“”);
当然也可以结合 就近的ID,如下所示:
var active_light = $$(“#traffic_light ”);
在使用tag来修饰class的时候,我们需要注意以下几点:
(1) 不要使用tag来修饰ID,如下所示:
var content = $$(“div#content”);
这样一来,选择器会先遍历所有的div元素,然后匹配#content。
(好像jQuery从1.3.1开始改变了选择器核心后,不存在这个问题了。暂时无法考证。)
(2)不要画蛇添足的使用ID来修饰ID,如下所示:
var traffic_light = $$(“#content #traffic_light”);
3,将jQuery对象缓存起来
把jQuery对象缓存起来 就是要告诉我们 要养成将jQuery对象缓存进变量的习惯。
下面是一个jQuery新手写的一段代码:
$$("#traffic_light ").bind("click", function(){  });
$$("#traffic_light ").css("border", "1px dashed yellow");