![[衰]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_34.cf5b4d5.png)
heronCCC
获得徽章 7
#每天一个知识点# Hash模式
基于浏览器的hashchange事件，当url发生变化时，通过 window.location.hash 获取地址上的hash值，并通过Router类，配置routes对象设置与hash值对应的组件内容
优点：
hash值会出现在url中，但是不会被包含在http请求中，因此hash值改变不会重新加载页面
hash改变会触发hashchange事件，能控制浏览器的前进后退
兼容性好
缺点：
地址中携带#，不美观
只可修改#后面的部分，因此只能设置与当前URL同文档的URL
hash有体积限制，故只可以添加短字符串
设置的新值必须与原来不同才会触发hashchange事件，并将记录添加到栈中
每次URL的改变不属于一次http请求，所以不利于seo优化
基于浏览器的hashchange事件，当url发生变化时，通过 window.location.hash 获取地址上的hash值，并通过Router类，配置routes对象设置与hash值对应的组件内容
优点：
hash值会出现在url中，但是不会被包含在http请求中，因此hash值改变不会重新加载页面
hash改变会触发hashchange事件，能控制浏览器的前进后退
兼容性好
缺点：
地址中携带#，不美观
只可修改#后面的部分，因此只能设置与当前URL同文档的URL
hash有体积限制，故只可以添加短字符串
设置的新值必须与原来不同才会触发hashchange事件，并将记录添加到栈中
每次URL的改变不属于一次http请求，所以不利于seo优化
展开
评论
点赞
#每天一个知识点# 路由hash模式和history模式的区别
hash 模式是一种把前端路由的路径用 # 拼接在真实 url 后面的模式。当 # 后面的路径发生变化时，浏览器并不会重新发起请求，而是会触发 onhashchange 事件。
hash模式的特点：
hash变化会触发网页跳转，即浏览器的前进和后退
hash 可以改变 url ，但是不会触发页面重新加载（hash的改变是记录在 window.history 中），即不会刷新页面。也就是说，所有页面的跳转都是在客户端进行操作。因此，这并不算是一次 http 请求，所以这种模式不利于 SEO 优化。hash 只能修改 # 后面的部分，所以只能跳转到与当前 url 同文档的 url
hash 通过触发 hashchange 事件，来监听 hash 的改变，借此实现无刷新跳转的功能
hash 永远不会提交到 server 端（可以理解为只在前端自生自灭）
hash 模式是一种把前端路由的路径用 # 拼接在真实 url 后面的模式。当 # 后面的路径发生变化时，浏览器并不会重新发起请求，而是会触发 onhashchange 事件。
hash模式的特点：
hash变化会触发网页跳转，即浏览器的前进和后退
hash 可以改变 url ，但是不会触发页面重新加载（hash的改变是记录在 window.history 中），即不会刷新页面。也就是说，所有页面的跳转都是在客户端进行操作。因此，这并不算是一次 http 请求，所以这种模式不利于 SEO 优化。hash 只能修改 # 后面的部分，所以只能跳转到与当前 url 同文档的 url
hash 通过触发 hashchange 事件，来监听 hash 的改变，借此实现无刷新跳转的功能
hash 永远不会提交到 server 端（可以理解为只在前端自生自灭）
展开
1
点赞
#每天一个知识点#
执行上下文
执行上下文是评估和执行 JavaScript 代码的环境的抽象概念。每当 Javascript 代码在运行的时候，它都是在执行上下文中运行
执行上下文有三种类型:
全局执行上下文：任何不在函数内部的都是全局执行上下文，它首先会创建一个全局的window对象，并且设置this的值等于这个全局对象，一个程序中只有一个全局执行上下文
函数执行上下文： 每当一个函数被调用时, 都会为该函数创建一个新的上下文。每个函数都有它自己的执行上下文，不过是在函数被调用时创建的。函数上下文可以有任意多个。每当一个新的执行上下文被创建，它会按定义的顺序（将在后文讨论）执行一系列步骤
eval函数执行上下文：执行在 eval 函数内部的代码也会有它属于自己的执行上下文
执行上下文
执行上下文是评估和执行 JavaScript 代码的环境的抽象概念。每当 Javascript 代码在运行的时候，它都是在执行上下文中运行
执行上下文有三种类型:
全局执行上下文：任何不在函数内部的都是全局执行上下文，它首先会创建一个全局的window对象，并且设置this的值等于这个全局对象，一个程序中只有一个全局执行上下文
函数执行上下文： 每当一个函数被调用时, 都会为该函数创建一个新的上下文。每个函数都有它自己的执行上下文，不过是在函数被调用时创建的。函数上下文可以有任意多个。每当一个新的执行上下文被创建，它会按定义的顺序（将在后文讨论）执行一系列步骤
eval函数执行上下文：执行在 eval 函数内部的代码也会有它属于自己的执行上下文
展开
评论
点赞
#每天一个知识点#
Undefined与Null
Undefined 和 Null 都是基本数据类型，这两个基本数据类型分别都只有一个值，就是 undefined 和 null
undefined 代表的含义是未定义，null 代表的含义是空对象。一般变量声明了但还没有定义的时候会返回 undefined，null主要用于赋值给一些可能会返回对象的变量，作为初始化
undefined 在 JavaScript 中不是一个保留字，这意味着可以使用 undefined 来作为一个变量名，但是这样的做法是非常危险的，它会影响对 undefined 值的判断。我们可以通过一些方法获得安全的 undefined 值，比如说 void 0
typeof null 的返回值为object，且undefined == null返回true
Undefined与Null
Undefined 和 Null 都是基本数据类型，这两个基本数据类型分别都只有一个值，就是 undefined 和 null
undefined 代表的含义是未定义，null 代表的含义是空对象。一般变量声明了但还没有定义的时候会返回 undefined，null主要用于赋值给一些可能会返回对象的变量，作为初始化
undefined 在 JavaScript 中不是一个保留字，这意味着可以使用 undefined 来作为一个变量名，但是这样的做法是非常危险的，它会影响对 undefined 值的判断。我们可以通过一些方法获得安全的 undefined 值，比如说 void 0
typeof null 的返回值为object，且undefined == null返回true
展开
评论
点赞
#每天一个知识点# 微任务和宏任务的区别
1.宏任务：当前调用栈中执行的代码成为宏任务。（主代码快，定时器等等）。
2.微任务： 当前（此次事件循环中）宏任务执行完，在下一个宏任务开始之前需要执行的任务,可以理解为回调事件。（promise.then，proness.nextTick等等）。
3. 宏任务中的事件放在callback queue中，由事件触发线程维护；微任务的事件放在微任务队列中，由js引擎线程维护。
微任务：process.nextTick、MutationObserver、Promise.then catch finally
宏任务：I/O、setTimeout、setInterval、setImmediate、requestAnimationFrame
1.宏任务：当前调用栈中执行的代码成为宏任务。（主代码快，定时器等等）。
2.微任务： 当前（此次事件循环中）宏任务执行完，在下一个宏任务开始之前需要执行的任务,可以理解为回调事件。（promise.then，proness.nextTick等等）。
3. 宏任务中的事件放在callback queue中，由事件触发线程维护；微任务的事件放在微任务队列中，由js引擎线程维护。
微任务：process.nextTick、MutationObserver、Promise.then catch finally
宏任务：I/O、setTimeout、setInterval、setImmediate、requestAnimationFrame
展开
评论
点赞
#每天一个知识点# 盒模型
盒模型由四个部分组成，分别是margin、border、padding、content
标准盒模型和IE盒模型的区别在于：在设置width和height时，所对应的范围不同
标准盒模型的width和height属性的范围只包含了content
IE盒模型的width和height属性的范围包含了border、padding和content
可以通过修改元素的box-sizing属性来改变元素的盒模型：
box-sizing: content-box 表示标准盒模型（默认值）
box-sizing: border-box 表示IE盒模型（怪异盒模型）
盒模型由四个部分组成，分别是margin、border、padding、content
标准盒模型和IE盒模型的区别在于：在设置width和height时，所对应的范围不同
标准盒模型的width和height属性的范围只包含了content
IE盒模型的width和height属性的范围包含了border、padding和content
可以通过修改元素的box-sizing属性来改变元素的盒模型：
box-sizing: content-box 表示标准盒模型（默认值）
box-sizing: border-box 表示IE盒模型（怪异盒模型）
展开
评论
点赞
#每天一个知识点# 单页面应用有什么 SEO 方案？
服务器端渲染首屏（SSR 基于 vue 的服务端下载）；让服务端把首屏的数据渲染在页面上；进行基本的 css 模板 js 的编译合并；减少请求次数，使用 gulp 工具，把 css 打包成一个文件, js 打包成一个文件, 模板打包成一个 js 文件($templateCache) 可以和 js 文件打包成一起（促使模板 JS 文件和 JS 文件一次性请求）；代码分块，如果首屏不需要的块，就不用加载了；路由组件懒加载。当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样更加高效；如果有大量图片使用懒加载。
服务器端渲染首屏（SSR 基于 vue 的服务端下载）；让服务端把首屏的数据渲染在页面上；进行基本的 css 模板 js 的编译合并；减少请求次数，使用 gulp 工具，把 css 打包成一个文件, js 打包成一个文件, 模板打包成一个 js 文件($templateCache) 可以和 js 文件打包成一起（促使模板 JS 文件和 JS 文件一次性请求）；代码分块，如果首屏不需要的块，就不用加载了；路由组件懒加载。当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样更加高效；如果有大量图片使用懒加载。
展开
评论
2
