---
title: 前端面试准备
date: 2017-08-27 10:12:07
tags: [面试]
categories: web前端
---

整理一些面试题，以备用

## 技术分类

### JS (行为层)

#### typeof 返回哪些数据类型

* obj num fun bool undefined

#### 3种强制类型转换两种隐式类型转换

* parseInt parseFloat number
* == - ===

#### 数组方法pop() push() unshift() shift()

* push() 尾部添加 pop() 尾部删除
* unshift() 头部添加 shift() 头部删除

#### ajax请求 get 和 post 的区别

* 一个在 url 后面，一个放在虚拟载体里面
* 有大小限制
* 安全问题
* 应用不同 

#### call 和 apply 的区别

* object.call(this, obj1,obj2,obj3)
* object.apply(this, argument)

#### ajax 请求时，如何解析 json 数据

* 使用eval parse，介于安全性考虑 使用parse 更靠谱
* eval 可以解析任何字符串，parse只解析json格式的字符串

#### 闭包是什么？

* 闭包就是能够读取其他函数内部变量的函数

#### 添加 删除 替换 插入到某个节点的方法

* obj.appendChild()
* obj.innersetBefore()
* obj.replaceChild()
* obj.removeChild()

#### javascript 同源策略

* 一段脚本只能读取来自同一来源的穿考核文档的属性，同源：指主机名，协议和端口号的组合

#### 编写一个 b 继承 a 的方法

```js
  function A(name) {
      this.name = name;
      this.sayHello = function(){alert(this.name+ "say hello!")}
  }

  function B(name, id) {
      this.temp = A
      this.temp(name)
      delete this.temp
      this.id = id
      this.checkId = function(ID) {alert(this.id == ID)}
  }
```

#### 如何阻止事件冒泡和默认事件

```js
  function stopBubble(e) {
      if (e && e.stopPropagation) {
          e.stopPropgation ()
      } else {
          window.event.cancelBubble = true
      }
      return false
  }
```

#### 谈谈this对象的理解

* this 是 js 的一个关键字， 随着函数使用场合不同，this的值会发生变化
* 但是有一个原则，this 指向的就是调用函数的那个对象
* this 一般情况下： 是指全局对象global， 如果作为方法调用，就指向这个对象

#### 简单讲下 node 的使用场景

* 高并发，聊天，实时消息推送

#### node 的优点和缺点提出自己的看法

* 优点： node是基于时间驱动和无阻塞的，所以非常适合处理并发请求，因此构建在node上的代理服务器相比其他技术实现的服务器表现要好的多，与node代理服务器交互的客户端代码也是用js写的，用的相同的语言，这感觉前后端非常亲切和美妙

* 缺点： node是一个相对比较新的开源项目，所以不太稳定，它总是在变，而且缺少足够多的第三方库的支持

#### 常用的一款框架

* vuejs reactjs jQuery angular

### CSS (表现层)

#### 清除浮动

* 使用clear
* 使用overflow
* 使用css的*：after

#### 居中设置

##### 1· 水平居中

* flex布局
> 设置justify-content：center；

##### 2· 垂直居中

* 多行文本（内联元素）
> a: 插入 table ，再设置vertical-align: middle;
> b: 先设置display： table-cell；再设置vertical-align: middle;

#### link 和 @import的区别

* link除了加载css，还能用于定义RSS，定义rel链接属性，import只能引入css
* 页面加载时，link同时加载，而@import引用的css会等到页面被加载完之后再加载
* import 只在 ie5 以上被识别

#### css 盒子模型

* content，padding，margin，border

#### css 选择符号

* id选择器
* 类选择器
* 标签选择器
* 相邻选择器 +
* 子选择器 >
* 后代选择器
* 通配符选择器 *
* 属性选择器 （a[rel = 'external'])
* 伪类选择器 hover nth-child
* 优先级
> !important > id > class > tag

### HTML (结构层)

#### 什么是语义化的HTML

* 直观的认识标签，有益于 SEO
* 有利于开源之后阅读代码的人更容易阅读
* 便于后期维护和理解

### 自动化编程

#### 前端自动化工具？

* gulp
* webpack

### 其他

#### 描述一下cookies，sessionStorage 和localStorage的区别？

* cookie 在浏览器和服务器之间来回传递，SS和LS不会
* SS和LS 的储存空间更大
* SS和LS 有更多丰富易用的接口
* SS和LS 是有各自的储存空间
* LS 储存是永久性的，SS 关闭浏览器就没了

#### 如何实现浏览器内多个标签之间的通信

* 调用LS Cookies 等本地储存方式

#### IE6 BUG 的解决办法

* 双边距，float引起，使用display
* 3像素问题，float引起， 使用display：inline-3px
* 超链接 hover 点击失效， 注意顺序
* 无法定义1px左右的宽度容器（使用overflow：hidden；zoom：0.08；line-height：1px）

#### 你有哪些性能优化的方法

* 减少http请求次数，css，js，html压缩，图片大小控制和压缩，网页cdn托管，data缓存，图片服务器
* 前端模板 js + 数据，减少由于html导致的带宽浪费，减少请求次数，
* 图片预加载，将样式表放在头部，脚本放在底部，加上时间戳
* 用innerHTML代替dom操作，减少dom操作次数，优化js性能
* 当需要设置的样式很多时，设置className而不是直接操作dom
* 避免在页面的主体布局中使用table，table要在其中的内容完全下载完之后才会完全显示，显示div+css布局慢。普通网站有一个普遍的思路，就是尽量向前端化，减少数据库操作，减少磁盘IO，
* 前端化：在不影响功能和体验的情况下，能在浏览器执行的不要在服务器执行，能在缓存服务器上直接返回的不要到应用服务器，程序能直接取到的结果不要到外部取，本机能取到的不要到远程取，内存能取到的不要到磁盘取，缓存中有的不要去数据库查询
* 减少数据库操作指：减少更新次数，缓存结果减少查询次数，将数据库执行的操作尽可能的让你的操作完成，减少磁盘IO指尽量不适用文件系统作为缓存，减少读写文件次数等。
* 程序优化永远要优化慢的部分

#### http 状态码有哪些？分别代表啥意思？

* 100-199 用于指定客户端相应的某些动作
* 200-299 用于表示请求成功
* 300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息
* 400-499 用于指出客户端的错误。
> 400: 语义有误 401：当前请求需要用户验证 403: 服务器已经理解请求，但是拒绝执行他 404：页面找不到
* 500-599 用于支持服务器错误。501 服务器不可用

#### 一个页面从输入 url 到页面显示完成，中间发生了什么？

* 查找浏览器缓存
* DNS 解析，查找该域名对应的IP，重定向（301），发出第二个 get 请求
* 进行HTTP 协议对话
* 客户端发送报头
* 文档开始下载
* 文档树建立，根据标记请求所需指定mime类型的文件
* 文件显示
* 浏览器这边做的工作大致分为以下几步：
> 加载：根据请求的url进行域名解析，向服务器发起请求，接受文件（html，js，css，图像等）
> 解析：对加载到的资源（html，js，css）进行语法解析，建议相应的内部数据结构（比如html的dom树，js的属性表，css的样式表规则等等）

### 总结

* 怀着一颗空杯心态去看待事物，这样才会有进步，学无止境，我要走的路还很长