CHICAGO

# 2020 / 3 / 10

内容出自掘友「wuliDream」 入口：https://juejin.im/post/5ab633c451882555627d3d70

# 车轮互联

# 1 / 逻辑分辨率和物理分辨率有什么区别，如何利用 Js 互相转化

  • 物理分辨率：硬件所支持得
  • 逻辑分辨率：软件可以达到的

# 2 / 什么是BFC，如何触发？

BFC（块级格式化上下文）是一个独立的容器，决定了该容器中的内容应该如何进行定位，以及与其他容器之间的相互作用

一个页面由多个box（盒子）组成，每一个box的类型和display属性决定可这个box的内部布局方式

不同类型的box，会参与不同的 Formatting Context（决定如何渲染文档的容器），因此box内的元素会以不同的方式渲染，所以在一个BFC中，内部的元素不会影响道外部的元素

BFC布局规则：

  • BFC内部的box会在垂直方向上，一个接一个地放置
  • box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发送重叠
  • 每个元素的margin left，与包含块的bored left相接触（浮动元素也是）
  • 计算BFC的高度时，浮动元素也参与计算

如何触发BFC？

  • 根元素（html），最大的BFC
  • display设置为inline-block，table-block，table-caption
  • position设置为fixed或absolute
  • overflow的值不为visible（默认）
  • float的值不为none（默认）

# 3 / 请描述浏览器的同源策源，以及常见的解决跨域的方式

同源，指同协议，同域名，同端口，三者有任意一个不同，则为跨域

常见解决跨域

  • jsonp（仅能处理GET）
  • 服务器设置响应头（Access-Control-Allow-Origin）
  • window.name（利用同一页面下，所有的域名共享一个window.name）
  • document.domain / window.postMessage()
  • node中间件
  • nginx配置代理

# 4 / 用正则表达式验证车牌合法性（格式为 沪B8371A）

var reg = /^[\u4e00-\u9fa5]{1}[A-Z]{1}[A-Z_0-9]{5}$/

# 5 / 实现'快速排序'算法

快速排序的思想：

  • 从数组中取出一个数作为基准
  • 在原数组中进行移动，将大于基准的数放在基准右边，小于基准的数放在基准左边，在基准左右形成两个子数组
  • 在左右子数组中反复执行，直到所有子数组只剩下一个数
var quickSort = function(arr){
    if(arr.length <= 1) return arr

    var middleIndex = Math.floor(arr.length / 2) // 基准下标
    var middleValue = arr.splice([middleIndex], 1)[0] // 获取这个基准的值 并从数组中删去

    var left = [] // 存放小于基准的元素
    var right = [] // 存放大于基准的元素

    for(var i = 0; i < arr.length; i++){
        if(arr[i] < middleValue){
            left.push(arr[i])
        }else{
            right.push(arr[i])
        }
    }

    return quickSort(left).concat([middleNum], quickSort(right))
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 6 / 请描述css选择器的优先级原则

优先级： !important > 内联 > id > class > 标签 > 通配符

优先级原则

  • 选择器同权重的情况下，选择最后出现的样式
  • 权重不同时，按元素选择器的权重进行选择（标签:1，class:10，id:100，内联:1000）
  • 继承得到样式优先级最低

# 7 / 请简单描述 http协议 的请求报文和响应报文的组成格式

  • Http请求报文包括：

    • 请求行（request-line）：请求行由请求方法字段、URL字段和HTTP协议版本字段3个字段组成，它们用空格分隔
    • 请求头部（headers) ：请求头部由关键字/值对组成，每行一对，关键字和值用冒号隔开
    • 空行（blank-line）：最后一个请求头之后是一个空行，通知服务器以下不再有请求头
    • 请求数据（request-body) ：请求数据不在GET中使用，而在POST方法中使用

  • Http响应报文包括：

    • 状态行（status-line）：格式 HTTP-Version Status-Code Reason-Phrase CRLF
      • Http-Version - http协议版本
      • Status-Code - 服务器返回的响应状态码
      • Reason-Phrase - 状态码的文本描述
    • 消息报头（headers）
    • 空行（blank-line）
    • 响应正文（response-body）

# 8 / 用三种方式实现元素垂直居中效果（假设元素高度根据内容自适应，即高度未知）

  • line-height
  • 父元素设置相对定位，子元素设置绝对定位，标签通过margin实现自适应居中
  • position + transform
{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
}
1
2
3
4
5
  • flex布局
{
    display:flex;
    align-items:center;
}
1
2
3
4

# 9 / http中状态302代表的是什么意思

302，指请求的资源现在临时从不同的url响应请求，由于这样的重定向属于临时重定向，客户端应当继续向原有地址发送以后的请求。

# 10 / cookie是什么，和session有什么区别

cookie 是一种浏览器缓存的方式，是存储在浏览器目录的一个文本文件，常用于记录用户信息，确认用户身份。大小为4kb

与session的区别：

  • cookie存在于浏览器上，而session存在于服务器
  • cookie 相比 session，安全性较差
  • cookie 大小不超过4kb，而session没有限制大小
  • session会在一定时间内存储在服务器上，占有服务器资源

# 11 / 有哪些Dom接口可以获取一个元素的尺寸（宽度和高度）

  • clientHeight / clientWidth ：元素的内容 + 内边距，不包括边框
  • offsetHeight / offsetWidth ：元素的内容 + 内边距 + 边框，不包括外边距

# 12 / 请描述Dom事件的流程，即从触发到结束的整个过程

事件处理有三个阶段：捕获 → 目标 → 冒泡

  • 捕获：从最不精准的元素到最精准的元素（即从window发除，不断经过下级节点直到触发的目标节点，在到达目标节点之前，就是捕获阶段）
  • 目标：当事件不断的传递直到目标节点时，最终在这目标节点上触发这个事件
  • 冒泡：与捕获相反，从最精确的元素到最不精确的元素

# 13 / 讲一讲你在日常web开发中加载和交互体验上常用的优化策略

  • 预加载 / 懒加载
  • 防抖 / 节流
  • 骨架图
  • webpack进行代码压缩
  • 减少重绘和回流

# 14 / 什么是csrf攻击？如何预防？

csrf（跨站请求伪造）是指一种劫持受信任用户向服务器发送非预期请求的攻击方式，借助受信任用户的Cookie骗取服务器的信任，可以在受害者毫不知情的情况下以受害人的名义伪造请求发送给服务器，在未得到授权的情况下执行受权限保护的请求

预防CSRF

  • 验证码
  • referer check
  • 通过token认证

# 15 / 要做一个在线图片裁剪和压缩的功能，请写出实现思路

通过 canvas 来实现，用 canvas 获取裁剪范围，并压缩成base64的图片

← 2020 / 3 / 15 →