前端 基础知识

目录

跨域

协议、域名、端口不一直都会导致跨域。

解决：

• 关闭浏览器的跨域检查

• Cross-Origin Resource Sharing

  携带Access-Control-Allow-Origin,如果要带cookie开启Access-Control-Allow-Credentials

• 在服务端进行Nginx反向代理

• Node正向代理

  webpack中可以配置proxy

• JSONP（JSON with Padding: 利用了 script标签没有跨域限制的这个特性来完成的。

• Websocket :方式本质没有使用了 HTTP 的响应头 因此也没有跨域的限制。（先由一个http发起连接）

• **document.domain + Iframe:**只能用于二级域名相同的情况下。

数据类型

数字、字符串、对象、布尔值、null、undefined

判断方法: Object.prototype.toString.call()

不用typeof:（对于引用类型，除了function之外返回的都是object）

instanceof运算符用于检查右边构造函数的prototype属性是否出现在左边对象的原型链中的任何位置。其实它表示的是一种原型链继承的关系。

typeof null; //object 无效
typeof [] ; //object 无效
typeof new Date(); //object 无效
typeof new RegExp(); //object 无效

网络五层模型

HTTP与HTTPS

https:使用对称/非对称加密，有状态的

https 握手阶段比较费时，会使页面加载时间延长 50%

EventLoop

宏任务包括:setTimeout,setInterval,DOM事件，AJAX请求
微任务包括:Promise,async/await

微任务执行时机比宏任务早

微任务先于DOM渲染，宏任务执行后与DOM渲染。

页面渲染

1. 得到html文本
2. 解析HTML文本，构建DOM树
3. 解析的同时遇到样式和脚本则下载并构建和执行（CSS不阻塞dom构建，js阻塞（async script下载不阻塞，下载完即执行，执行时机不定；defer ****script在文档解析完毕后执行））
4. DOM和CSS规则树构建完后合并成渲染树（render tree）
5. 渲染进程开始对渲染树进行布局，生成布局树（layout tree）
6. 绘制等…

（不是顺序执行的，为了尽块展示内容）

客户端渲染 client side render

需要执行 JavaScript脚本之后才会渲染我们真正想要的页面（框架构架的页面都是）

服务端渲染

不需要经过 JavaScript脚本的下载过程，即可直接构建出我们所希望的 DOM树并展示到页面中。

静态站点生成 SSG

，每个页面对应的HTML文档在项目build构建时就已经生成好了，用户请求的时候服务端不需要发送其它请求和进行二次组装，直接将该HTML文档响应给客户端即可

手撕promise思路

1. reslove和reject的暴露
2. 状态pending、fulfilled、rejected的实现（不可逆转）
3. rs,rj的结果实现
4. throw error的情况
5. then方法（rs,rj两种情况）

call,apply,bind

call接受多个参数，apply接受数组，bind需要调用才执行

this指向

默认、隐形、显性、new（优先级反过来）

• 隐形:obj.foo()

  存在隐形丢失:（let foo = obj.bar()）

• 显性:call,apply

• new:创建新对象，新对象会绑定到函数调用的 this

• 箭头函数:默认绑定外层this

cookie,sessionStorage,localStorage,indexDB

• cookie数据大小不能超过4k；sessionStorage和localStorage的存储比cookie大得多，可以达到5M+
• cookie设置的过期时间之前一直有效；localStorage永久存储，除非主动删除 。
• sessionStorage数据在当前浏览器窗口关闭后自动删除
• cookie的数据会自动的传递到服务器，sessionStorage和localStorage不会
• indexDB是一个非关系型数据库

重排和重绘

• 重排：元素的位置发生改变
• 重绘：元素外观变化

避免

• 集中修改样式
• 使用fixed,absolute
• 使用GPU加速（translate使用3D变化）
• 硬件加速（will-change:告知浏览器你可能会对一个元素进行什么样的改变，这样它就可以提前设置适当的优化,需要提前通知，更新完后需要删除，不要声明太多）

CSS中的position属性有哪些有效值？

• static
  该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
• relative
  该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。
• absolute
  元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
• fixed
  元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。
• sticky
  当元素在屏幕内，表现为relative，就要滚出显示器屏幕的时候，表现为fixed。

缓存

• GET请求有时被缓存
• css和图片会被缓存在硬盘，js/图片缓存在内存
• 强制请求:向浏览器缓存查找该请求结果，并根据缓存规则来决定是否使用该缓存结果的过程。
  • Expires：缓存的到期时间
  • Cache-Control:一系列规则
• **协商缓存:**协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程
  • Last-Modified / If-Modified-Since
  • Etag / If-None-Match

