前端知识点

前端面试题

2019-06-20  本文已影响110人  前端一枚渣渣

三栏布局

  1. flex
div {
  width: 180px;
  height: 50px;
  display: flex;
  flex-flow: column wrap;
  align-content: flex-start;
}
.a1 {
  width: 50px;
  height: 50px;
  background-color: red;
}
.a2 {
  width: 80px;
  height: 25px;
  background-color: tan;
}
.a3 {
  flex-grow: 1;
  background-color: aqua;
}
.a4 {
  width: 25px;
  height: 50px;
  background-color: #fff;
}
.a5 {
  flex-grow: 1;
  background-color: red;
}
  1. 三栏等宽布局
div {
  width: 180px;
  height: 50px;
  display: flex;
  background-color: tan;
}

section {
  flex: auto;
}

.a1 {
  background-color: #fff;
}
.a2 {
  background-color: #444;
}
.a3 {
  background-color: red;
}

垂直居中

  1. position
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  1. table
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: tan;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
span {
  background-color: red;
}
  1. 行内块
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: tan;
}
section {
  width: 50px;
  height: 50px;
  display: inline-block;
  margin: 25px;
  background-color: red;
}
  1. float
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: tan;
}
section {
  width: 50px;
  height: 50px;
  margin: 25px;
  float: left;
  background-color: red;
}
  1. line-height
div {
  width: 100px;
  height: 100px;
  background-color: tan;
  text-align: center;
  line-height: 100px;
}
span{
  background-color: #fff;
  vertical-align: middle;
}

盒模型

margin-box, border-box, padding-box, content-box
首先是最内层content-box，用来显示元素信息
向外是padding-box，主要用于设置元素四个方向的内边距，
再向外是border-box，用于设置元素四个方向的边框样式，
最外层是margin-box，为了让元素与其他元素隔开，对于垂直方向上的BFC元素的margin会发生合并，去较大的值
padding-box和margin-box是透明的，padding-box会受元素的背景的影响，可以通过box-sizing设置
padding-box和border-box不能去负值，margin-box可以取负值
还有元素的溢出属性，处理空白空间及文本溢出

  * css中每个元素都看作多个盒子的组合，我们可以通过设置这些盒子的属性来改变元素的样式
  * 如果设置 box-sizing 为 content-box，那么宽度就是内容区的宽度
  * 如果设置为 border-box，那么宽度就死活内容区宽度+padding+border

单行文本溢出省略：

text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;

BFC

浮动，绝对定位，overflow不为visible，非块级盒子块级容器
触发：
  1. float 除了none以外的值 
　2. overflow 除了visible 以外的值（hidden，auto，scroll ） 
　3. display (table-cell，table-caption，inline-block, flex, inline-flex) 
　4. position值为（absolute，fixed）

特性：
  在BFC中，盒子从顶端开始垂直地一个接一个地排列。
  盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子垂直方向的margin会发生重叠。
  在BFC中，每一个盒子的左外边距（margin-left）会触碰到容器的左外边缘（border-left）。
  BFC不会与浮动盒子产生交集，而是紧贴浮动元素边缘。
  计算BFC高度BFC时，自然也会检测浮动的子盒子高度。

应用：
  自适应两栏布局
  解决margin叠加问题：下面元素添加父元素：overflow: hidden;
  清除浮动，计算BFC高度

闭合浮动的办法：

谈谈你对MVVM开发模式的理解

如何优化SPA应用的首屏加载速度慢的问题

  1. 将公用的JS库通过script标签外部引入，让浏览器并行下载资源文件，提高下载速度；
  2. 在配置路由时，页面和组件使用懒加载的方式引入，在调用某个组件时再加载对应的js文件；
  3. 加一个首屏 loading 图，提升用户体验；

跨域（Cross-Origin）

