11.28面试

url :
https://mp.weixin.qq.com/s?__biz=MzIzNTU2ODM4Mw==&mid=2247487984&idx=1&sn=2644f06727d3de9e68cbef64e5d1d74d&chksm=e8e47c60df93f57674134b318cba92f44f8000287e10e6520e55c7bf75dacfa8da180b223c4a&mpshare=1&scene=1&srcid=#rd

1. 谈谈你对MVVM开发模式的理解

分为三部分 :

​ 1.Model 数据 逻辑

​ 2.View ui界面

​ 3. ViewModel 中间件 负责监听model的变化并且控制View的更新 处理用户交互

Model和View 没有直接关联,他们两个通过ViewModel进行关联,model和ViewModel之间有双向绑定 从而影响到View层的刷新,这种模式实现了Model和View的数据自动同步,开发者就只要对数据进行操作和维护就好,不用操作dom

2 vue 的指令

v-html : 绑定的标签能 编译 html标签

v-text : 无法编译 html 标签

v-show : 控制元素的显示方式

v-if : 控制dom 节点是否存在

3 v-if 和 v-show 的区别

相同点 都能控制控制的元素的显示与隐藏

v-show : 控制方式: 控制display 属性 block和none 之间切换

v-if : 控制方式 : 控制dom 节点是否存在

当需要频繁进行 显示 隐藏的时候 适用v-show 原因优化性能

只想要显示一两次 适用 v-if 或者是需要进行判断的dom 元素节点

4 简述Vue的响应式原理

原理就是基于数据发生改变

传入一个简单的js对象到vue 实例作为data数据,那么vue 就会遍历这个对象的所有属性 并使用 Object.defineProperty( Obj的api 作用 : 直接在对象上定义一个新属性或者是修改对象现有的属性 并返回这个对象 ) 把所有属性设置 getter/setter属性

5 vue中如何在组件内部实现双向数据绑定

主要是通过 v-model进行的数据绑定

v-model 在父组件中做了两件事情 一 : 给子组件传入 props 二 : 监听input 事件并同步自己的value值

v-model 相当于就是 : value=“value” 与 @当前事件="当前组件的原值= 子组件传来的值"两者的结合

6 vue 中如何监控某个属性值的变化

通过 watch 和 computed 监控

一个是监听器一个是计算属性

computed 只能设置在有依赖项的属性中

7 vue 中的data对象添加一个新的属性会发生什么 怎么解决

现象 : 点击按钮为data 中的对象添加一个新的值 那么数据能添加到对应的对象中 但是页面不会渲染新的值

原因 : vue实例在创建的时候 新值没有进行声明 所以就没有被 Vue 转换为响应式的属性 所以就不会触发视图的更新

解决方法 : 使用vue 的全局api $set()

​ 这个方法相当于手动的把新的值处理成一个响应式的属性 与此同时视图也对应改变了

8 delete 和Vue.delete 删除数组的区别

delete 将元素变为 empty/undefined 其他的元素值依旧是不变的 也就是长度不变 原元素的位置由empty代替 长度不变

Vue.delete 直接改变数字的键值 直接删除到和没有出现一样

9 如何优化 SPA(单页面应用) 应用的首屏加载速度慢的问题?

1 . 将公用的JS库通过script标签从外部引用 减小 app.bundel (资源应用包)的大小 让浏览器并行下载资源文件,提高下载速度

2 . 在配置路由的时候 将页面还有路由通过懒加载进行引入 进一步的缩小app.bundel 的体积 在调用的时候在加载对应的js文件

3 . 为首屏添加一个loading

10 前端如何优化网站性能

1 . 减少Http 的请求数量

​ 1.1 精灵图( CSS Sprites) 多张图片合并为一张图片 从而达到减少HTTP请求

​ 1.2 合并CSS和js 文件 打包将多个文件打包为一个

​ 1.3 使用懒加载(lazyLoad) 通过检测内容的改变从而控制剩下的内容什么时候加载 能很好的控制页面资源的一次性请求的数量

2 . 控制资源文件的加载优先级

​ 浏览器解析html是从上往下的 先将静态页面加载给用户看 之后在加载js代码

​ css导入代码在头部 js代码导入在底部

3 . 使用浏览器缓存

​ 这些资源无需从服务器请求 直接在本地进行读取

4 . 减少重排 (Reflow) 有些dom元素的变化会影响到几何属性 那么浏览器就会重新计算元素的几何属性 会使Dom 树 受到影响的部分失效 如果重排的次数过多CPU就会剧烈上升

5 . 减少DOM操作

6 . 图标使用 iconfont 替换

​

11 页面从输入网址到渲染完成经历了那些过程

分为7步

1. 输入网址
2. 发送到DNS 服务器 并获取域名和对应的web服务器对应的ip地址
3. 与web服务器建立TCP 连接
4. 浏览器向web 服务器发送http 请求
5. web服务器响应请求 并且返回url 数据
6. 浏览器下载web服务器返回的数据并解析html 源文件
7. 生成DOM树 解析css和js 渲染页面 直到显示完成

12 jQuery获取的dom对象和js获取的dom对象有什么区别

js 获取的是一个 对象

jq获取的是一个数组对象 ( 选择出来的元素的数组的集合 )

补充 :

js 转jq

var  box = document.getElementById('box')
var $box = $(box)

jq 转 js

var $box = $('#box')
var box = $box[0]

13 jq 如何扩展自定义方法

(jQuery.fn.函数名 = function(){
    alert('1111')
})
或者是 : 
(function ($) {
    $.fn.extend({
		函数名 : function (){
            alert('2222')
        }
    })
}
 
 使用 :  
$( ' #div ' ).函数名()