前端面试+笔试

omnoob
165 阅读11分钟

一. 面试部分

  1. 盒模型：box-sizing:①content-box:元素内容的宽高;②border-box:元素的宽高=内容+内边距+边框
  2. 居中： 水平居中：①内联元素：父节点写text-align:center;②块级元素：margin: 0 auto;
    垂直居中：①父元素高度没写死，padding:10px 0;②父元素高度固定：(1).display:flex;justify-content:center;algin-items:center;(2)绝对定位 + margin(3)绝对定位 + transform: translate(-50%,-50%);
  3. 选择器优先级：选择器越具体，优先级越高。 #xxx 大于 .yyy；同样优先级，写在后面的覆盖前面的。 !important; 优先级最高。
  4. 清除浮动：①overflow: hidden；②.clearfix 清除浮动写在爸爸身上.clearfix::after{ content: ''; display: block; clear:both; } .clearfix{ zoom: 1; /* IE 兼容 */ }
  5. BFC：块格式化上下文；同一个BFC中的相子元素之间的竖直margin会合并；触发BFC：overflow:hidden
  6. JS数据类型:string number bool undefined null object symbol，object 包括了数组、函数、正则、日期等对象
  7. promise:创建promise return new Promise((resole, reject)=>{}) ;then链式操作
  8. 手写ajax: 
    let request  = new XMLHttpRequest()
request.open('POST', '/xxxx')
request.onreadystatechange = function(){
if(request.readyState === 4 && request.status === 200){
console.log(xhr.responseText)
}
}
request.send('a=1&b=2')
  9. 闭包：「函数」和「函数内部能访问到的变量」（也叫环境）的总和，就是一个闭包。闭包常常用来「间接访问一个变量」。
  10. this: this是回调函数call中的第一个参数
