前端工程师面(笔)试题部分汇总

Posted 2020-08-05 需要学习的人

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端工程师面(笔)试题部分汇总相关的知识，希望对你有一定的参考价值。

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+3

3+null

3+true

3+“a”-3

undefined==null

1===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。