# 2020 / 3 / 9

内容出自掘友「杨珏成」入口：https://juejin.im/post/5d70ff205188253e4b2f07bd#heading-17

# 网易校招一面

# 1 / 块状元素 & 行内元素

块状元素
- 每一个块级元素都从新的一行开始，并且其后的元素也另起一行（一个块状元素独占一行）
- 元素的高度、宽度，行高以及边距都可以设置
- 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素宽度一致），除非设定一个固定宽度
行状元素
- 和其他元素都在一行上（不独占一行）
- 元素的高度，宽度以及上下边距不可设置
- 元素的宽度就是它包含的内容的宽度，且不可改变

# 2 / 标签语义化是什么？

标语语义化就是使用一些具有结构意义的标签，例如 header，footer，article等，让结构更清晰，有利于浏览器的解析

使用语义化标签，即使在没有 css 样式的情况下，页面也会以一种文档结构来显示，更加易于阅读

由于搜索引擎的爬虫也依赖于Html标签来确定上下文和各个关键字的权重，因此使用语义化标签有利于SEO

# 3 / css清除浮动

父级元素添加overflow属性，或者设置高度

<div class='Parent' style='oveflow:auto'>
    <div class='Float'></div>
</div>

1
2
3

父元素设置伪元素

<div class='Parent'>
    <div class='Float'></div>
</div>

1
2
3

.Parent:after{
    content:'';
    display:block;
    height:0;
    visibility:hidden;
    clear:both;
}

1
2
3
4
5
6
7

添加额外标签

<div class='Parent' style='oveflow:auto'>
    <div style='clear:both;'></div>
    <div class='Float'></div>
</div>

1
2
3
4

# 4 / 什么是盒模型？

元素按照盒模型的规则在页面中进行布局，盒模型由 content，margin，padding，border 组成

盒模型可以分为两种：

IE盒模型（怪异盒模型）
- width = content + padding + border
- 一个块的宽度 = width + margin
W3C标准盒模型（默认）
- width = content
- 一个块的宽度 = width + padding + margin + border

Css通过 box-sizing 来切换

box-sizing:border-box → IE盒模型标准
box-sizing:content-box → W3C盒模型标准

# 5 / css 优先级

!important > 内联 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器

优先级算法：

同权重情况下以样式定义最近者为准（优先级相同，选择最后出现的样式）
按元素选择符的权重（标签:1，类选择器:10，id选择器:100，内联样式:1000）
继承得到的样式优先级最低

# 6 / 移动端适配？

布局使用 flex 进行布局
单位采用 rem 作为单位
媒体查询（meta设置viewport）

# 7 / px & em & rem

px：固定的像素，一旦设置了就无法因为适应页面大小而改变
em：相对于父元素的字体大小的单位
rem：相对于根元素的字体大小的单位

# 8 / ==和===的区别？

== 比较前进行类型转化
- NaN ：和其他类型比较永远返回false（包括自己）
- boolean ：和其他类型比较均先转化为Number
- string & number ：string先转化为number，再进行比较
- Null & Undefined ：除了 null == undefined 为true之外，null和undefined和其他比较均为false
- 原始类型 & 引用类型：引用类型先转化为原始类型（valueOf()，toString()）
=== 比较前不需要进行类型转化

# 9 / 原型和原型链是什么？

原型：每一个Javascript对象（null除外）都有一个与之关联的对象，这个对象称为原型对象，每一个对象都会从原型上继承属性。
- 可以当作一个简单的对象，用于实现对象的属性继承
- 原型对象有一个constructor属性，指向这个原型对象的构造函数
原型链：每一个对象都有 protot 属性（实例，构造函数都有），指向创建这个对象的构造函数的原型，proto 将对象链接起来组成了链状结构，这种链状结构就称为原型链，是一个可以实现继承和共享属性的有限链

# 10 / 什么是深拷贝？

当我们拷贝一个对象时，如果对象的属性仍是一个对象的话，使用浅拷贝，该属性两者仍会共享相同的地址（浅拷贝只能处理第一层），为解决这种问题，就需要深拷贝

深拷贝会克隆出一个对象，数据相同，但是引用地址不同（包括属性是对象的情况）

方式：

JSON.parse(JSON.stringify(obj))
lodash库中cloneDeep()

# 11 / 什么是同步？什么是异步？

同步：是指只有前一个任务执行完毕，才能继续下一个任务的执行
异步：下一个任务不需要等待这个任务执行完毕才继续执行

# 12 / 如何顺序执行10个异步任务？