闭包

闭包是一种特殊的对象。它由两部分构成：函数，以及创建该函数的环境。

重要特征：闭包是访问另一个函数作用域中变量的函数。即内部的函数存在外部作用域的引用。（例如函数引用了全局的某个变量）

var a = 0
function foo(){
    var b =14
    function fo(){
        console.log(a, b)
    }
    fo()
}
foo()

例如返回一个函数或使用回调函数。

作用：会形成全新的私有上下文，可保护函数的私有变量不受外部影响，但也会引起占内存回收问题，并会携带包含其它的函数作用域加大内存使用。

shadowDOM

例如 不可能仅是一个元素，浏览器屏蔽了一些元素，他们就是shadowDOM，

shadowDOM通过挂载在一个host上来实现样式等，具有良好的封闭性。类似于一个树上一个叶子节点其实是另一颗树

究竟什么是Shadow DOM？ - 掘金

webpack

webpack是前端工程化的代表，它主要作用是

• 模块打包:将不同模块的文件打包整合在一起形成单文件
• 兼容编译：babel,转译.less,.vue
• 自动化能力：诸如按需加载，代码压缩加密等

loader:babel-loader,sass-loader

plugin:terser-webpack-plugin

Loader本质就是函数，在该函数中对接收到的内容进行转换，返回转换后的结果。（因为webpack只认识js，其他内容需要依赖loader转化）

plugin 监听广播出来的webpack生命周期事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。

过程

1. 读取配置
2. 启动webpack，从entry开始解析
3. 找到模块依赖的模块，递归遍历分析，形成依赖关系树
4. 对不同文件类型的依赖模块文件使用对应的Loader进行编译，转为Javascript文件
5. 整个过程中webpack会通过发布订阅模式，向外抛出一些hooks，插件即可通过监听这些关键的事件节点，执行插件任务。

当面试官问Webpack的时候他想知道什么 - 掘金

sourceMap

将打包、压缩后的代码映射回源代码的技术，为debug服务

加快打包

多进程，利用缓存，Tree shaking去除无用模块

盒模型

• borderbox：属性值width、height包含padding和border的大小
• contentbox：只包含content

margin负值

• margin-top 元素自身会向上移动，同时会影响下方的元素会向上移动。
• margin-botom 元素自身不会位移，但是会减少自身供css读取的高度，从而影响下方的元素会向上移动。
• margin-left 元素自身会向左移动，同时会影响其它元素。
• margin-right 元素自身不会位移，但是会减少自身供css读取的宽度，从而影响右侧的元素会向左移动。

块元素，行内元素，行内块元素

• 块元素独占一行，可以调节高度，宽度，内外边距
• 行内元素不独占一行，不能设置宽高，只能在水平方向设置外边距
• 行内块元素相比行内元素可以控制宽高和内外边距

Promise.all

非promise成功

所有成功返回结果数组

有一个失败则返回该错误

原型与原型链

每个对象都有原型，原型之间存在原型链，原型链的存在让对象间继承了公有的属性的方法。

Object.getPrototypeOf()可以获取对象的原型。

在obj.prototype可以新增属性和方法。

对象的__proto__属性指向其原型对象，构造函数的prototype属性指向实例的原型对象。

vue-router解析流程

1. 导航被触发。
2. 在失活的组件里调用 beforeRouteLeave 守卫。
3. 调用全局的 beforeEach 守卫。
4. 在重用的组件里调用 beforeRouteUpdate 守卫。
5. 在路由配置里调用 beforeEnter。
6. 解析异步路由组件。
7. 在被激活的组件里调用 beforeRouteEnter。
8. 调用全局的 beforeResolve 守卫。
9. 导航被确认。
10. 调用全局的 afterEach 钩子。
11. 触发 DOM 更新。
12. 调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。

FLEX

轴

主轴水平，交叉轴从上往下

flex-direction: row | row-reverse | column | column-reverse

容器

父容器

• justify-content: 设置子元素在主轴方向上的对齐方式
• align-items： 设置子元素在交叉轴方向上的对齐方式

子元素

flex: 1（平分空间）

flex: 1, 对应的是1 1 0%, 相当于可扩大，可缩小，flex-basis为0%

flex: auto（根据大小分）

flex: auto, 对应的是1 1 auto, 相当于可扩大，可缩小，flex-basis为auto

flex: 0

flex: 0, 对应的是0 1 0%, 相当于不可扩大，可缩小，flex-basis为0%

flex: none

flex: none, 对应的是0 0 auto, 相当于不可扩大，不可缩小，flex-basis为auto

「一劳永逸」48张小图带你领略flex布局之美 - 掘金