前端面试题（上）
前端面试题
一、单选题（共15题，每题2分）
1、 以下不属于行内元素的是( )
a) h1
b) a
c) span
d) select
2、 以下不属于块级元素的是( )
a) h2
b) div
c) span
d) h3
3、 以下不属于空元素的是( )
a) <br>
b) <img>
c) <col>
d) <ol>
4、 以下不属于display的值是( )
a) inherit
b) table
c) block
d) list-item
5、 以下关于ajax的说法错误的是( )
a) ajax的全称：Asynchronous Javascript And XML
b) 向服务器发送请求的时候，需等待结果
c) 可通过XMLHttpRequest对象创建一个异步调用对象
d) 可实现局部刷新
6、 以下哪一个不是DOM操作的创建新节点( )
a) createNode()
b) createDocumentFragment()
c) createElement()
d) createTextNode()
7、 以下哪一个DOM节点操作方法是undefined( )
a) appendChild()
b) removeChild()
c) changeChild()
d) insertBefore()
8、 以下哪一个DOM操作不是查找节点操作( )
a) queryselector()
b) getElementById()
c) getElementsByTag()
d) getElementsByName()
9、 setTimeout("buy( )",2000)表示的意思是( )
a) 间隔2000秒后，buy( )函数被调用一次
b) buy( )函数被持续调用2000次
c) 间隔2秒后，buy( )函数被调用一次
d) 间隔2分钟后，buy( )函数被调用一次
10、 在JQuery中被誉为工厂函数的是( )
a) ready( )
b) function( )
c) $( )
d) factory()
11、 关于bind( )方法与unbind( )方法说法正确的是( )
a) bind( )方法可用来移除单个或多个事件
b) unbind( )方法可以同时移除多个事件，但不能移除单个事件
c) 使用bind( )方法可同时绑定鼠标事件和键盘事件
d) bind( )方法只能移除多个事件
Tip:bind(""mouseenter mouseleave"，function(){ });
12、 ( )是遍历同辈节点的方法
a) next( )
b) child( )
c) children( )
d) prev()
13、 对字符串str="welcome to china"进行下列操作处理,描述结果正确的是( )
a) str.substring(1,5)的返回值是"elcom"
b) str.length的返回值15
c) str.indexOf("come",4)的返回值为4
d) str.replace('o','a')的返回值是"Welcame To China"
14、 腾讯QQ号从10000开始，目前最高位10位，( )可以匹配QQ号
a) /^[1-9][0-9]{4,10}$/
b) /^[1-9][0-9]{4,9}$/
c) /^\d{5,10}$/
d) /^\d[5,10]$/
二、多选题（共15题，每题2分，多选/少选都不给分）
1.属于语意化的内容元素有（ ）
a) article、footer
b) block
c) section、banner
d) header、nav
2.HTML5新增的特性有哪些（ ）
a) 表单新特性：Required、Autofocus、Placeholders、pattern
b) 语义化的header和footer
c) 让你的内容可编辑，只需要加一个contenteditable属性
d) Local Storage、Web Sockets
3.以下关于响应式布局说法正确的是（ ）
a) 利用css3的media query媒体查询功能
b) 使用bootsrap框架
c) 使用HTML5的语义化标签
d) 以上说法都正确
4.js有哪些内置的数据封装类对象（ ）
a) Object、Array
b) Boolean
c) Number 和Error
d) Math
5.this对象的理解正确的是（ ）
a) this总是指向函数的直接调用者
b) this总是指向函数的非间接调用者
c) 如果有new关键字，this指向new出来的那个对象；
d) IE中attachEvent中的this总是指向全局对象Window
6.JSON 的说法正确的是（ ）
a) 全称是JSON(JavaScript Object Number)
b) 是一种轻量级的数据交换格式
c) 数据格式简单, 易于读写, 占用带宽小
d) 采用键值对，例如：{'age':'12', 'name':'back'}
7.HTTP状态码说法正确的是（ ）
a) 200 OK 正常返回信息
b) 302 Found 永久性重定向
c) 401 Unauthorized 禁止访问
d) 503 Service Unavailable 服务器端暂时无法处理请求
8.哪些性能优化的方法是正确的（ ）
a) 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器
b) 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作
c) 前端模板不要使用 JS+数据，会增加由于HTML标签导致的带宽浪费
d) 当需要设置的样式很多时少设置className而是直接操作style
9.关于Node.js中使用NPM的说法正确的是（ ）
a) 可以安装和管理项目的依赖
b) 不能够指明依赖项的具体版本号
c) 不可以通过package.json文件来管理项目信息，配置脚本，
d) 可以通过package.json指明项目依赖的具体版本
10.关于MVC说法正确的是（ ）
a) MVC由Modle（模型）, View（视图）和Controller（控制器）组成
b) PHP MVC可以更高效地管理好3个不同层的PHP代码。
c) view层负责将应用的数据以特定的方式展现在界面上
d) Controller：通常控制用户输入，并在模型里对数据信息进行存取
11.优化MYSQL数据库的方法（ ）
a) 语句方面：使用索引，增加查询效率
b) 语句方面：优化查询语句，提高索引命中率
c) 数据库涉及方面：构造分库分表，提高数据库的存储和扩展能力
d) 数据库涉及方面：根据需要使用不同的存储引擎
三、问答题（共4题，每题10分）
1. 怎样添加、移除、移动、复制、创建和查找节点？
答案：
1）创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
2）添加、移除、替换、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入
3）查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性
2. 你所了解到的Web攻击技术
答案：
（1）XSS（Cross-Site Scripting，跨站脚本攻击）：指通过存在安全漏洞的Web网站注册用户的浏览器内运行非法的HTML标签或者JavaScript进行的一种攻击。
（2）SQL注入攻击
（3）CSRF（Cross-Site Request Forgeries，跨站点请求伪造）：指攻击者通过设置好的陷阱，强制对已完成的认证用户进行非预期的个人信息或设定信息等某些状态更新。
3. 对前端工程师这个职位你是怎么样理解的？
答案：
a. 前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好
b. 参与项目，快速高质量完成实现效果图，精确到1px；
c. 与团队成员，UI设计，产品经理的沟通；
d. 做好的页面结构，页面重构和用户体验；
e. 处理hack，兼容、写出优美的代码格式；
f. 针对服务器的优化、拥抱最新前端技术。