通过 async / await 的方式

# 13 / Es6 Proxy是什么？

Proxy用于修改某些操作的默认行为，可以理解为在目标对象之前架设一层拦截，外部所有的访问都必须通过这层拦截。它提供了一种机制，可以对外部的访问进行过滤和修改

用法：var proxy = new Proxy(target, handler)

# 14 / JS中对象数组按照对象的某个属性进行排序

function sortRule(prop){
    return function(a, b){
        rerturn a[prop] - b[prop]
    }
}

var arr = [
    { id:1 },
    { id:2 },
    { id:4 },
    { id:3 }
]

arr.sort(sortRule)

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 15 / 数组去重？

[...new Set(array)] / [...new Set('aabbbcc')].join('')
对象数组去重

function unique(arr){
    return [...new Set(arr.map( item => JSON.stringify(item)))].map( e => JSON.parse(e) )
}

1
2
3

# 16 / 如何进行git的分支管理？

创建分支：git branch (branchName)
切换分支：git checkout (branchName)
合并分支：git merge
列出分支：git branch

# 17 / 浏览器有哪些缓存？

IndexBD - H5本地存储库（存储在浏览器中），即使没有网络，也可以从本地读取（大小5m）
Cookie - 通过浏览器记录信息确认用户身份（大小4kb）
WebStorage
- SessionStorage - 浏览器关闭即消失
- LocalStorage - 除非手动删除，否则不消失

Session存在于服务端，是一种记录客户状态的机制

# 18 / 什么是跨域？

当一个请求url的协议，域名，端口三者任意一个与当前页面url不同，即为跨域

# 19 / 如何解决跨域？

jsonp（仅处理GET）
服务器端响应头设置 cors （Access-Control-Allow-Origin）
window.name（利用浏览器窗口内，载入所有的域名都共享一个window.name）
document.domain / window.postMessage()

# 20 / 页面性能的优化

预加载：将所有所需的资源提前请求加载到本地，这样后面使用可以直接从缓存中获取
懒加载：延迟加载，在长网页中延迟加载图像
防抖 / 节流
骨架图
代码压缩
Html
- 减少Dom元素的数量（尽量少用iframe)
- 避免不必要的嵌套
Css
- 首屏样式内联
- 异步加载css
- 减少重绘和回流
Js
- 减少Dom的操作

# 21 / 浏览器安全处理

Xss（跨站脚本攻击） - 指攻击者在网站上注入恶意的客户端代码（Html，Js），通过恶意脚本对客户端网页进行篡改，从而在用户浏览网页时，对用户浏览器进行控制或者获取用户隐私数据的一种攻击方式
- 分类：反射型（非持久），存储型（持久），基于Dom的攻击
- 预防处理
  - 输入检查：不信任用户的任何输入（对用户输入进行检查），一般通过过滤和转义，建立白名单
  - 输出检查：服务端的输出也会存在问题，一般来说，除富文本的输出外，在变量输出到Html页面时，可以使用编码或转义的方式预防Xss攻击
  - 防止劫取Cookie
Csrf（跨站请求伪造）- 指一种劫持受信任用户向服务器发送非预期请求的攻击方式，Crsf攻击是攻击者借助受害者的Cookie骗取服务器的信任，可以在受害者毫不知情的情况下以受害者的名义伪造请求发送给服务器，从而在未授权的情况执行在权限保护之下的操作
- 预防处理
  - 验证码
  - Referer Check
  - 添加token认证

← 2020 / 3 / 8 2020 / 3 / 10 →

# 2020 / 3 / 9

# 网易校招一面

# 1 / 块状元素 & 行内元素

# 2 / 标签语义化是什么？

# 3 / css清除浮动

# 4 / 什么是盒模型？

# 5 / css 优先级

# 6 / 移动端适配？

# 7 / px & em & rem

# 8 / ==和===的区别？

# 9 / 原型和原型链是什么？

# 10 / 什么是深拷贝？

# 11 / 什么是同步？ 什么是异步？

# 12 / 如何顺序执行10个异步任务 ？

# 13 / Es6 Proxy是什么？

# 14 / JS中对象数组按照对象的某个属性进行排序

# 15 / 数组去重？

# 16 / 如何进行git的分支管理？

# 17 / 浏览器有哪些缓存？

# 18 / 什么是跨域？

# 19 / 如何解决跨域？

# 20 / 页面性能的优化

# 21 / 浏览器安全处理

# 11 / 什么是同步？什么是异步？

# 12 / 如何顺序执行10个异步任务？