奇安信 前端工程师面试题
奇安信 前端工程师面试题
下面关于 HTML 的描述正确的一项是 ()
正确答案: D
HTML5 中的所有标签都必须写结束标签
DOCTYPE 的设置不会影响页面的展示效果
HTML5 中的属性名对大小写敏感
HTML5 中可以使用 data-* 自定义属性
下面的 HTML 代码中符合规范的是()
正确答案: D
<ul>
<ol>
<li>item 1</li>
</ol>
</ul>
<table>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<tr>
</table>
<p>
<ul>
<li>Item 1</li>
</ul>
</p>
<a href="/">
<p>Some Text</p>
</a>
下面哪一个不是 HTML5 中的标签()
正确答案: C
article
section
foot
main
下面哪个类型不是 HTML5 新增的表单类型()
正确答案: C
color
date
password
email
关于无障碍性(Accessibility)的说法中,错误的是()
正确答案: D
role 属性用来指定一个元素在页面中的作用
alt 属性用来为图片提供文字性说明
正确地使用语义化标签有助于提高页面的无障碍性
tabindex 属性用来指定使用键盘访问该元素的快捷键
为了实现表单文件上传,需要将 form 元素的 enctype 属性设置为()
正确答案: C
application/json
text/plain
multipart/form-data
application/x-www-form-urlencoded
下面有关 HTML5 Canvas 性能优化的做法,哪项是错误的()
正确答案: D
使用多个分层的 Canvas 绘制复杂场景
不在动画中使用 putImageData 方法
使用 Web Worker 运行时间复杂度高的代码
将计算阶段的开销转嫁到 Canvas 绘制阶段
下面哪些是 HTML5 中的标签()
正确答案: A C
header
center
footer
frame
页面中包含如下代码,请问页面中 h1 中的文字颜色是 ()
<article id="post" class="content">
<h1 class="title">360公司简介</h1>
</article>
<style>
#post { color: blue }
h1.title { color: black }
.content .title { color: red }
article h1 { color: green }
</style>
正确答案: C
蓝色
黑色
红色
绿色
下面哪一个 CSS 属性是可继承的 ()
正确答案: B
position
text-align
background
box-sizing
下面哪种方法可以让一个元素内的文字永远在一行内显示(文字很长时也不会换行)()
正确答案: C
word-break: normal
word-wrap: nowrap
white-space: nowrap
word-spacing: 0
下面关于 CSS 的说法中,正确的是()
正确答案: C
在 box-sizing 为默认值时,width 属性指定的是包含 padding 在内的宽度
padding 用来指定内边距,可以为负值
两个相邻块级元素垂直方向的 margin 可能会合并
块级元素里内容的高度超出了指定的 height 时,默认会被隐藏
下面哪不是 display 属性的合法值()
正确答案: D
table
flex
inline-block
hidden
页面中有如下代码:
<div class="profile">
<img src="a.jpg" alt="avatar" class="avatar">
<p class="desc">Some description</p>
</div>
<article>
<h2>Posts</h2>
</article>
<style>
.profile .avatar { float: left }
</style>
如果想让 article 不受浮动影响,哪种做法是错误的 ()
正确答案: C
article { clear: both }
.profile::after { content: ''; display: block; clear: both }
.profile { clear: both }
.profile { overflow: hidden }
如果想让一个元素相对于屏幕(视口)定位,应该把它的 position 属性设置为 ()
正确答案: A
fixed
absolute
relative
static
如果要将一个元素旋转 90°,可以使用 CSS 中的哪个属性实现()
正确答案: B
translate
transform
transition
animation
下面哪一个属于 CSS 命名规范 ()
正确答案: B
PostCSS
BEM
Less
Sass
以下表达式值为 true 的是()
正确答案: C
"9" < "10"
NaN == NaN
String('a') === 'a'
. typeof [] === 'array'
以下代码的输出结果是
<script>
var x = 1;
var obj = {
x: 2,
fun: function () {
var x = 3;
return this.x;
}
};
var fun = obj.fun;
console.log( obj.fun(), fun() );
</script>
正确答案: D
1 2
1 3
2 3
2 1
以下代码的输出结果是()
for (var i = 1; i < 4; i++) {
setTimeout(function() {
console.log(i)
}, 0)
}
正确答案: C
1 2 3
3 3 3
4 4 4
1、2、3输出顺序不确定
以下代码的输出结果是()
let obj = {
a: 1,
b: 2
};
Object.prototype.c = 3;
Object.defineProperty(obj, 'd', {
enumerable: false
});
for (let key in obj) {
console.log(key);
}
正确答案: B
a b
a b c
a b c d
a b d
在 W3C DOM 事件的回调函数中,如何阻止事件冒泡()
正确答案: B
preventDefault()
stopPropagation()
cancelBubble()
return false
下面哪一个不是 JavaScript 模块化规范()
正确答案: C
AMD
CommonJS
RequireJS
ES Modules
下面关于 Canvas 和 SVG 的描述,哪一个是正确的 ()
正确答案: B
可以给一个 Canvas 中的不同图形分别绑定鼠标事件
Canvas 和 SVG 都可以使用 JavaScript 来绘制
WebGL 使用 SVG 在网页上进行 3D 图形绘制
Canvas 更适合静态图片的展示
下面哪一项技术不能将数据存储到用户本地()
正确答案: D
localStorage
cookie
indexedDB
fetch
通过 JavaScript 设置 Cookie,如果不指定 expires,会产生以下哪种结果()
正确答案: B
报错
该 Cookie 在浏览器会话结束后失效
该 Cookie 永不失效
该 Cookie 立即失效
以下列举的 HTTP 响应头中,哪项与 HTTP 缓存无关()
正确答案: B
Last-Modified
Connection
Cache-Control
Etag
有关 ES6 的 const 关键字,以下说法哪项是正确的()
正确答案: A
const 只在声明所在的块级作用域内有效
const 存在与 var 类似的变量提升机制
const 可以用来阻止对象的属性被无意修改
const 声明的全局变量,也属于顶层对象的属性
以下代码执行后,控制台的输出依次是()
<div class="outer">
<div class="inner">
<button id="btn">click</button>
</div>
</div>
<script>
const inner = document.querySelector('.inner');
const outer = document.querySelector('.outer');
const body = document.body;
function handler(e) {
console.log(`${this.id || this.className || this.tagName}`);
}
body.addEventListener('click', handler);
outer.addEventListener('click', handler);
inner.addEventListener('click', handler);
</script>
正确答案: A
inner, outer, body
outer, body, inner
outer, inner, body
body, outer, inner
以下代码执行后,obj 的值是()
const obj = {x: 1, y: 2};
function foo(obj){
obj.x++;
obj.y--;
}
foo(obj);
正确答案: C
{x:1, y:2}
{x:1, y:1}
{x:2, y:1}
报错
要让下面的代码能正常工作,在 ________ 处应当填写?
const link = document.querySelector('a.preview');
link.addEventListener('click', function(e){
previewImage(e.target.href);
_____________________________
});
正确答案: A
e.preventDefault();
e.stopPropagation();
return false
e.cancelBubble = true;
以下代码执行后控制台的输出是()
[...[1,,3,,5]].map((_, n) => n);
正确答案: A
[0,1,2,3,4]
[1,2,3,4,5]
[1,undefined,3,undefined,5]
[0,undefined,2,undefined,4]
下列元素中,默认是 display:inline 的有()
正确答案: A C
a
p
span
div
以下对 HTML 描述错误的是()
正确答案: B C
HTML5 是 HTML 的第 5 个 版本
HTML 的标签区分大小写,故 `<a>` 和 `<A>` 是不同的标签
页面上的 JS 只有在图片资源都加载完成后才能开始工作
同步加载外链 CSS 会阻塞后续内联 JS 的执行
以下说法正确的是?()
正确答案: B C
页面上所有的 HTML 标签都要闭合
HTML 标签中属性的值应该用双引号
HTML 标签中属性的值不加引号浏览器也能识别
如果忘记写结束标签,浏览器无法加载网页
以下表达式值为 false 的是()
正确答案: B C D
"abc" === "abc"
{x:1} === {x:1}
Symbol(1) === Symbol(1)
NaN === NaN