只要协议、主机、端口不一致，就会有跨域的问题

  function jsonp(url, value, cb) {
    let cbName = 'JSONP_CALLBACK_' + Date.now() + '_' + Math.random().toString().slice(2)
    window[cbName] = cb
    url = url + '?q=' + value + '&callback=' + cbName
    let script = document.createElement('script')
    script.src = url
    script.onload = () => {
      document.body.removeChild(script)
      delete window[cbName]
    }
    document.body.appendChild(script)
  }

  function ajax(url = '', data = {}, type = 'GET') {
    if (type === "GET") {
      let urlStr = ""
      Object.keys(data).forEach(key => {
        urlStr += key + '=' + data[key] + '&'
      })
      if (urlStr) {
        urlStr = urlStr.substring(0, urlStr.length - 1)
        url += '?' + urlStr
      }
      return axios.get(url)
    } else if (type === "POST") {
      return axios.post(url, data)
    }
  }

前端如何优化网站性能

Less / Sass

Less的变量名使用@符号开始
Sass的变量是必须$开始

AntDesign / bootstrap

http协议

websocket

首先Websocket是基于HTTP协议的，或者说借用了HTTP的协议来完成一部分握手。
GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat

socket.io

socket.io 是一个能实现多人远程实时通信(聊天)的库
它包装的是 H5, WebSocket和轮询, 如果是较新的浏览器内部使用 WebSocket,如果浏览器不支持, 那内部就会使用轮询实现实时通信

网页从输入网址到渲染完成经历了哪些过程

1 输入网址
2 发送到DNS服务器，并获取域名对应的web服务器对应的ip地址
3 与web服务器建立TCP连接
4 浏览器向web服务器发送http请求
5 web服务器响应请求，并返回指定url的数据（或错误信息，或重定向的新的url地址）
6 浏览器下载web服务器返回的数据及解析html源文件
7 生成DOM树，解析css和js，渲染页面，直至显示完成

数据结构和算法

// reduce
  function reduce(ary, f, initVal) {
    var start = 0
    if (arguments.length == 2) {
      initVal = ary[0]
      start = 1
    }
    for (var i = start; i < ary.length; i++) {
      initVal = f(initVal, ary[i], i, ary)
    }
    return initVal
  }
// flattenDeep
  function flattenDeep(ary) {
    return [].concat(...ary.map(val => {
      if (Array.isArray(val)) {
        return flattenDeep(val)
      } else {
        return val
      }
    }))
  }

ES6 新特性

ES8 新特性

BOM / DOM

图片懒加载

  var imgs = document.querySelectorAll('img');

  //offsetTop是元素与offsetParent的距离，循环获取直到页面顶部
  function getTop(e) {
      var T = e.offsetTop;
      while(e = e.offsetParent) {
          T += e.offsetTop;
      }
      return T;
  }

  function lazyLoad(imgs) {
      var H = document.documentElement.clientHeight;//获取可视区域高度
      var S = document.documentElement.scrollTop || document.body.scrollTop;
      for (var i = 0; i < imgs.length; i++) {
          if (H + S > getTop(imgs[i])) {
              imgs[i].src = imgs[i].getAttribute('data-src');
          }
      }
  }

  window.onload = window.onscroll = function () { //onscroll()在滚动条滚动的时候触发
      lazyLoad(imgs);
  }

原型，闭包，高级函数，异步

sessionstorage localstorage cookie区别

  1. 传递方式不同
    cookie数据始终在同源的http请求中携带(即使不需要)，即cookie在浏览器和服务器间来回传递。
    sessionStorage和loaclStorage不会自动把数据发给服务器，仅在本地保存。
  2. 数据大小不同
    cookie数据还有路径(path)的概念，可以限制cookie只属于某个路径下。
    cookie数据最大4k，sessionStorage和localStorage比cookie大得多，可以达到5M或者更大。
  3. 数据有效期不同
    sessionStorage:仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；
    localStorage:始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；
    cookie只在设置cookie过期时间之前一直有效，即使窗口或浏览器关闭。
  4. 作用域不同
    sessionStorage不同的浏览器窗口不能共享，即使是同一个页面；
    localStorage所有同源窗口都是共享的；
    cookie所有同源窗口中都是共享的。

session / cookie

event loop

第一步确认宏任务，微任务
  宏任务：script，setTimeout，setImmediate，promise中的executor
  微任务：promise.then，process.nextTick
process.nextTick优先级高于Promise.then


timers: setTimeout / setInterval
I/O callbacks: 不在其他阶段的所有回调函数
poll: 获取新的I/O事件
check：执行setImmediate
close callback: 执行关闭事件的回调函数