fn() 里面的 this 就是 window
fn() 是 strict mode，this 就是 undefined
a.b.c.fn() 里面的 this 就是 a.b.c
new F() 里面的 this 就是新生成的实例
() => console.log(this) 里面 this 跟外面的 this 的值一模一样
正确参考：zhuanlan.zhihu.com/p/23804247
  1. 立即执行函数：
    ;(function (){
        var name
    }())
    ;(function (){
        var name
    })()
    !!!!!!!function (){
        var name
    }()
    ~function (){
        var name
    }()

    ES6:
     {
        let  name
     }

 造出一个函数作用域，防止污染全局变量
  1. 如何实现深拷贝
  1. JSON 来深拷贝
      var a = {...}
      var b = JSON.parse( JSON.stringify(a) )
      缺点：JSON 不支持函数、引用、undefined、RegExp、Date……
  2. 递归拷贝：
  	①判断要拷贝的是对象还是数组  
      ②递归便利对象的每一个属性并赋值给新的对象
  1. 如何实现数组去重？
    1. 创建一个对象，便利数组，如果对象没有拥有数组值，就将这个数组值当成对象的键值对中的key，并且值是ture
    2. ES6 Set去重：Array.from(new Set(a))
  1. 原型，原型链，继承
  JS 原型是什么？
    Array.prototype 就是 a 的原型（proto）

  JS 如何实现继承？
    原型链
    现在有 a 和 b 2个对象，想让b继承a的原型，就生命一个c = new b();a.prototype = new c()
    extends 关键字
      class A{
      constructor(){
          this.body = '肉体'
      },
      move(){}
    }
    class B extends A{
        constructor(name){
            super()
            this.name = name
        },
        useTools(){}
    }
    var c = new B()
  1. DOM事件模型
  DOM事件模型是解释元素所有绑定函数执行顺序
  捕获事件和冒泡事件。这个顺序顺序是由监听顺序决定的, 可以通过addEventListener的第三个参数控制；true按捕获方向执行函数；false按冒泡方向执行函数
  e.stopPropagation()可以中断冒泡;在vue中阻止冒泡可以使用 .stop 修饰符来阻止点击事件的冒泡
  捕获事件是无法阻止的
  1. http状态码
  2xx 表示成功
  301 永久重定向：说明请求的资源被永久的移动到别的url
  302 临时重定向：说明请求的资源被永久的移动到新的url，浏览器会重新定位到新的url上
  4xx 表示客户端响应 404
  5xx 表示服务端响应
  1. get post 区别
  1. 参数。GET 的参数放在 url 的查询参数里，POST 的参数（数据）放在请求消息体里。
  2. 安全（扯淡）。GET 没有 POST 安全（都不安全）
  3. GET 的参数（url查询参数）有长度限制，一般是 1024 个字符。POST 的参数（数据）没有长度限制（扯淡，4~10Mb 限制）
  4. 包。GET 请求只需要发一个包，POST 请求需要发两个以上包（因为 POST 有消息体）（扯淡，GET 也可以用消息体）
  5. GET 用来读数据，POST 用来写数据，POST 不幂等（幂等的意思就是不管发多少次请求，结果都一样。）
  1. 跨域问题
  同源策略：协议相同、域名相同、端口相同的网址是同源的，他们的资源是可以访问的，只要不是同源的网站，就不允许访问对方的数据。同源策略主要是为了保证用户信息的安全，防止恶意的网站数据窃取。  

  JSONP:
     JSONP是一种动态script标签跨域请求技术。指的是请求方动态创建script标签，src指向响应方的服务器，同时传一个参数callback，callback后面是一个随机生成的functionName，当请求方向响应方发起请求时，响应方根据传过来的参数callback,构造并调用形如：xxx.call(undefined,'你要的数据'),其中'你要的数据'的传入格式是以JSON格式传入的，因为传入的JSON数据具有左右padding,因而得名JSONP。后端代码构造并调用了xxx，浏览器接收到了响应，就会执行xxx.call(undefined,'你要的数据'),于是乎，请求方就知道了他要的数据，这就是JSONP。
  JSONP为什么不支持post:
    1. JSONP是通过动态创建script实现的
    2. 动态创建script只能发起get请求，无法发起post请求

  CORS
   Cross-Origin Resource Sharing，跨源资源共享，是跨域的解决方案之一。请求方在请求头中设置Origin属性说明是跨域请求，相应方根据设定的跨域规则返回Access-Control-Allow-Origin等以Access-Control-开头的响应头以及请求的资源，否则返回403状态码，且不会返回请求的资源。
  1. vue 组件通讯
  父子通讯：props和$emit
  兄弟通讯：$eventbus
  1. vuex
  vuex 本质就是一个状态仓库store，它有2个特性：①Vuex 的状态存储是响应式的。②你不能直接改变 store 中的状态。
  Vuex 使用单一状态树，一个应用应该只包含一个store实例（多个时用Module）
  获取数据：this.$sotre.state.xxx
  派生数据：this.$store.getters.xxx
  同步改变数据：mutation:{} this.$store.commit('increment', data) Mutation 必须是同步函数
  异步改变数据：action:{} this.$store.dispatch('increment', data) Action 可以是异步函数;可以返回 Promise

  Module: 当应用变得非常复杂时，store 对象就有可能变得相当臃肿。这时就可以将 store 分割成模块（module），每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块
  1. computed、watch和methods特性比较
computed和methods
计算属性和methods可以实现相同的功能，但计算属性是以来缓存的；计算属性只有在它的相关依赖发生改变时才会重新求值。
-- 为什么需要缓存？
假设我们有一个性能开销比较大的的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。

computed和watch
虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的

二、笔试

  1. cookie sessionstorage 和 localstorage的区别
  1. Cookie 是什么？Session 是什么？
  Cookie: HTTP协议是无状态的所以客户端需要一个cookie来储存起来。
    HTTP响应通过 Set-Cookie 设置 Cookie
    浏览器访问指定域名是必须带上 Cookie 作为 Request Header
    Cookie 一般用来会话状态管理、个性化设置、浏览器行为跟踪
  Session
    Session 是服务器端的内存（数据）
    Session 一般通过在 Cookie 里记录 SessionID 实现
    SessionID 一般是随机数
  session和cookie的区别：
  session储存在服务端，cookie储存在客户端
  session比cookie更安全，因为session储存在服务端
  session是在服务端保存的一个数据结构，用来跟踪用户的状态，这个数据可以保存在集群、数据库、文件中。
  cookie是客户端保存用户信息的一种机制，用来记录用户的一些信息，也是实现session的一种方式。
  
  localStorage
    只读的localStorage 属性允许你访问一个Document 源（origin）的对象 Storage；存储的数据将保存在浏览器会话中。存储在 localStorage 的数据可以长期保留。
  sectionStorage
    sessionStorage 属性允许你访问一个 session Storage 对象。存储在 sessionStorage 里面的数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。在新标签或窗口打开一个页面时会在顶级浏览上下文中初始化一个新的会话，这点和 session cookies 的运行方式不同
