目录
跨域
协议、域名、端口不一直都会导致跨域。
解决:
-
关闭浏览器的跨域检查
-
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渲染。
页面渲染
- 得到html文本
- 解析HTML文本,构建DOM树
- 解析的同时遇到样式和脚本则下载并构建和执行(CSS不阻塞dom构建,js阻塞(async script下载不阻塞,下载完即执行,执行时机不定;defer ****script在文档解析完毕后执行))
- DOM和CSS规则树构建完后合并成渲染树(render tree)
- 渲染进程开始对渲染树进行布局,生成布局树(
layout tree
) - 绘制等…
(不是顺序执行的,为了尽块展示内容)
客户端渲染 client side render
需要执行 JavaScript
脚本之后才会渲染我们真正想要的页面(框架构架的页面都是)
服务端渲染
不需要经过 JavaScript
脚本的下载过程,即可直接构建出我们所希望的 DOM
树并展示到页面中。
静态站点生成 SSG
,每个页面对应的HTML
文档在项目build
构建时就已经生成好了,用户请求的时候服务端不需要发送其它请求和进行二次组装,直接将该HTML
文档响应给客户端即可
手撕promise思路
- reslove和reject的暴露
- 状态pending、fulfilled、rejected的实现(不可逆转)
- rs,rj的结果实现
- throw error的情况
- 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上来实现样式等,具有良好的封闭性。类似于一个树上一个叶子节点其实是另一颗树
webpack
webpack是前端工程化的代表,它主要作用是
- 模块打包:将不同模块的文件打包整合在一起形成单文件
- 兼容编译:babel,转译.less,.vue
- 自动化能力:诸如按需加载,代码压缩加密等
loader:babel-loader,sass-loader
plugin:terser-webpack-plugin
Loader
本质就是函数,在该函数中对接收到的内容进行转换,返回转换后的结果。(因为webpack只认识js,其他内容需要依赖loader转化)
plugin
监听广播出来的webpack生命周期事件,在合适的时机通过 Webpack 提供的 API 改变输出结果。
过程
- 读取配置
- 启动
webpack
,从entry
开始解析 - 找到模块依赖的模块,递归遍历分析,形成依赖关系树
- 对不同文件类型的依赖模块文件使用对应的
Loader
进行编译,转为Javascript
文件 - 整个过程中
webpack
会通过发布订阅模式,向外抛出一些hooks
,插件即可通过监听这些关键的事件节点,执行插件任务。
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解析流程
- 导航被触发。
- 在失活的组件里调用
beforeRouteLeave
守卫。 - 调用全局的
beforeEach
守卫。 - 在重用的组件里调用
beforeRouteUpdate
守卫。 - 在路由配置里调用
beforeEnter
。 - 解析异步路由组件。
- 在被激活的组件里调用
beforeRouteEnter
。 - 调用全局的
beforeResolve
守卫。 - 导航被确认。
- 调用全局的
afterEach
钩子。 - 触发
DOM
更新。 - 调用
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