本文目录

奇安信 前端工程师面试题

🌙
手机阅读
本文目录结构

奇安信 前端工程师面试题

下面关于 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

参考

https://www.nowcoder.com/test/21631749/summary

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了