CSS3的一些属性和用法?用过css3吗?
答:用过.主要有1.颜色,新增了RGBA的模式.
2.文字的阴影,(text-shadow) 3.边框:圆角(border-radius)边框阴影:box-shadow
4.盒子模型:box-sizing 5.背景:background-size background=origin
-
渐变: linear-gradient 7.过渡:transition 可实现动画 8. 自定义动画 animate
-
媒体查询 多栏布局 @media screen and (width: 800px) 10.border-image
11.字体图标 font-face 12.弹性布局 flex
H5的新特性?
1. 自定义属性 data-id
2. 语义化标签
3. 音频视频(audio, video),如果浏览器不支持自动播放怎么办?在属性中添加autoplay
4. 画布Canvas
5. 地理(Geolocation)API
6. 本地离线存储,localStorage,可以长期存储数据,浏览器关闭后数据不丢失
7. SessionStorage的数据在浏览器关闭后自动删除
8. 表单控件date,time,email,url,file,number
LocalStorage,sessionStorage,cookie之间的区别?
共同点:都是保存在浏览器端,而且同源的
1. 区别: cookie的数据要始终在同源的http请求中携带(即使不需要),就是cookie在浏览器和服务器之间来回传递,而localStorage和sessionStorage不会自动把数据发送给服务器,仅仅在本地保存,另外cookie数据还有路径的概念,可以限制cookie只属于某个路径下
2. 存储大小限制不同,cookie的数据不能超过4k,同时因为每次http请购都会携带cookie,所以cookie只适合保存很小的数据,如会话标识.sessionStorage和localStorage虽然也有存储大小的限制,但比cookie大的多,可以达到5M或更大
3. 最本质的区别是cookie需要在浏览器和服务器之间进行传递,所以在网站高并发的情况下不能使用cookie,用的话会大大超出网络带宽,大网站一定不能用cookie,要用localStorage,节省成本
4. 数据有效期不同,sessionStorage:是会话结束之后就自动清除了,localStorage:会话关闭也一直保存着,除非手动清除,可以用作持久数据,cookie只在设置的cookie有效期之前有效,即使浏览器会话窗口关闭
5. 作用域不同:sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面.localStorage和cookie在所有同源窗口中都是共享的
浏览器的数据存储有哪些地方?
1. Cookie,
这个存储用了很久了,而且也是以前大多数网站喜欢用的存储站点.但是很容易被清除掉.同时cookie会在每一次通信中传给服务端,同时cookie有一个很好的地方是,它本身有一个过期时间属性,可以用来标注一个变量的有效期.而cookie一旦过期就会被自动删除掉
2. localStorage,sessionStorage
localStorage:持久存储,只要用户不主动删除就会一直存在
sessionStorage:面向session的浏览器存储,因此只存在于一个页面的生命周期内,关闭就自动清除了,两者都采用键值对的形式存储数据
3. 当遇到大量的数据时,数据可以存储在数据库中
首页加载慢是怎么解决的?原因是什么?
1. 用vue-router路由懒加载
通常vue的页面在运行后继续都会有一个默认的页面,而其他页面只有在点击的时候才能加载出来,使用懒加载可以将页面中的资源划分为多份,从而减少第一次加载的时候的耗时
2. 组件懒加载,在需要的时候再加载
3. 服务器开启gzip
4. 启用CDN进行加速
使用CDN解决两个问题:
打包时间长,打包后代码体积太大,请求慢
服务器网络不稳,带宽不高,使用cdn可以回避服务器的带宽问题
5. 去掉编译文件中的map文件.在编译好后,我们会看到文件夹下有很多的.map文件,这些文件主要是帮我们线上调试代码,查看样式的.所以为了避免部署包过大,通常不生成这些文件
6. 删除原先的import
如果不删除原来的import,项目还是会从node_modules中引入资源
网站性能优化是怎么做的?
1. V-if和v-show区分场景使用,v-if是在不需要频繁切换调价单时候可以用,v-show主要是用的css3的display-none进行切换显示的,可以进行经常频繁的切换条件
2. V-for遍历避免同时使用v-if
v-for比v-if的优先级高,如果每一次都需要遍历整个数组,将会影响速度.
3. 图片资源懒加载
对于图片过多的页面,为了加速页面加载速度,所所以很多时候我们需要将页面内未出现在可视区域的图片不做加载,等到滚动到可视区域后再去加载.这样对于页面加载性能上会有很大的提升,也提高了用户体验.我们在项目中使用vue-lazyload插件
4. Key保证唯一
5. 使用路由懒加载，异步组件
6. 第三方模块按需引入
7. 压缩代码
8. 骨架屏
Vue项目对SEO的影响?
因为SPA(单页面web应用)的内容是通过Ajax获取的,而搜索引擎爬取工具并不会等待Ajax异步完成后再抓取页面的内容,所以在SPA中是抓取不到页面通过Ajax获取到的内容的. 可以用SSR直接由服务器端返回已经渲染好的页面进行抓取数据
介绍一下闭包?
1. 闭包就是能够读取其他函数内部变量的函数,例如在JavaScript中,只有函数内部的子函数才能读取局部变量,所以闭包可以理解成”定义在一个函数内部的函数”.本质上,闭包是将函数内部和函数外部连接起来的桥梁.
2. 创建闭包的常见方式,就是在一个函数内部再写一个函数
3. 闭包的优点是可以避免变量的污染,缺点是闭包会常驻内存,会增大内存的使用量,使用不当会很容易造成内存泄露
4. 闭包有三个特性: 函数嵌套函数, 函数内部可以引用外部的参数和变量,参数和变量不会被垃圾回收机制回收
5. 应用场景,设置私有变量的方法
6. 不适用场景:返回闭包的函数是个非常大的函数
介绍一下原型链?
1. JavaScript原型是:每个对象都会在其内部初始化一个属性,就是prototype(原型)
2. 原型链: 当我们访问一个对象的属性时,如果这个对象内部不存在这个属性,那么它就会去prototype里找这个属性,这个prototype又会有自己的prototype,于是就这样一直找下去,也就是我们平常说的原型链的概念
微任务和宏任务?
宏任务是由宿主发起的,微任务是由JavaScript自身发起的,
在任务队列中,先执行微任务后执行宏任务
1. 宏任务在新标准中叫task
主要包括:setTimeout,setInterval,setmmediate,I/O
2. 微任务在新标准中叫jobs
主要有:process.nextTick,Promise这些
跨域是什么?怎么解决?
1. 浏览器从一个域名的网页去请求另一个域名的资源时,域名,端口,协议任一不同,都是跨域
2. 解决办法:
1. Jsonp跨域 原理: 动态创建一个script标签,利用script属性不受同源策略限制.src属性和href属性都不受同源策略的限制,可以请求第三方服务器数据内容
2. CORS:跨域资源共享
原理是后端服务器设置Access_control-Allow-OriginHttp响应头之后,浏览器会允许跨域请求
限制:浏览器需要支持html5,可以支持POST,put等方法,兼容ie9以上
3. Ngnix反向代理
本质上是进行一个中转,启动ngnix
Vue组件是如何进行传值的?
1. 父组件向子组件传递数据
父组件内设置要传的数据,在父组件中引用的子组件上绑定一个自定义属性并把数据绑定在自定义属性上,在子组件添加参数props接收即可
2. 子组件向父组件传递数据
子组件通过vue实例方法,$emit进行触发并且可以携带参数,父组件监听使用@(v-on)进行监听,然后进行方法的处理
3. 非父子组件传值
1. 引入第三方new vue 定义为eventBus
2. 在组件中created中订阅方法eventBus.$on(“自定义事件名”, )methods中的方法名’
3. 在另外一个兄弟组件中的methods中写函数,在函数中发布eventBus订阅的方法,eventBus.$emit(自定义事件名)
4. 在组件的template中绑定事件(比如click)
生命周期钩子?
Vue实例从创建到销毁的过程就是生命周期,也就是从开始创建,初始化数据,编译模板,挂载DOM-渲染,更新-渲染,卸载等一系列过程,这就叫做生命周期
1. beforeCreate
在实例初始化之后,数据观测和event/瓦特很事件配置之前被调用
2. created
在实例创建完成后被立即调用
3. beforeMount
在挂载开始之前调用,相关的render函数首次被调用
4. mounted
el被新创建的vm$el替换,并挂载到实例上去之后调用该钩子
5. beforeUpdate
数据更新调用,发生在虚拟DOM打补丁之前
6. updated
由于数据更改导致的虚拟DOM重新渲染和打补丁,在这之后会调用该钩子
7. activated
Keep-alive组件激活时调用,该钩子在服务器端渲染期间不被调用
8. deactivated
keep-alive组件停用时调用,该钩子在服务器端渲染期间不被调用
9. beforeDestory
实例销毁之前调用,在这一步,实例仍然完全可用
10.destroyed
vue实例销毁后调用,调用后,vue实例指示的所有东西都会被解绑定,监听器被移除,子实例也被销毁
Vue组件封装的过程?
首先,使用组件可以提升整个项目的开发效率,能够把页面抽象成多个相对独立的模块,解决了我们传统项目开发效率低,难维护,复用性的问题
1. 分析需求,确定业务需求,把页面中可以抽取的结构,样式以及功能,单独抽离成一个文件,实现复用
2. 具体步骤:使用vue.extend方式创建一个组件,然后使用vue.component方法注册组件,子组件需要数据,可以在props中接受定义,而子组件修改好数据后,想把数据传递给父组件,可以采用$emit方法
v-model的原理,双向绑定的原理?
Vue.js是采用数据劫持结合发布者订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动的时候发布消息给订阅者,出发相应的监听回调
遇到了什么问题并解决了:
-
碰到了一个需要获取组件的需求
-
组件是通过布尔值控制显示的
-
修改为显示之后立刻去获取发现拿不到
-
最开始我用定时器延迟了一会,发现有个更好的做法
-
$nextTick
1. 数据更改,且页面更新完毕之后触发
- 完美的解决了问题
做一个导出机器人和客户对话的excel表格，封装api请求
下载录音，对录音进行处理和播放
路由有几种模式?有什么区别?
1. 两种模式,hash模式和history模式,hash模式带有#,不好看,但是打包过后的index.html文件可以直接运行
2. History模式不带#URL,地址看起来比较好看,不过无法直接打开打包过后的index.html文件
数组去重的几个方法?
1. ES6中的set去重
2. 利用for循环嵌套for循环,然后用splice去重
3. 利用indexOf去重
4. 利用sort()
5. 利用map数据结构去重
Splice和join的区别?
Splice() 方法是向数组中添加/删除项目,然后返回被删除的项目
该方法会改变原始数组
Join() 方法用于把数组中的所有元素放入一个字符串中
元素是通过指定的分隔符进行分割的
深拷贝和浅拷贝的区别
1. 浅拷贝：拷贝原始对象的第一层属性，当属性是基本类型时，拷贝属性的值，当属性是引用类型，拷贝属性的内存地址，因此新旧对象修改属性互相影响。
2. 深拷贝：拷贝原始对象的所有属性，并拷贝属性指向的动态分配的内存，深拷贝新旧对象不共享内存，修改新对象不会改到原对象。