在整个轮询的开始执行process.nextTick
然后再执行setTimeOut、setInterval
再执行其他的回调函数
最后执行setImmediate

发送ajax请求

axios / fetch

Node.js

Node核心思想：1.非阻塞；　　2.单线程；　　3.事件驱动。
Node 是一个服务器端 JavaScript 解释器
当线程遇到IO操作的时候，不会以阻塞的方式等待IO操作完成或者数据的返回，而是将IO操作发送给操作系统，
然后接着执行下一个操作，当操作系统执行完IO操作之后，以事件的方式通知执行IO的线程，
线程会在特定的时候执行这个事件。这一切的前提条件就是，系统需要一个事件循环,
以不断的去查询有没有未处理的事件，然后给预处理。

Redux

redux 是一个独立的专门用于状态管理的js库
可以管理react应用中多个组件共享的状态

用redux对组件的状态进行集中式管理

组件：两个方面
展现数据   状态显示
与用户交互更新数据   更新状态


redux核心是一个store（仓库）
组件直接从store中读取状态

更新状态：
1. Action Creators ==>> dispatch(action) ：传两个值（type和data） type是传的类型（删除，增加，创建，更新）
2. store
3. Reducers ==>> 接受(previousState, action) 返回(newState)
4. React Component


createStore()
store: 管理state, reducer
方法： getState() , dispatch(action) , subscribe(listener)
action对象 
reducer返回的是新的状态

applyMiddleware 中间件
thunk 异步

diff算法

react-redux 的核心就是一个connect函数，接收两个参数，mapStatetoprops，mapdispatchtoprops，返回一个高阶组件，这个高阶组件接受一个组件，返回一个组件，但是这个返回的组件的props上面多了数据以及操作数据的方法

function connect(mapStateToProps,mapDispatchToProps){
  return function(com){
    return class extends React.Component{
      render(){
        return (
          <Consumer>
            {store=>{
              state = mapStateToProps(store.getState())
              dispatch = mapDispatchToProps(store.dispatch)
              return <Comp {...state}{...dispatch}></Comp>
            }}
          </Consumer>
        )        }
    }
  }
}

容器组件和展示组件

为什么连接的时候是三次握手，关闭的时候却是四次握手？

因为当Server端收到Client端的SYN连接请求报文后，可以直接发送SYN+ACK报文。
其中ACK报文是用来应答的，SYN报文是用来同步的。
但是关闭连接时，当Server端收到FIN报文时，很可能并不会立即关闭SOCKET，
所以只能先回复一个ACK报文，告诉Client端，"你发的FIN报文我收到了"。
只有等到我Server端所有的报文都发送完了，我才能发送FIN报文，因此不能一起发送。故需要四步握手。

redux

  action: 是store唯一的信息来源，把action发送给store必须通过store的dispatch方法。
          每个action必须有一个type属性描述action的类型。

XSS 与 CSRF 两种跨站攻击

  1. xss 跨站脚本攻击，主要是前端层面的，用户在输入层面插入攻击脚本，改变页面的显示，或则窃取网站 cookie，预防方法：不相信用户的所有操作，对用户输入进行一个转义，不允许 js 对 cookie 的读写
  2. csrf 跨站请求伪造，以你的名义，发送恶意请求，通过 cookie 加参数等形式过滤
  3. 我们没法彻底杜绝攻击，只能提高攻击门槛

负载均衡

当系统面临大量用户访问，负载过高的时候，通常会使用增加服务器数量来进行横向扩展，使用集群和负载均衡提高整个系统的处理能力

JS实现继承的方法

1. 原型链继承
  将父类的实例作为子类的原型
  function Cat() {}
  Cat.prototype = new Animal()
  Cat.prototype.name = 'cat'
  var cat = new Cat()
2. 构造继承
  使用父类的构造函数来增强子类的实例，等于是复制父类的实例属性给子类
  function Cat(name) {
    Animal.call(this)
    instance.name = name || 'Tom'
  }
  var cat = new Cat()
3. 实例继承
  为父类实例添加新特性，作为子类的实例返回
  function Cat(name) {
    var instance = new Animal()
    instance.name = name || 'Tom'
    return instance
  }
  var cat = new Cat()
上一篇 下一篇

猜你喜欢

热点阅读