首页 > 代码库 > 前端工程师面(笔)试题部分汇总
前端工程师面(笔)试题部分汇总
HTML 部分
1）DOCTYPE 是什么，有什么作用，为什么要用 html5 标准的 DOCTYPE（初级）
<!DOCTYPE> 声明位于文档的最前面（处于 <html> 标签之前）。告知浏览器以何种模式来渲染文档。
<!DOCTYPE html>让浏览器以自身的最高模式来渲染，尽量匹配 web 标准。
DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈现。
2）请分别列举至少 3 个 html 中默认的块级元素和行内元素（初级）
块级元素：div、table、ul、p、ol、form、h1~h6、dl
行内元素：span、a、em、strong、img、label
3）请列举出至少 3 个 html5 中新增的语义化标签（初级）
main、nav、aside、article、header、footer、section 等
4）要实现一组单选框 radio，属性上需要满足什么条件（初级）
name 属性必须一样
5）从 SEO 角度，请给出至少 2 条 html 书写上的注意点（中级）
a 标签一定要写 title 属性
img 标签一定要写 alt、title 属性
选用语义化的 html 标签
6）请列举出至少 3 个 html5 中新增的表单控件（中级）
email、url、number、range、Date pickers、search、color、datalist
7）谈下对 html 语义化的理解（中级）
去掉或者丢失样式的时候能够让页面呈现出清晰的结构
有利于 SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
便于团队开发和维护，语义化更具可读性，遵循 W3C 标准减少差异化。
CSS 部分
1）请列举出至少 5 个具有继承特性的 css 属性（初级）
font-size font-family color line-height text-align text-indent list-style 等，4 个即可
2）请阐述下 display:none 和 visibility:hidden 的区别（初级）
display:none 隐藏对应的元素，在文档布局中不再给它分配空间 visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。
3）请简述（或者图示）下 w3c 标准的盒模型（初级）
标准和模型包含：内容（content）、内边距（padding）、边框（border），外边距（margin）
4）请列出 display 属性除了 none 以外的其他 3 个常用值，并分别说明每个值的作用（初级）
display: inline|block|inline-block
inline 布局特点转为行内元素
block 布局特点转为块级元素
inline-block 布局上同时具有行内、块级元素的特征
5）在页面重构时，为什么要先重置 css 样式，你自己是如何处理的？（初级）
6）请对下面的一段 css 属性定义的写法进行简化（初级）
padding-left: 10px;padding-right: 10px;
padding-top: 4px; padding-bottom: 8px;
padding: 4px 10px 8px
7）请列举出至少 4 个 css3 属性（初级）
border-raduis box-shadow text-shadow transform transition 等
8）请列举出至少 6 种 css 选择器（初级）
id 选择器（#id）
类选择器（.clazzname）
标签选择器（div、h1、p）
后代选择器（li a）
属性选择器（a[ref=”external”]）
孩子选择器（ul > li）
9）position 属性的 3 个值：relative、absolute、fixed 分别是相对什么进行定位（初级）
relative：无 top、left 设置时，元素自身在文档流中的位置
absolute：相对于上级元素中第一个 position 属性非 static 的元素
fixed：相对于浏览器视窗
10）css3 中哪个属性可以对 DOM 元素的盒模型进行调整，该属性有哪些值，请分别阐述（或者图示）下不同值对盒模型的影响（中级）
box-sizing: content-box|border-box
context-box 即 w3c 标准盒模型
border-box 使得 content 包含了 padding、border
11）请简述下 CSS sprites 的原理，代码层面涉及哪个 css 属性（中级）
CSS Sprites 其实就是把网页中一些背景图片整合到一张图片文件中。这样可以减少很多图片请求的开销，因为请求耗时比较长；请求虽然可以并发，但是也有限
制，一般浏览器都是 6 个。再利用 CSS 的 background-image、background-repeat、background-position 的组合进行背景定位，background-position 可以用数字能精确的定位出背景图片的位置。
对于未来而言，http2 协议应用的话，就不需要这样做了。
12）css 中@import 指令的作用，它有何缺陷（中级）
在 css 文件中引入外部的 css 代码块缺陷：不利于多个 css 文件的并行下载，会造成阻塞，对页面渲染不利。
13）为什么对元素使用了 float 浮动，一定要有清除浮动（中级）
浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会自动伸高来闭合浮动元素（“高度塌陷”现象）。
正是因为浮动的这种特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为 0（高度塌陷）。在实际布局中，往往这并不是我们所希望的，所以需要闭合浮动元素，使其包含框表现出正常的高度。
14）请列举 3 种常用的清除浮动的方式（中级）
用空标签：通过一个内容为空的标签，并为其定义 CSS 代码：clear:both 来清除浮动
使用 overflow 属性：在需要清除浮动的元素中定义 CSS 属性：”overflow:hidden”，为了兼容 IE6 同时要加上”zoom:1″
使用 after 伪类清除浮动
15）请列举至少 2 个 IE7 中的常见 bug，以及解决方案（中级）
1，百分比布局时，IE7 的计算精度没有其他浏览器高，1 行 5 列，每列 width20%的浮动布局，在 IE7 会出现错位。
解决方案为，为 IE7 写 hack，*width:19.99%
2，IE7 不支持 opcity 属性。
解决办法：filter: alpha(opacity=60); opacity:0.6;
3，overflow:hidden 属性在 IE7 中不起作用，如果 overflow:hidden 父元素里面的子元素采用了绝对定位的方式布局，父元素上的 overflow: hidden 会失效。
解决方案：在 overflow:hidden 属性的元素上添加 position: relative; 4，IE7 浏览器对绝对定位的元素设置了很高的 z-index 确不能显示在上层。原因是 IE7 中层级的比较先比较绝对定位元素的相对定位点元素的 z-index。所以，
解决方案：给相对定位点的元素设置较高的 z-index，如果祖先元素中有很多 position:relative 的元素，则比较的是第一个祖先元素 position：relative
的层级，给第一个祖先元素设定较高的层级即可。
16）页面重构过程中，从 ps 中导出图片素材时，如何选取合适的导出格式（中级）
当图片色彩丰富且无透明要求时，建议保存 JPG 格式并且选择合适的品质。
当图片色彩不太丰富(单一颜色的小图标)无论有没有透明度的要求，请保存为 png-8 格式当图片有半透明要求时，请保存为 png-24 格式
17）请简述下对渐进增强、优雅降级的理解（中级）
渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
18）什么是 BFC，请谈谈对此概念的理解（高级）
BFC，块级格式化上下文，一个创建了新的 BFC 的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个 BFC 中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的 margin 会发生折叠。（W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行布局，以及与其他元素的关系和相互作用。）
19）请简述下低版本 IE（6,7）中下特有的 hasLayout 属性（高级）
“Layout”是一个 Internet Explorer for Windows 的私有概念，它决定了一个元素如何显示以及约束其包含的内容、如何与其他元素交互和建立联系、如何响应和传递应用程序事件、用户事件等。这种渲染特性可以通过某些 CSS 属性被不可逆转地触发。而有些 HTML 元素则默认就具有”layout”。
IE6-7 使用布局的概念来控制元素的尺寸和定位，那些拥有布局（have layout）的元素负责本身及其子元素的尺寸设置和定位。如果一个元素的 hasLayout 为false，那么它的尺寸和位置由最近拥有布局的祖先元素控制。
JavaScript 部分
1）JavaScript 有哪几种数据类型（初级）
简单：Number，Boolean，String，Null，Undefined
复合：Object，Array，Function
2）请编写一个 JavaScript 函数 parseQueryString，它的用途是把 URL 参数解析为一个对象，如：（初级）
var url = “枫芸志″;function parseQueryString(url) { var params = {};var arr = url.split("?"); if (arr.length <= 1){return params;}arr = arr[1].split("&");for (var i = 0, l = arr.length; i < l; i++) { var a = arr[i].split("=");params[a[0]] = a[1];}return params;}
3）js 中 split()和 join() 方法的区别（初级）
前者是将字符串切割成数组的形式，后者是将数组转换成字符串
4）已知有字符串 foo=”get-element-by-id”,写一个 function 将其转化成驼峰表示法”getElementById”。（初级）
function combo(str) {var arr = str.split(‘-‘);for(var i = 0; i< arr.length; i++){arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].substr(1, arr[i].length - 1);}str = arr.join(‘‘); return str;}
5）请计算下面变量的值（初级）
var a= (Math.PI++);var b = (Math.PI++);alert(a);alert(b);
答案: 3.141592653589793，3.141592653589793
6）请写出以下 js 表达式的值（初级）
4+"3"3+"a"var a="4"; a+33+null3+true3+“a”-3undefined==null1===true
答案："43"，"3a"，"43"，3，4，NaN，true，false
7）有如下 html，如何用 js 获得被选中的 option 的 text 描述（非 value）（初级）
<select id="select_id"><option vlue="1">text1</option> <option vlue="2">text2</option> <option vlue="3">text3</option> <option vlue="4">text4</option></select>
答案：
var s = document.getElementById("select_id"), index = s.options.selectedIndex;var text = s.options[index].text; alert(text);
8）js 怎样添加、移除、移动、复制、创建和查找节点（初级）
<1>创建新节点
createDocumentFragment() //创建一个 DOM 片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
<2>添加、移除、替换、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入
<3>查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的 Name 属性的值
getElementById() //通过元素 Id，唯一性
9）看下面代码，给出输出结果。（初级）
for(var i = 1; i < 3; i++){setTimeout(function(){console.log(i);}, 10);}
答案：3,3
10）按顺序写出 alert 弹出窗口的内容。（中级）
var name ="The Window";var object = {name : "My Object",getNameFunc : function() {alert(‘1.‘ + this.name);return function() {return this.name;};}};var func = object.getNameFunc();alert(‘2.‘ + func());alert(‘3.‘ + func.call(object)); alert(‘4.‘ + func.apply(object));
答案: 1.My Object，2.The Window， 3.My Object， 4.My Object
11）简述创建 ajax 过程（中级）
1. 创建`XMLHttpRequest`对象,也就是创建一个异步调用对象.
2. 创建一个新的`HTTP`请求,并指定该`HTTP`请求的方法、`URL`及验证信息.
3. 设置响应`HTTP`请求状态变化的函数.
4. 发送`HTTP`请求.
5. 获取异步调用返回的数据.
6. 使用 JavaScript 和 DOM 实现局部刷新.
var xmlHttp = new XMLHttpRequest();xmlHttp.open(‘GET‘,‘demo.php‘,‘true‘);xmlHttp.send() xmlHttp.onreadystatechange = function(){if(xmlHttp.readyState === 4 & xmlHttp.status === 200){}}
12）说说你对作用域链的理解（中级）
作用域链的作用是保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问，变量访问到 window 对象即被终止，作用域链向下访问变量是
不被允许的。
13）说说你对闭包的理解（中级）
使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。
闭包有三个特性：
1. 函数嵌套函数
2. 函数内部可以引用外部的参数和变量
3. 参数和变量不会被垃圾回收机制回收
14）null 和 undefined 的区别？（中级）
null 是一个表示"无"的对象，转为数值时为 0；undefined 是一个表示"无"的原始值，转为数值时为 NaN。
当声明的变量还未被初始化时，变量的默认值为 undefined。
null 用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。
undefined 表示"缺少值"，就是此处应该有一个值，但是还没有定义
前端工程师面(笔)试题部分汇总