localStorage和sessionStorage区别
存储在 localStorage 的数据可以长期保留，而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。
  2. LocalStorage 和 Cookie 的区别是什么？
    Cookie 会随请求被发到服务器上，而 LocalStorage 不会
    Cookie 大小一般4k以下，LocalStorage 一般5Mb 左右
  1. 语义化怎么理解
第一种举例，段落用 p，边栏用 aside，主要内容用 main 标签
第二种
最开始是 PHP 后端写 HTML，不会 CSS，于是就用 table 来布局。table 使用展示表格的。严重违反了 HTML 语义化。
后来有了专门的写 CSS 的前端，他们会使用 DIV + CSS 布局，主要是用 float 和绝对定位布局。稍微符合了 HTML 语义化。
再后来，前端专业化，知道 HTML 的各个标签的用法，于是会使用恰当的标签来展示内容，而不是傻傻的全用 div，会尽量使用 h1、ul、p、main、header 等标签  
语义化的好处是易读、有利于SEO等。
  1. url到页面展现
浏览器通过向 DNS 服务器发送域名，DNS 服务器查询到与域名相对应的 IP 地址，然后返回给浏览器，浏览器再将 IP 地址打在协议上，
同时请求参数也会在协议搭载，然后一并发送给对应的服务器。接下来介绍向服务器发送 HTTP 请求阶段，HTTP 请求分为三个部分：TCP
三次握手、http 请求响应信息、关闭 TCP 连接。

-1. DNS 解析:将域名解析成 IP 地址
	DNS依次查询浏览器缓存、操作系统缓存、路由缓存、ISP 的 DNS 服务器、根服务器等，找到匹配的ip地址
-2. TCP 连接：TCP 三次握手
	第一次：客户端向服务器发送数据包询问服务器能不能接收到数据；第二次：服务器向客户端发送响应包告诉客户端我能接收到数据；
  第三次：客户端向服务器发送数据包说好的，我现在就给你发送数据。
-3. 发送 HTTP 请求
	请求报文由请求行（request line）、请求头（header）、请求体，空行 四个部分组成
    1. 请求行包含请求方法、URL、协议版本
    2. 请求头包含请求的附加信息，由关键字/值对组成，每行一对，关键字和值用英文冒号“:”分隔。
    3. 请求体，可以承载多个请求参数的数据，包含回车符、换行符和请求数据，并不是所有请求都具有请求数据
-4. 服务器处理请求并返回 HTTP 报文

-5. 浏览器解析渲染页面
    1. 根据 HTML 解析出 DOM 树
    2. 根据 CSS 解析生成 CSS 规则树
    3. 结合 DOM 树和 CSS 规则树，生成渲染树
    4. 根据渲染树计算每一个节点的信息
    5. 根据计算好的信息绘制页面
-6. 断开连接：TCP 四次挥手
    1. 第一次挥手：由浏览器发起的，发送给服务器，我请求报文发送完了，你准备关闭吧
    2. 第二次挥手：由服务器发起的，告诉浏览器，我请求报文接受完了，我准备关闭了，你也准备吧
    3. 第三次挥手：由服务器发起，告诉浏览器，我响应报文发送完了，你准备关闭吧
    4. 第四次挥手：由浏览器发起，告诉服务器，我响应报文接受完了，我准备关闭了，你也准备吧
    服务器接收到第四次挥手就关闭链接，浏览器等待一段时间后关闭链接。
  1. 前端优化
1. 缓存
	使用 CDN，减少资源下载时间
2. 资源文件
	指css、js、img这类型的资源文件
  使用2-4个域名，最大化下载线程
  压缩大小
  合并js、css文件，图片做成雪碧图，减少请求
  懒加载
  icon类可以使用iconfont或者SVG
3. 编码
	减少DOM操作
  减少重排与重绘
  使用事件委托
  1. 盒模型
avatar
文章
阅读
粉丝