关于前端 关于你

嗯.....这篇文章里面的内容 只有关于前端,没有关于你


1.图片展示,一个简单到死的问题,要么用src 要么用background-image, 如果你选用背景图的话,恭喜你,一定要注意自己的图片命名,带有括号的名字是不识别的

2.依旧是图片,依旧是背景图,关于vue ,在app.vue定义了一个公共的变量存储了一张图,嗯,确切的说是一张base64的一像素透明图片,在页面使用:src="$parent.imgBase64"做展示的时候,诡异的事情发生了,在部分手机上居然不展示这张图片,嗯,当时为了尽快解决用了一张本地的图片,所以现在还没有验证是$parent不能用,还是imgBase64不能用

3.前端性能优化

    经常用到的是,

    减少http请求 

    图片用雪碧图 

    减少dom操作 可用事件委托 

    图片懒加载

    使用get请求(我刚知道get请求速度快,因为get请求存在缓存机制,而且get请求只发送请求头,速度快,我是个白痴)

    使用多线程和异步

4.get请求和post请求区别

①post数据量大,get请求速度快

②两者的请求方式不同,get请求参数拼接在路径后面,post请求放在请求体中,在这之前设置请求头

③get请求存在缓存问题,可以拼接时间戳来解决数据得不到更新的问题

5.重申 解决get请求缓存机制

    拼时间戳(时间戳很好用,可以解决多数缓存问题)

6.同源策略的概念

    同端口 同域名 同协议

7.cookie和webstorge的区别

①存储量的区别,cookie存储量小,只有4kB左右,webstorage有5M左右

②cookie在没有设置path的前提下只能在当前文件夹和子文件夹下才能访问,webstorage只要在本地服务器就可以访问到。

③cookie存在有效期,当没有设置有效期时,窗口关闭,存储的信息就不存在了,这一点和sessionstorage一样。localstorage是持久化保存,除非手动删除。

④cookie会在浏览器和服务端之间往返,localstorage只能在客户端。

8.websocket的理解

websocket是即时通信,遵循TCP协议,客户端和服务端全双工通信,之前服务端是不能主动向客户端发送数据的,需要客户端轮询,多次向服务端发送请求,服务端有数据才会返回,而websocket允许服务端主动向客户端发送数据,客户端用message来接收数据。

9.移动端开发常见问题

①移动端屏幕适配

②固定定位会和键盘冲突

③点击300ms延迟问题,解决办法使用zeptode tap或者fastclick

④点透问题

⑤点击a标签会有灰块,解决办法-webkit-tap-highlight-color:rgba(0,0,0,0);

⑥要以真机测试的为准

10.什么是闭包

闭包能够访问函数内部的变量,还可以使变量一直保存在内存中,不被销毁。但是滥用闭包,会造成内存泄漏。

11.promise的理解

promise是一种解决回调函数异步编程的方案,它的出现是为了解决回调地狱的问题,它实际上就是提供一个容器,它将处理的结果resolve出去,然后用它的实例对象的then方法执行下面的操作,支持链式语法。

12.对token机制的理解

https://blog.csdn.net/daimengs/article/details/81088172

token的意思是“令牌”,是服务端生成的一串字符串,作为客户端进行请求的一个标识。

客户端使用用户名和密码进行登录,服务端收到请求,会进行验证,验证成功后会在服务端生成一个token,服务端会把这个token发送给客户端,客户端收到token后会把这个token保存起来,可以存在cookie中,也可以存在本地存储中,客户端每次向服务端发送请求的时候,都会携带者这个token,服务端收到请求,就会去验证这个token,如果验证成功,就向客户端发送请求的数据。

13.如何解决vue跨域问题

在config里的index.js文件中设置代理

14.vuex

15.说说vue的组件通信

父传子用props,子传父用自定义事件,当侧重于赋值的时候,可以使用vue提供的语法糖,v-model或者是.sync修饰符。

16.vue组件和实例的区别?

①组件中的data是一个函数返回一个对象,而实例中的data是一个对象

②组件中没有el这个挂载点

除了这两点,实例和组件基本上一样的

17.在vue中如何操作dom节点?

在要操作的标签上写ref="box"某个变量名,在要用的地方this.$refs.box

18.vue组件中,插槽的使用场景?

①一个组件中有完整的功能,但是想要修改内容的时候

