w_cyj的博客

mixin局部混入和全局混入；局部混入：顾名思义就是部分混入，也就是只有引入了mixin的混入对象才可以使用，并且只有在引入了mixin混入对象的组件中才生效；//这里注意：属性名为mixins，值为数组类型 mixins:[mixin],由此，我们可以知道mixin混入对象的变量是不会共享的；也就是你page1发生了变化，并不会通知mixin进行实时刷新数据，发生的变化只会在page1.vue中生效，不影响其他组件；全局混入：全局混入我们只需要把mixin.js引入到main.js中，

0814对象的深比较class Box { _data = { a: 1, b: 2, c: { a: 2, b: 5, d: { a: 1, b: 2, c: [1, 2, 3], }, }, };constru

简单概况jQuery的实现原理对原生函数的封装，然后链式调用。就是把函数都挂在jquer对象的prototype下，然后每个函数结尾都会return this，这样就可以一直在后边调用函数。使用Bootstrap激活或禁用按钮要如何操作？激活按钮：给按钮增加.active的class禁用按钮：给按钮增加disabled="disabled"的属性简述几种针对 jQuery 的优化方法？缓存频繁操作DOM对象尽量使用id选择器代替class选择器总是从#id选择器来继承尽量..

8.11早考简述:first :first-child,:first-of-type的区别:first 筛选出第一个元素:first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。:first-of-type 匹配的是该类型的第一个，类型是指什么呢，就是冒号前面匹配到的东西，比如 p:first-of-type，就是指所有p元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了，当然这些元素的范围都是属于同一级的，也就是同辈的。2.写出

本地存储CookieCookie 的本职工作并非本地存储，而是“维持状态”。在 Web 开发的早期，人们亟需解决的一个问题就是状态管理的问题：HTTP 协议是一个无状态协议，服务器接收客户端的请求，返回一个响应，故事到此就结束了，服务器并没有记录下关于客户端的任何信息。那么下次请求的时候，如何让服务器知道“我是我”呢？在这样的背景下，Cookie 应运而生。Cookie 说白了就是一个存储在浏览器里的一个小小的文本文件，它附着在 HTTP 请求上，在浏览器和服务器之间“飞来飞去”。它可以携带用户

vue面试题1.生命钩子函数在beforeCreate钩子函数调用的时候，是获取不到props或者data中的数据的，因为这些数据的初始化都在ininstate中然后会执行created钩子函数，到这一步的时候已经可以访问到之前不能访问到的数据，但是这时候组件还没有被挂载，所以是看不到的接下来会先执行beforeMount钩子函数，开始创建VDOM(虚拟DOM)，最后执行mounted钩子，并将VDOM渲染为真实DOM并且渲染数据，组件中如果有子组件的话，会挂载子组件，只有当所有子组件全部挂载完毕

js数组方法原生数组方法的描述数组方法参数描述函数原理简述原数组变化返回值push(需要插入的元素)添加一个或多个元素到数组的末尾改变操作后的数组长度pop无删除一个数组中的最后一个元素改变被删除的元素shift无删除数组的第一个元素，并返回这个元素改变被删除的元素unshift(需要插入的值)在数组的开头插入一个或多个元素改变数组长度reverse无前后颠倒数组中元素的位置，第一个元素会成为最后一个改变操作后数组

原理实现call()不传入第一个参数，那么上下文默认为 window改变了 this 指向，让新的对象可以执行该函数，并能接受参数Function.prototype.myCall = function(context) { if (typeof this !== 'function') { throw Error("not a function") } context = context || window context.fn = this const args

1.CSS高度塌陷，怎么解决子元素设置浮动以后，子元素会完全脱离文档流，导致父元素高度塌陷解决方案给父元素一个固定的值（只是表面好）overflow设置为hidden在高度塌陷的父元素最后，设置一个空白的div,对其进行清除浮动通过after伪类，添加一个空白的块元素，然后进行清除浮动2.继承什么是对象对象是对单个事物的抽象，对象是一个容器，封装了属性（状态）和方法（行为）原型在javascript中，函数可以有属性，每个函数都有一个特殊的属性：原型(protptype

图片优化时下应用较为广泛的 Web 图片格式有 JPEG/JPG、PNG、WebP、Base64、SVG 等，老生常谈的雪碧图（CSS Sprites）至今也仍在一线的前端应用中发光发热。二进制位数与色彩的关系在计算机中，像素用二进制数来表示。不同的图片格式中像素与二进制位数之间的对应关系是不同的。一个像素对应的二进制位数越多，它可以表示的颜色种类就越多，成像效果也就越细腻，文件体积相应也会越大。一个二进制位表示两种颜色（0|1 对应黑|白），如果一种图片格式对应的二进制位数有 n 个，那么它

输入 URL 到页面渲染的整个流程DNS（Domain Name System）域名系统DNS 的作用就是通过域名查询到具体的 IP。在 TCP 握手之前就已经进行了 DNS 查询，这个查询是操作系统自己做的。当你在浏览器中想访问 www.google.com 时，会进行一下操作操作系统会首先在本地缓存中查询 IP没有的话会去系统配置的 DNS 服务器中查询如果这时候还没得话，会直接去 DNS 根服务器查询，这一步查询会找出负责 com 这个一级域名的服务器然后去该服务器查询 googl

HTTP

路由原理 hash/history本质是监听URL的变化，然后匹配路由规则，显示相应的页面，并且无需刷新页面，目前只有两种实现方式Hash 模式History 模式Hash 模式www.test.com/#/ 就是 Hash URL，当 # 后面的哈希值发生变化时，可以通过hashchange事件监听到url的变化，从而进行页面跳转，并且无论哈希值如何变化，服务端接收道德url请求永远是www.test.com。window.addEventListener('hashchange

性能优化图片加载优化不用图片。很多时候会使用到很多修饰类图片，其实这类修饰图片完全可以用 CSS 去代替。对于移动端来说，屏幕宽度就那么点，完全没有必要去加载原图浪费带宽。一般图片都用 CDN 加载，可以计算出适配屏幕的宽度，然后去请求相应裁剪好的图片。小图使用 base64 格式将多个图标文件整合到一张图片中（雪碧图）选择正确的图片格式：对于能够显示 WebP 格式的浏览器尽量使用 WebP 格式。因为 WebP 格式具有更好的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差

XSS什么是 XSS 攻击？XSS 简单点来说，就是攻击者想尽一切办法将可以执行的代码注入到网页中XSS 可以分为多种类型，但是总体上我认为分为两类：持久型和非持久型持久型：攻击的代码被服务端写入进数据库中，这种攻击危害性很大，因为如果网站访问量很大的话，就会导致大量正常访问页面的用户都受到攻击。非持久型：一般通过修改 URL 参数的方式加入攻击代码，诱导用户访问链接从而进行攻击。如何防范 XSS 攻击？转义字符：转义输入输出的内容，对于引号、尖括号、斜杠进行转义func

浏览器渲染机制为什么操作DOM慢DOM属于渲染引擎中的东西，JS又是JS引擎中的东西，当我们通过JS操作DOM的时候，涉及到了两个线程之间的通信，会带来性能上的损耗操作DOM次数多，等同于一直进行线程之间的通信，操作DOM可能会带来重绘回流的情况，导致性能上的问题解决方法虚拟滚动(virtualized scroller)原理：只渲染可视区内容，非可视区域完全不渲染，当用户在滚动的时候就实时去替换渲染的内容什么情况阻塞渲染渲染的嵌套是生成渲染树，所以 HTML 和 CSS 肯

浏览器缓存机制数据请求步骤：网络请求后端处理浏览器响应浏览器缓存可以帮助我们在第一和第三步骤中优化性能。比如说直接使用缓存而不发起请求，或者发起了请求但后端存储的数据和前端一致，那么就没有必要再将数据回传回来，这样就减少了响应数据。浏览器缓存机制缓存位置缓存策略实际场景英语缓存策略缓存位置Service WorkerMemory CacheDisk CachePush Cache网络请求Service WorkerService Worker 是

JS面试题4var const let什么是变量提升(host)var变量提升：变量还为声明，我们就可以使用这个未声明的变量，这种情况就叫做变量提升console.log(a) // undefinedvar a = 1等同于var aconsole.log(a) // undefineda=1函数也会被提升console.log(a) // ƒ a() {}function a() {}var a = 1函数提升优于变量提升，函数提升会把整个函数

列举一下常见的关系型数据库和非关系型数据库？关系型数据库：Oracle、MySQL、DB2、SQL Server非关系型数据库：MongoDB、NoSql两者的区别有哪些？关系型数据库只支持基础类型存储；非关系型存储格式可以是key,value形式、文档形式、图片形式等，使用灵活，应用场景广泛存储载体不同：关系型数据库存储载体只能使用硬盘；非关系型数据库可以使用硬盘或者随机存储器作为载体关系型数据库支持SQL语句，可用于复杂的查询；非关系型数据库不支持SQL语句非关系型数据库基于键值对存储

return,break,continuebreak用于完全结束一个循环，跳出循环体。不管是哪种循环，一旦在循环体中遇到break，系统将完全结束循环，开始执行循环之后的代码。 break不仅可以结束其所在的循环，还可结束其外层循环。continue的功能和break有点类似，区别是continue只是中止本次循环，接着开始下一次循环。而break则是完全中止循环。return关键字并不是专门用于跳出循环的，return的功能是结束一个方法。 一旦在循环体内执行到一个return语句，retur..

apply和call方法的异同相同点:两个方法产生的作用是完全—样的，都是改变this指向，第—个参数都是对象不同点:call()方法参数将依次传递给借用的方法作参数，即fn.call(thisobj, arg1,arg2,arg3…argn)，有n个参数apply()方法第—个参数是对象，第二个参数是数组fn.apply(thisobj,arg)，此处的arg是—个数组,只有两个参数2.懒加载原理和应用概念：对于页面有很多静态资源的情况下（比如网商购物页面），为了节省用户流量.