'
0、 简述下jsonp的原理?与ajax的区别?
答:jsonp的核心是动态添加script标签调用服务器提供的js脚本(后缀.json)
ajax的核心
是通过xmlHttpRequest获取非本页内容
1、 三条优化代码的方法?
答:模块化、封装函数、使用公用的常量当做全局变量、尽量优化if else、减少for循环、减少变量提升的代码
125、 怎么实现两栏布局?
答:浮动 弹性盒
1、 什么是ajax?
答:实现数据交互的网页开发技术,实现页面局部刷新的异步请求方式。创建一个请求头,发送请求,监听请求,返回数据......
2、 什么是跨域?
答:由于受到浏览器同源策略限制,只要端口、域名(主机)、协议任一不同,就叫跨域
3、 解决跨域?
答:前端:jsonp,proxy;后端:cros
4、 什么是反向代理?
答:proxy => 设置代理对象,当前端请求数据的时候,会直接用前端的服务器地址,发送给后端的时候,会将地址代理成后端地址
5、 什么是虚拟dom?
答:vue渲染dom之前,会将所有组件、标签读取成数据,以dom树的格式存储在内存中.虚拟dom是抽象的,暂时的,它会瞬间渲染成真实dom
6、 vue slot 具体用法
答:组件动态分发的html模板,接受父组件分发。
7、 什么是闭包?
答:特点:函数套函数,外面的函数必须返回里面的函数,全局中要被引用,当做变量存储。
优点:模块化思想,避免全局污染,避免命名冲突。
缺点: 使用不当容易造成内存泄漏,不会被垃圾回收
8、 Promise的三种状态?
答: 特点:相当于一个容器,里面放着未来才会发生的事情,解决了异步编程问题。
pending(进行中),resolve,reject
9、 Es6新特性?
答:箭头函数、解构赋值、class类、promise、set、map、let、const
10、 http和https区别?
答:https多了一种加密的协议,表示安全性较高的加密协议。
11、 什么叫域名劫持?
效果:就是对特定的网址不能访问或访问的是假网址。
答:域名劫持就是在劫持的网络范围内拦截域名解析的请求,分析请求的域名,直接返回假的IP地址或者什么也不做使得请求失去响应,
12、 request里面简单请求和非简单请求?
答:非简单请求会提前发送预检请求,服务端同意预检请求,客户端会发送真正的请求;服务端不同意预检请求,因此触发一个错误(跨域),返回到客户端
13、 vue 属性 methods computed watch 这三个属性的区别?
答:1.主动调用的方法写在methods里,依据某些变量的更新进行某种操作用
2.如果要异步,只能用watch。适合处理一个数据影响多个数据的场景
3,如果是计算某个值推荐用computed,比如购物车全选单选功能,购物车计算总价小计功能。
情景:一个数据被多个数据影响
14、vue第一次页面加载会触发哪几个钩子?
答:beforeCreate, created, beforeMount, mounted
15、 vue 生命周期函数?
答:开始创建、初始化数据、编译模版,挂载dom。 渲染。更新。 渲染。卸载
16、
答:name能传params和queriy参数,path不能传params参数
17、 路由守卫有哪些?
答:全局路由守卫
路由独享守卫:
路由组件守卫:
18、 link和import的区别?
答:差别1:link属于XHTML标签,而@import是css提供的一种方式。
差别2:link引入的样式权重大于@import引入的样式
差别3:加载顺序的差别:当一个页面被加载的时候,link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再加载。
19、 vue 十个指令
答:v-on, v-bind, v-for, v-show, v-if, v-else, v-html, v-text, v-model,v-once, v-cloak
20、 vue 两个常用的 nextTick区别
答:this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行,在修改数据之后立即使用它,然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上。
this.forceUpdate后只会触发beforeUpdate和updated这两个钩子函数,不会触发其他的钩子函数。它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件。
22、 Vue数据双向绑定原理
答:object.property()方法实现数据劫持,会给属性绑定setter和getter,
23、 箭头函数特点
答:a、保留this指向,箭头函数本身没有this,会借用函数外部
b、箭头函数不能new,call
24、 什么是变异数组方法、非变异数组方法?什么是可变对象、不可变对象?
答:变异数组方法,例如push、pop等,会改变原数组,从而更新视图;非变异数组方法,例如filter,map等,不会改变原数组,会返回一个新的数组
可变对象:引用数据类型。 (){}[] 只执行浅拷贝
不可变对象:基本数据类型
25、 vuex作用?
答:实现组件的数据共享,以及组件内部状态的集中式管理,实现共享数据的缓存
26、 DOM0和DOM2事件区别?
答:DOM0 onclick 直接绑定在标签上 不能写多个,写多个后面会覆盖前面DOM2
27vue父组件访问子组件的方式有哪些?
答:props、ref、新建一个空的vue实例对象、vuex
28、 vue子组件访问父组件的方法?
答:自定义事件、反向props、$.parent、bus、vuex
29、 vue兄弟通信
答:bus、vuex、中间人模式
30、 vue全家桶组成部分?
答:vue+vuex(状态管理)+vue-router(路由)+vue-resource+axios +UI框架(iview、vant、elementUI等等)
31、 vuex里面的四个辅助函数
答:mapState、mapActions、mapMutations、mapGetters
32、 严格模式有什么特点?
答:this为undefined,不会指向window;
严格模式下写函数,参数名不能重复;
33、 v-if和v-show的区别?
答:v-if是条件渲染,条件为假的时候不会渲染,频繁变换的时候建议使用v-show;v-if可以用来做异步判断
v-show 不管条件真假都会渲染
34、 在vue中如何自定义过滤器?自定义过滤器的目的是什么?
答:方法:全局定义 Vue.filter 局部定义:在组件内写filters
目的:筛选数据、格式化数据
35、 如何自定义指令?自定义指令的目的?
答:目的:实现底层DOM操作
36、 vue组件如何嵌套自己?
答:通过组件name属性调用自己,实现递归
37、 怎么使用git指令上传代码到仓库?
答:有远程主机,但是是空仓库,先在码云上创建一个新仓库,git add ./ ....
有远程主机和仓库,先clone仓库,再拉取数据,上传数据
38、 data 和 vm.$data
39、 localStorage&sessionStorage 的区别?
答:localStorage 是永久储存
sessionStorage 是临时会话
40、 什么是vue的深度监听?
答:deep:true handler属性,会过多消耗电脑性能
41、 Vue.delete Vue.set
答:Vue.set(数组对象,key,value)
Vue.delete(key,target)
42、 vue的两种路由传参的方式。
答:在 vue-router 的路由路径中使用“动态路径参数”传参,以冒号开头
通过路由URL中添加query参数的方式,就和普通的http URL的get传参方式一样,通过在链接地址后面添加?
43、 如何用v-model实现父子组件之间的通信?
答:1.展示:父组件v-model,子组件接收一个props值value,将它展示到子组件自己的input上。
2.改变:当子组件自身发生改变时,触发自身的input方法,然后触发父组件的事件方法,改变父组件的value,进而改变接收的props,实现自身展示的改变
44、 异步转同步的方式有哪些?
答:setTimeout,,异步回调,async await
46、 react创建组件的三个方法
答:class类组件,纯函数
47、 浏览器兼容的bug?
答:js兼容:doucment.clientWidth
css兼容:
图片兼容:
48、 实现性能优化的方案有哪些?
答:图片压缩 精灵图
css压缩
本地缓存,减少http请求
cdn缓存
使用图片懒加载
优化代码,减少数组循环操作
以组件化的思想来渲染虚拟DOM
49、 移除组件的时候,怎么实现移除bus的监听事件?
答:removeListener
51、 Vue.extend
答:基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。
53、 数组去重的方法?
答:indexOf Set 双重for循环(splice,值相同,删除这个值)
54、 react 组件通信
答:父传子:props、refs
子传父:反向props 中间人模式
兄弟通信:event
55、 什么是实例对象?什么是静态对象?
答:构造函数对象可以直接.出来的是静态对象,需要new出来的是实例对象
61、 jsx的语法特点?
答:遇到HTML代码以<% %>开头,遇到代码块以{}开头
62、 react 里面props,state,context三者的区别?
答:props:传递数据,只可读不可写,一般用来父传子
state:修改数据,更新视图
context:实现隔空传递数据
63、 vue配置路由的步骤?
答:引入vuerouter,创建routes,创建路由对象。配置理由选项,挂载路由实例,路由出口,声明式跳转or编程式跳转
64、 怎样清除闭包?
答:将闭包函数赋值为null
65、 将数组的值随机打乱(反排序)?
答:for循环,
66、 什么是受控组件?什么是非受控组件?
答:一个input框,value绑定了state,就是受控组件;value没有绑定,就是非受控组件
67、 说一下对react里面自定义函数的this的理解?
答:react 自定义函数的this为空,使用箭头函数来保留this指向,让this指向组件定义时候的this。
68、 一个构造函数内super,当对象用有什么意义,当函数用有什么意义?
答:super当函数时,指向父类的构造器;当对象时,指向父类的原型prototype
69、 blind、apply、call 三者的区别?
答:都可以改变this指向,call,apply(参数是数组)可以带参数
70、 操作数组的方法?
答:pop,push,shift,unshift,every,some,reduce,map,contact,forEach,filter
71、 清除浮动的方法?
答:overflow:hidden;父级高不为0;万能清除法;clesr
72、 什么是事件委托?
答:需要给未来元素或者同级元素绑定事件,利用冒泡的原理给父级元素绑定事件委托
73、 什么是BFC?
答:一种独立的页面的渲染规则,盒子由上自下排列,块级格式化上下文。
74、 如何判断浏览器的类型和提供商?
navtigar。
75、 什么是盒模型?
答:两种,标准盒模型:border,margin,padding,content
怪异盒模型:给元素添加padding和border之后,对应的值不会加在元素原有的宽高之上
76、 react生命周期?
答:react生命周期的三阶段:(1)实例化;(2)存在期;(3)销毁&清理期
共有11个生命周期函数
getInitialState: 初始化组件的state的值,其返回值会赋值给组件的this.state属性。对于组件的每个实例来说,这个方法的调用次数有且只有一次。与getDefaultProps方法不同的是,每次实例创建时该方法都会被调用一次。
componentWillMount :此方法会在完成首次渲染之前被调用。这也是在render方法调用前可以修改组件state的最后一次机会。
render :生成页面需要的虚拟DOM结构,用来表示组件的输出。Render需要满足:(1)只能通过this.props和this.state访问数据;
(2)可以返回null、false或者任何React组件;
(3)只能出现一个顶级组件;
(4)必需纯净,意味着不能改变组件的componentDidMount: 该方法发生在render方法成功调用并且真实的DOM已经被渲染之后,在该函数内部可以通过this.getDOMNode()来获取当前组件的节点。然后就可以像Web开发中的那样操作里面的DOM元素了。
状态或者修改DOM的输出。
componentWillReceiveProps :在任意时刻,组件的props都可以通过父辈组件来更改。当组件接收到新的props(这里不同于state)时,会触发该函数,我们同时也获得更改props对象及更新state的机会。
shouldComponentUpdate: 该方法用来拦截新的props和state,然后开发者可以根据自己设定逻辑,做出要不要更新render的决定,让它更快。
componentWillUpdate: 与componentWillMount方法类似,组件上会接收到新的props或者state渲染之前,调用该方法。但是不可以在该方法中更新state和props。
componentDidUpdate :与componentDidMount类似,更新已经渲染好的DOM。
componentWillUnmount:该方法会在组件被移出之前调被调用。在componentDidMount方法中添加的所有任务都需要在该方法中撤销,比如说创建的定时器或者添加的事件监听等
77、 redux的工作原理?
答:1).组件点击事件其他方法 发送action
2).store接收到action会把oldstate和action发送给reducers
3).reduers匹配对应的action 就会修改对应的state
4).state改变store触发监听函数去修改component
5).单向数据流管理组件的状态
78、 react 里面性能优化的方案有哪些?
答:高度使用shouldComponentUpdate 来避免不必要的dom操作;
使用production 版本的react.js;
使用key来帮助react识别列表中所有子组件的最小变化=给每个变量遍历的时候加一个key;
拆分组件是有利于复用和组件优化的;
生成虚拟DOM并进行比对发生在render()后,而不是render()前;
利用diff 算法避免没有必要的dom操作,从而提高性能。
79、 redux和react-redux的区别?
答:使用单项数据流
react-redux 对组件进行了拆分,从视图的角度,拆分为容器组件和UI组件
80、 如何区分宿主对象、内置对象、本地对象?
答:宿主对象:跟window有关的,document,官方未定义的都是宿主对象
内置对象:不可以被实例化的对象 math.random 等
本地对象:可以实例化的对象 new Date,new Object,new Array, new RegExp 等
81、 react-redux 将组件分为哪两类?有什么作用?
答:容器组件负责逻辑,传数据
UI组件负责页面
82、 redux 的缺点?
答:1)组件所需要的数据只能从父元素通过props传递
2)当一个组件相关数据更新时,即使父组件不需要这个组件,父组件还是会重新render,可能会有效率影响,或者需要写复杂的shouldComponentUpdate
85、 什么是优雅降级和渐进增强?
答:渐进增强(progressive enhancement):一开始只构建站点的最少特性,然后不断地对不同的浏览器追加不同的功能
优雅降级(graceful degradation):一开始就构建站点的完整功能,然后针对浏览器进行测试和修复
86、 http的状态码有哪些?
答:1)2xx (3种)
200 OK:表示从客户端发送给服务器的请求被正常处理并返回;
204 No Content:表示客户端发送给客户端的请求得到了成功处理,但在返回的响应报文中不含实体的主体部分(没有资源可以返回);
206 Patial Content:表示客户端进行了范围请求,并且服务器成功执行了这部分的GET请求,响应报文中包含由Content-Range指定范围的实体内容。
2)3xx (5种)
301 Moved Permanently:永久性重定向,表示请求的资源被分配了新的URL,之后应使用更改的URL;
302 Found:临时性重定向,表示请求的资源被分配了新的URL,希望本次访问使用新的URL;
301与302的区别:前者是永久移动,后者是临时移动(之后可能还会更改URL)
303 See Other:表示请求的资源被分配了新的URL,应使用GET方法定向获取请求的资源;
302与303的区别:后者明确表示客户端应当采用GET方式获取资源
304 Not Modified:表示客户端发送附带条件(是指采用GET方法的请求报文中包含if-Match、If-Modified-Since、If-None-Match、If-Range、If-Unmodified-Since中任一首部)的请求时,服务器端允许访问资源,但是请求为满足条件的情况下返回改状态码;
307 Temporary Redirect:临时重定向,与303有着相同的含义,307会遵照浏览器标准不会从POST变成GET;(不同浏览器可能会出现不同的情况);
3)4xx (4种)
400 Bad Request:表示请求报文中存在语法错误;
401 Unauthorized:未经许可,需要通过HTTP认证;
403 Forbidden:服务器拒绝该次访问(访问权限出现问题)
404 Not Found:表示服务器上无法找到请求的资源,除此之外,也可以在服务器拒绝请求但不想给拒绝原因时使用;
4)5xx (2种)
500 Inter Server Error:表示服务器在执行请求时发生了错误,也有可能是web应用存在的bug或某些临时的错误时;
503 Server Unavailable:表示服务器暂时处于超负载或正在进行停机维护,无法处理请求;
87、 window.onready和onload的区别
1)执行时间window.onload必须等到页面内包含图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕之后就执行,不必等到加载完毕
2)编写个数不同,window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个$(document).ready()可以同时编写多个,并且都可以得到执行
3)简化写法window.onload没有简化写法,(function(){})
88、 react 路由传参方式?
答:两种,在path里面通过:声明动态路由参数 ,通过props.match.params来取
参数
89、 对原型链的理解?
答:进行方法调用的时候,会先在自身上查找,如果没有就去该实例的原型链上查找,直到找到为止,如果没找到就返回undefined。
原型链就是创建一个构造函数,它会默认生成一个prototype属性并指向原型对象。使用下一个构造函数的原型对象作为这个构造函数的实例。即 nextFuction.prototype = new thisFuction();
在下下一个构造函数的原型对象 = new nextFuction。这样下去就会构成一条实例与原型之间的链条,这就是原型链。
在构造函数中定义的属性和方法实际上是实例的属性和方法。即只能出现在实例中。同理因为在构造函数SubType中定义的subProperty属性是实例属性,所以存在于instance中。实例中会有一个[[prototype]]内部属性指向构造函数的原型对象。这样就形成了一条链。
在通过原型链实现继承的情况下,当读取模式访问实例中的属性时,会先搜索实例,然后再搜索实例的原型,在一层一层直到找到或者到达原型链的末端停止,返回undefined。
其实我们上面的是少一环的,即Object。因为所有引用类型都是从object继承来的。
原型链就是设置构造函数的属性时,会向它的父元素上面的原型上查找,如果原型没有的话就去object上面查找,如果大写的Object上面没有的话,就为undefined,自己有的就用自己的
90、 react-redux 如何实现异步操作?
答:中间件 使用react-promise,
91、 什么是高阶组件?HOC和
答:函数接收一个组件作为参数
而hoc高阶组件是将组件进行包装,给组件增加一些新的功能,但不改变原组件,类似高耦合低内聚的思想
92、 浏览器如何渲染页面的?
答:浏览器输入url发送http请求给服务器,服务器接收后返回html代码给浏览器,浏览器开始渲染页面:
1.解析HTML文件,创建DOM树。
自上而下,遇到任何样式(link、style)与脚本(script)都会阻塞(外部样式不阻塞后续外部脚本的加载)。
2.解析CSS。优先级:浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式;
3.将CSS与DOM合并,构建渲染树(Render Tree)
4.布局和绘制,重绘(repaint)和重排(reflow)
93、 css 中哪些属性会被继承,哪些属性不会被继承?
答:能被继承的属性:文本属性,
不能被继承的属性:宽、高,背景颜色,margin,padding
94、 全局和局部的区别?
答:全局作用域:定义在函数外部的变量,这个变量在任何函数中都有效,即作用域范围是当前文件的任何地方。
(函数外部用var定义的变量 / 函数内部不用var 定义的变量)
局部作用域:定义在函数内部的变量,这个变量只能在函数内部使用,即作用域范围只是函数内部,另外,形参也是局部变量。
每次进入一个新的执行环境,都会创建一个用于搜索变量和函数的作用域链。作用域链是函数被创建的作用域中对象的集合。作用域链可以保证对执行环境有权访问的所有变量和函数的有序访问。
95、 对usecallback的理解?
答:本质是闭包,
96、 说一下对纯函数组件和class类组件的区别?
答: 纯函数组件没有this,但是有相关的hooks可以使用
97、 在浏览器输入一个网址到显示页面,浏览器在做什么?
答:1) 浏览器向DNS服务器查找输入URL对应的IP地址。
2)DNS服务器返回网站的IP地址。
3)浏览器根据IP地址与目标web服务器在80端口上建立TCP连接
4)浏览器获取请求页面的html代码。
5)浏览器在显示窗口内渲染HTML。
6)窗口关闭时,浏览器终止与服务器的连接。
99、 redux 和 mobx 的区别?
答:1)Redux的编程范式是函数式的而Mobx是面向对象的;
2)因此数据上来说Redux理想的是immutable的,每次都返回一个新的数据,而Mobx从始至终都是一份引用。因此Redux是支持数据回溯的;
3)然而和Redux相比,使用Mobx的组件可以做到精确更新,这一点得益于Mobx的observable;对应的,Redux是用dispath进行广播,通过Provider和connect来比对前后差别控制更新粒度,有时需要自己写SCU;Mobx更加精细一点。
100、 css中可以取负值的属性有哪些?
答:首行缩进(text-indent),position,background-position
101、 W3C 标准
答:结构html,行为js,表现css
102、 对immutable 的理解?
答:高效的操作可变对象
103、 简述下class类和对象的区别?
答:类是抽象的概念,是抽象对象,对象是类实例化的结果;类是对某些抽象对象的方法和属性的集合
104、 jQuery的优缺点?
答:优点:高内聚,底耦合,模块化思想,结构清晰、适合多个开发人员共同合作开发。
缺点:不能兼容早期版本
106、 vue如何绑定事件?
答:v-on
107、 说一下对useEffect的理解?
答:
108、 react路由组件中的props的三个参数及作用?
答:history,match(获取动态路由参数),location(获取)
非路由组件用withRoute
109、 什么场景推荐使用redux?
答:适用于多数据源,多交互,多用户身份
Redux 缓存
111、 什么是微任务?什么是宏任务?
答:1)宏任务:当前调用栈中执行的代码成为宏任务。(主代码快,定时器等等)。
2)微任务: 当前(此次事件循环中)宏任务执行完,在下一个宏任务开始之前需要执行的任务,可以理解为回调事件。(promise.then,proness.nextTick等等)。
3)宏任务中的事件放在callback queue中,由事件触发线程维护;微任务的事件放在微任务队列中,由js引擎线程维护。
113、 get和post的区别?
get是简单请求,一般用来接收数据,post是非简单请求,会给服务端发送预检请求,比较安全。
114、 什么是同源策略?
答:同源策略(same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。同源策略是浏览器的行为,是为了保护本地数据不被JavaScript代码获取回来的数据污染,因此拦截的是客户端发出的请求回来的数据接收,即请求发送了,服务器响应了,但是无法被浏览器接收。
115、 Tcp三次握手
答:第一次握手:客户端向服务器发送建立连接请求,并进入等待确认状态,等待服务器确认;
第二次握手:服务器接收到请求,必须确认客户的SYN(ack=j+1),同时自己也发送一个SYN包(syn=k),即SYN+ACK包,此时服务器进入SYN_RECV状态;
第三次握手:客户端收到服务器的SYN+ACK包,向服务器发送确认包ACK(ack=k+1),此包发送完毕,客户端和服务器进入ESTABLISHED状态,完成三次握手.
116、 什么是进程?什么是线程?
答:进程是:一个程序的运行到结束就是一个进程,运行的过程中有多个持续的或者断断续续的片段组成,这就是线程,一个进程包含多个线程
117、 什么是前后端分离?优缺点?
答:前端、后端各自独立开发,提高开发效率,各自无影响
缺点:容易产生跨域、缓存问题
118、 什么是移动端300ms延迟?
答:在手机里面显示pc页面,浏览器判断双击还是单击需要300ms
119、 vuex原理?
答:页面通过mapAction异步提交事件到action。action通过commit把对应参数同步提交到mutation。
mutation会修改state中对于的值。最后通过getter把对应值跑出去,在页面的计算属性中,通过mapGetter来动态获取state中的值
120、 react 触发render的三种方法?
答:1)setState
2)update三个钩子函数,this.forceUpdate()
3)父子通信props
4)通过状态管理,如mobx,hooks
121、 如何把一个伪数组转化为真数组?
答:1)ES6的数组新方法Array.from()
2)声明一个空数组,通过遍历将他们添加到新的数组中去
3)使用数组的slice()方法,他返回的是数组,使用call或者apply指向伪数组 var arr = Array.prototype.slice.call(oldarr);
122、 什么是长链接,什么是短链接,什么是轮询?
答:长连接:在HTTP 1.1,客户端发出请求,服务端接收请求,双方建立连接,在服务端没有返回之前保持连接,当客户端再发送请求时,它会使用同一个连接。这一直继续到客户端或服务器端认为会话已经结束,其中一方中断连接。
短连接:在HTTP1.0中,客户端发送请求,服务器接收请求,双方建立连接,服务器响应资源,请求结束。
128、 什么是敏捷式开发?什么是主动式开发?
答:敏捷式开发,保证以最快的速度
主动式开发,提前假想一些业务逻辑、需求
129、 路由里面的push和replace的区别?
答:push:新增一个历史记录,可以回到上个页面
Replace:替换当前历史记录,不能回到上个页面
130、 什么是happy pack?
答:将文件解析任务分解成多个子进程并发执行。子进程处理完任务后再将结果发送给主进程。所以可以大大提升 Webpack 的项目构件速度
131、 Src与href的区别?
答:1.请求资源类型不同
(1) href是Hypertext Reference的缩写,表示超文本引用。用来建立当前元素和文档之间的链接。常用的有:link、a。
(2)在请求 src 资源时会将其指向的资源下载并应用到文档中,常用的有script、img 、iframe;
2.作用结果不同
(1)href 用于在当前文档和引用资源之间确立联系;
(2)src 用于替换当前内容;
3.浏览器解析方式不同
(1)若在文档中添加href ,浏览器会识别该文档为 CSS 文件,就会并行下载资源并且不会停止对当前文档的处理。
(2)当浏览器解析到src ,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等也如此,类似于将所指向资源应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因。
132、 react如何观察数据改变?
答:hooks使用useEffict
Mobx、reaux
133、 document.write 和innerHTML的区别?
答:document.write 只解析内容,而innerHTML还解析标签。
134、 react里面withRouter的用法?
答:class组件,直接使用@withRouter
纯函数组件,使用withRouter()
136、 变量声明的方式有哪些?他们的区别?
答:var 、let 、const
let 、const 块级作用域 不会造成内存泄漏,不存在变量提升
let和const的区别
let与const都是只在声明所在的块级作用域内有效。
let声明的变量可以改变,值和类型都可以改变,没有限制。
const声明的变量不得改变值,这意味着,const一旦声明变量,就必须立即初始化,不能留到以后赋值。
139、 实现数组扁平化的方法有哪些?
答:用于将嵌套多层的数组,变成一维的数组
reduce map toString
140、 什么是回流,什么是重绘?
答:什么是回流
当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流,就是在页面第一次加载的时候,这时候是一定会发生回流的,因为要构建render tree。在回流的时候,浏览器会使渲染树中受到影响的部分失效,并重新构造这部分渲染树,完成回流后,浏览器会重新绘制受影响的部分到屏幕中,该过程成为重绘。
什么是重绘
当render tree中的一些元素需要更新属性,而这些属性只是影响元素的外观,风格,而不会影响布局的,比如background-color。则就叫称为重绘。
区别:
他们的区别很大:
回流必将引起重绘,而重绘不一定会引起回流。比如:只有颜色改变的时候就只会发生重绘而不会引起回流
当页面布局和几何属性改变时就需要回流
比如:添加或者删除可见的DOM元素,元素位置改变,元素尺寸改变——边距、填充、边框、宽度和高度,内容改变
141、 什么是ts?
答:ts是TypeScript,是一种较为严格的语法模式
TypeScript的设计目的应该是解决JavaScript弱类型和没有命名空间,导致很难模块化,不适合开发大型程序
142、 == 和 === 的区别?值等与恒等
143、 vue 脚手架中有哪些文件?
答:node__model public
144、 块级作用域 有什么作用?
答:let const 不会被变量提升,
145、 git 仓库 如何创建分支、切换分支?
答:git branch 查看本地所有分支
146、 rem和em的区别?
答:em相对于最近父元素的字号大小
rem相对于根元素的字号大小
147、 解决图片上下撑大3像素的问题?
答:1>.给图片添加行内元素专有属性:vertical-align: top
2>.给图片添加display: block;
3>.给父元素添加:float: left;
148、 React路由加载组件的三种方法?
答:render 加载纯函数组件
Component 任何形式的都加载
Children 加载slot分发的
151、 mongoDB 和MySQL 数据库的区别?
答:mongoDB 是非关系型数据库,不能进行表连接操作,MySQL 是关系型数据库,能进行表连接操作
152、 深拷贝的实现方式?
答:解构赋值
Immutable
153、 css 中的伪类选择器有哪些?
答:last-childer
154、 既可以用:又可以用::的伪对象选择器是哪四个?
答:after、before、first-letter、first-line
156、 vue和react的区别?
答:vue:简单 有大量指令 能自定义事件、自定义过滤器 用双大括号语句{{ }} 有非常灵活的属性computed 能全局注册组件 混入 有丰富的API
相同点:有响应式视图 组件化开发 虚拟DOM diff算法 架构库
React:Hoc hooks
159、 如何快速找到一个数组中最小的数值?
答。 先从小到大排序,取第一个
160、 未知宽高的盒子居中的三种方法?
答:弹性盒
定位
transform -50% left50%
161、 阻止事件冒泡、阻止浏览器默认行为的方法?
答:阻止事件冒泡:e.stoppropagation()
167、 vue 中加scope的作用?
答:相当于局部样式作用域,不能穿透数据
168、 created 和mounted 的区别?
答:created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。
mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。
169、 vue 项目中如何调用插件的?
答:下载安装,引入,
170、 mobx是如何监听页面数据改变的?
答:组件设置observable观察者,观察数据状态
172、 用边框写一个箭头朝右的三角形?
答:给一个宽高都为0 的盒子,设置margin,三边给透明色,右边给黑色。
173、 react和vue中虚拟Dom的区别?
答:react的虚拟dom
174、 谈谈关于垃圾回收机制的理解。
答:JS的垃圾回收机制是为了以防内存泄漏,内存泄漏的含义就是当已经不需要某块内存时这块内存还存在着,垃圾回收机制就是间歇的不定期的寻找到不再使用的变量,并释放掉它们所指向的内存。
175、 开发中用过的比较好用的软件?
答:Xshell, Postman,Filter
176、 怎么实现数组去重、数组排序?
答:去重:新建一个空数组
177、 react封装组件的思路是什么?
答:组件的复用性
178、 export和export default的区别?
答:export default 默认暴露,只能暴露一个,且可以直接导入
export 可以暴露多个,通过解构导入!
179、 什么是全局变量?什么是局部变量?
答:局部变量:定义在函数体内部的变量,作用域仅限于函数体内部。离开函数体就会无效。再调用就是出错。
全局变量:定义:所有的函数外部定义的变量,它的作用域是整个程序。
180、 主流浏览器的内核?
答:webkit 谷歌和Safari的 是开源的
trident IE的,只应用于windows平台,是不开源的
gecko 火狐 开源的
presto Opera的前内核 是世界上公认的渲染速度最快的引擎
现内核 Blink 2013.4发布
184、 react项目中碰到的bug有哪些?
答:1、图片403,头部加
2、上传头像成功,但是刷新页面之后显示默认头像,原因:在本地存储用户信息的时候,存储格式为json字符串,取出来的时候未转化,应加上JSON.parse()
3、写课程页面点击不同的分类,出现偶尔成功获取页面,偶尔加载失败报undefine错误,原因:跳转的页面请求多个接口,存在异步问题导致加载的顺序问题,解决:对接口之间有依赖的,判断值存在的时候再请求下一个接口
186、 react中setState为什么是一个回调函数?
答:因为 this.props 和 this.state 的更新可能是异步的,不能依赖它们的值去计算下一个 state。
188、 vue的选项属性有哪些?
答:state,props,components,methods,computed
191、 async await除了函数还有哪里可以用?
答:ajax请求。
192、 在vue中如何设置全局变量?
答:变量放到原型链上,vuex,公共文件导入导出
193、 混合开发的原理?
答:每个APP里面都有一个内置的WebView的组件,这是H5打包成APP的基础
每个WebView里面有WebViewJavascriptBridge,是移动UIView和Html交互通信的桥梁,实现native code和js的互相调用和双向通信
194、 微信jsdk是什么?
答:维信提供的可供网页开发者使用的接口(原生API)
195、 维信里面调用jsdk的步骤?
答:5步
1、配置域名 2、引入jsdk文件 3、通过wx.config来注入权限配置认证信息 4、wx.ready 成功回调 5、wx.error失败回调
196、 什么是vue的单向数据流?
答:从数据层model流向视图层view
父组件中的数据可以通过props流动到子组件中,并且当父组件中的数据
发生改变的时候,子组件会自动接收到这个修改后的数据,
并且更新页面中的内容。这就是 Vue 中的单项数据流
所以,数据一般是由父组件提供的,当父组件中的数据发生了改变,子组件就会自动接收到这个数据的变化,从而更新子组件
198、 小程序和网页开发的区别?
答:1)运行环境的不同,网页:运行在浏览器;小程序:运行在客户端
2)开发成本的不同
3)获取系统级权限不同
199、 小程序页面有关的5个生命周期钩子函数?
答:onLoad,onReady,onShow,onHide,onUnload,
200、 小程序如何设置页面title?
答:全局设置:app.json 文件设置 navigationBarTitleText
局部设置:每个页面json文件设置 navigationBarTitleText
202、 Vue事件修饰符有哪些?
答:1.阻止冒泡:.stop
2. 阻止默认事件:.prevent
3. 添加事件侦听器时使用事件捕获模式 :.capture
4.只当事件在该元素本身(比如不是子元素)触发时触发回调:.self
5.事件只触发一次:.once
203、 你知道的攻击web的方式有哪些?(网络安全)
答:xss,域名劫持,流量攻击
204、 说一下最近的小程序的项目开发流程?
答:1、分析、讨论需求;2、确定需求;3、项目排期(确认各分工人员的完成周期);4、项目开发,静态页面,接口联调,小程序测试、解决测试问题,上线部署发布
205、 说出使用过的小程序组件,十个API?
答:组件:
view,text,swiper,button,video,audio,navigation-bar,form,label,image,map,canvas
API:
wx.cloud,wx.showLoading,wx.hideLoading,wx.showToast,wx.showModal,
206、 操作对象的方法有哪些?
答:for in
207、 React初始化state方法?
答:
208、 纯函数的hooks有哪些?
答:useRef,useState,useEffect