②只是一个提供容器的组件,放什么由使用者决定的时候

19.为什么要使用组件?

因为高内聚,低耦合,提高开发效率

20.vue中的v-for种key的作用?

作为唯一标识,因为vue在渲染列表时,会就地复用dom元素,导致之前操作的dom元素依然存在,给他加个key作为唯一标识,就可以删掉此dom元素。不然删掉的之后内容,壳子还在。

21.vue双向绑定的原理?

双向绑定一般用在获取表单元素时,绑定表单元素的value值,监听它的input事件,将输入框的值赋值给在data 里面设置的属性

21.自定义指令的底层是什么?

自定义指令的底层是dom操作

23.自定义指令有哪些钩子函数?

①当元素插入页面时调用 inserted  已经插入父节点

binding  还未插入父节点

一般使用inserted

②整个事例中,数据更新时  update:发生在子节点更新之前

componentUpdated:全部更新后调用

③unbind:解绑 减少内存,移除节点,清空事件

这些钩子函数,第一个参数是el,标识绑定的元素,第二个参数是binding,binding.value指的是你绑定的那个属性的值,第三个参数是vnode,vnode.context指元素所在的vue实例

24.谈谈你对vue 的生命周期的理解?

每个实例对象在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期,一共有8个过程,beforeCreate()创建之前,created()创建,在这里才能访问到data里的数据,created()和beforeMount()之间会判断是否有挂在节点el,若没有,停止编译,若有,判断有无template,如果有,就只渲染template中的模板,否则渲染外部的模板,之后是mounted(),在这个阶段页面已经渲染,真实的数据已经插入,通常会在这个阶段进行dom操作,当数据发生变化的时候,会有数据的更新,beforeUpdate()和updated(),之后是beforeDestroy和destroyed(),销毁是要将生成实例对象的所绑定的东西全部清空。

25.watch和computed的区别?

①watch监听的属性需要在data里定义,computed不需要

②watch监听的属性,需要在created中初始化,computed不需要

③watch 里的方法不需要return ,computed需要

26.面向对象继承的5种办法?

①用call或者apply方法改变父构造函数的this指向,但是这种办法只能拿到父构造函数的私有属性。

②将父构造函数的实例对象赋值给子构造函数的prototype属性,但是这种办法将父构造函数的私有和公有的属性都给了子构造函数的prototype属性

③只将父构造函数的prototype属性赋值给子构造函数的prototype属性,这样拿到公有的,用第一种办法改变this指向拿到私有的,但是对象是引用类型,改变子的,父的也会跟着变,这样是不好的。

④利用空方法作为中介,将父构造函数的prototype属性赋值给空方法的prototype属性,将空方法的实例对象赋值给子构造函数的prototype属性,这样就拿到了公有的,而且没有引用关系,之后再通过改变this指向来拿私有的属性,就可以了,这也是实际开发中推荐的用法。因为空方法几乎不占内存。修改子构造函数的prototype属性并不会影响到父构造函数的prototype属性

⑤还有一种就是深拷贝啦,通过循环遍历,一个一个赋值,但是复杂情况下并不适用

27.什么是express?

基于nodejs的web开发框架

28.合并对象有哪些方法?

①es6语法中的扩展运算符...

②es6语法中的Object.assign({},obj1,obj2)

③$.extend({},obj1,obj2)

②和③用法类似,第一个位置是合并后的对象

29.深拷贝有哪几种方法?

①递归

②json转换

③$.extend(true,{},obj) 返回的是拷贝或合并后的结果

30.let const var 的区别?

let和const存在块级作用域,不能变量提升,也不允许重复声明,而var和他们相反

const是声明一个常量,一旦赋值,不可更改

31.箭头函数需要注意什么?

①this指向问题

this指向函数定义的作用域

②没有arguments

③不能作为构造函数

32.判断数据类型的方法有哪些?

Object.prototype.toString.call()最全

typeof 不能判断null ,object,arr

constructor 不能判断null undefined

33.如何理解MVVM模式和MVC模式?

MVC是经典的开发模式,model数据库,提供数据,view,视图,controller业务逻辑,路由分配,这种开发模式controller负责的太多,难以维护,m层和v层直接打交道,高耦合,所以为了解决这些问题,出现了MVVM模式,目前开发中用的模式,model后端提供数据,view视图,vm框架核心,model后端负责,view和VM前端负责,前后端分离,实现高内聚,低耦合,前后端同时开工,没有先后顺序,提高开发效率。

34.如何判断this的指向?

总体来说是谁调用指向谁,在构造函数内部,指向实例对象

在对象方法的内部,this指向当前对象

在事件处理函数内部,this指向当前dom事件

35.面向对象编程有几种模式?

①工厂模式  返回一个对象,这个对象和函数无关

②构造函数模式  this指向它的实例对象

③原型对象模式  将私有的属性放在构造函数内部,公共的属性和方法放在他的原型对象上

实际开发中是构造函数模式+原型对象模式

36.svg和canvas的异同?

svg和canvas都是用代码画图,但是svg用标签,canvas是要操作js,svg画的图是矢量图,无限放大不会失真,canvas画的图是位图,放大之后都是马赛克。

37.引用类型有哪些?值类型有哪些?

引用类型有:对象 数组 函数

值类型:数值,字符串,布尔,undefined ,null

38.布尔值为假的值有哪些?

0,false,"",undefined,null,NaN

39.用 isNaN() 来判断一个值是否是数字。原因是 NaN 与所有值都不相等,包括它自己。

40.在什么情况下会出现NaN值?

①在表达式计算时

②Number,ParseInt,ParseFloat类型转换时

41.link引入css和@import引入css的区别?

①两者导入的语法不同  一个是link标签,href中写样式路径,一个是在css文件引入或者在style标签中引入@import url("sx.css")

②语法结构不同  link 是标签,只能放在html中,后者看做css样式

③加载顺序  link方式引入的,css文件和html文件一起加载,使用import方式,会先加载html文档,最后加载css文件

④DOM的可操控性  @import  DOM不可操控

⑤兼容性 @import低版本浏览器不支持

42.IE盒子模型和标准的css模型的区别?

标准盒子模型的宽:指内容的宽

IE盒子模型的宽:内容宽+填充宽+边框宽

43.面向对象编程的理解?

面向对象以对象为个体,不再操作底层,每个个体有多种行为,每个行为都是一个方法。

面向对象编程的优势:更灵活,拓展性更强,维护成本低。

44.微信小程序如何减小体积?

①减少代码量,提取公共代码,复用

②将图片资源放到服务器上,提供网络路径

45.为什么要使用分包?

因为微信小程序限制大小不能超过8M,主包大小不能超过2M,使用分包可以扩容

46.wxs是什么?

wxs是为了解决在模板中不能执行方法,对数据不能处理的问题,这是小程序的缺陷

47.微信小程序的转发怎么实现?

①在app.json里的window中开启,然后在生命周期函数onshareAppMessage中return 一个对象,设置你想要展示的标题,图片什么的

②button按钮中设置属性open-type="share"

48.vue和微信小程序的数据响应有啥区别?

vue直接是this.data,微信小程序是this.setData({给data里的属性赋值})

49.cookie和session的区别?

①存储位置,cookie存在客户端,session存在服务端

②cookie存储的是字符串,session存储的是对象

③session比cookie更安全

④session依赖于cookie

⑤session不区分路径,cookie在不设置path的前提下只能访问当前文件夹和子文件夹。

50.为什么使用异步组件?

因为初次加载页面,并不需要所有的组件,如果全部请求,会导致页面加载速度缓慢,所以使用异步组件,需要什么,加载什么。

51.什么是jsx?

jsx是html和js的混合写法,遇到 < 解析html标签,遇到{}解析js语法。

52.keep-alive是什么?

keep-alive是vue的内置组件,能在组件切换过程中将状态保留在内存中。

53.在watch监听时,有时数据嵌套太深,监听不到他的变化,怎么办?

handler:function(){  这里面写你要监听的属性的相关函数},deep:true

54.如何优化vue的首屏渲染速度?

①使用ui组件时,尽量按需加载,不要全部都引入;

②使用异步加载

55.vue如何全局拦截?

导航守卫 router.beforeEach

56.如何进行兄弟组件通信?

①可以借助父组件

②vuex

③利用bus传值

里面有好多是从别的文章复制的,给自己做个笔记,为了支持原作者,特附链接 https://www.jianshu.com/p/95111cdbe645

你可能感兴趣的:(关于前端 关于你)