面试一

作者: Clayten | 来源:发表于2020-04-08 22:08 被阅读0次

    1.怎么设置12px一下的字体

    使用transform:scale(0.8);

    2.css的盒子模型,用哪个属性是切换盒模型的

    box-sizing:content-box|border-box

    3.rem,em,px,vw,vh单位的区别?

    rem相对于html的font-size:改变而改变,em相对于父级容器的font-size而改变,vw相对与屏幕的宽度1%

    4.Vue中有时改变了值但是没有渲染怎么解决?

    vue.$set(obj,propo,val);//第一个参数:修改的对象,第二个参数:想改的属性,第三个参数,修改的值

    5.vue中v-for 的key一般用什么值,有什么用处?

    一般使用index当作key的值,但是有时使用index会影响渲染效率,key的作用主要是为了高效的更新虚拟DOM

    6.es6中你用的最多的有哪些?

    模板字符串,箭头函数,扩展运算符,块级作用域,promise,模块import,export,解构赋值

    7.js中的数据类型,怎么判断是什么类型的 ?

    字符串用typeof,数组用intranceof(),判断构造函数是否在实例的prototype上

    8.前端的页面优化?

    1.减少http请求
    2.压缩js,css

    1. 减少dom操作

    9.事件防抖节流?

    防抖:
    给一个定时器,当定时器结束时执行逻辑代码,并清除定时器,当定时器没有结束,再次触发后清楚定时器,并重新开始定时器

    const on = Vue.prototype.$on
    // 防抖处理
    Vue.prototype.$on = function (event, func) {
      let timer
      let newFunc = func
      if (event === 'click') {
        newFunc = function () {
          clearTimeout(timer)
          timer = setTimeout(function () {
            func.apply(this, arguments)
          }, 500)
        }
      }
      on.call(this, event, newFunc)
    }
    
    

    节流:
    定时器:

    const on = Vue.prototype.$on
      
    // 节流
    Vue.prototype.$on = function (event, func) {
      let previous = 0
      let newFunc = func
      if (event === 'click') {
        newFunc = function () {
          const now = new Date().getTime()
          if (previous + 1000 <= now) {
            func.apply(this, arguments)
            previous = now
          }
        }
      }
      on.call(this, event, newFunc)
    }
    

    10.事件委托与vue中怎么实现事件委托

    在父级中绑定事件在事件中使用e.target.nodeName

    11.html5离线存储有几种方式?他们有什么区别?

    localStorage.sessionStorage,cookies,离线储存manifest,cache那些文件需要缓存

    12.移动端时经常会碰到设配问题,你怎么解决不懂屏幕的适配问题

    动态的设置html的font-size值,在页面中除了文字大小其他的用rem,设置视口与设备的宽度相同

    13.v-if与v-show的区别?

    v-if一般是作为条件渲染时使用,当有不同的条件显示不同的页面时可以使用,不显示的东西在dom中找不到
    而v-show只是控制dom的display变为none

    14.http状态码?200,300,400,500

    200:成功
    301:永久重定向,表示请求的资源被分配了新的URL,之后应使用更改的URL
    302:临时行重定向,表示请求的资源被分配了新的url,本次访问使用新的URL
    303:表示请求的资源被分配了新的URL,应使用GET方法定向获取资源
    304:表示客户端发送附带条件(是指采用GET方法的请求报文中包含if-Match、If-Modified-Since、If-None-Match、If-Range、If-Unmodified-Since中任一首部)的请求时,服务器端允许访问资源,但是请求为满足条件的情况下返回改状态码;
    307:与303有着相同的含义,307会遵照浏览器标准不会从POST变成GET;(不同浏览器可能会出现不同的情况);
    400:请求报文中存在语法错误
    401:未经许可,需要通过http认证
    403:服务器拒绝该次访问
    404:表示服务器上无法找到请求的资源
    500:表示服务器在执行请求时发生了错误,也有可能是web应用存在的bug或某些临时的错误时;
    503:表示服务器暂时处于超负载或正在进行停机维护,无法处理请求;

    15.webpack中的plugins与loader的区别是什么?

    loader :loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此,loader 类似于其他构建工具中“任务(task)”,并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言(如 TypeScript)转换为 JavaScript,或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件!

    总结区别

    1 .文档定义loader为在模块加载时的预处理文件,故loader运行在打包文件之前。
    2 . plugins的定义为处理loader无法处理的事物,例如loader只能在打包之前运行,但是plugins在整个编译周期都起作用。

    16.uniapp中的.nvue 与.vue区别

    在App端,如果使用vue页面,则使用webview渲染;如果使用nvue页面(native vue的缩写),则使用原生渲染。一个App中可以同时使用两种页面

    18.vue中数据绑定的原理是什么?怎么实现的数据渲染

    VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。

    19.浏览器输入url按下回车后会怎么样?

    20.什么是闭包,闭包会出现什么问题?怎么手动清除内存泄露

    闭包是指有权访问另一个函数作用域中变量的函数,创建闭包的最常见的方式就是在一个函数内创建另一个函数,通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域,将函数内部的变量和方法传递到外部。

    21.git你对git了解的多吗?一般都是怎么使用的

    git clone 
    git pull
    git push 
    git branch //查看分支
    git branch name 创建分支
    git checkout -b name 创建并切换分支
    

    22.Vue加载时会出现短暂的白屏怎么解决?
    1、bundle太大,没有压缩混淆。
    2、bundle没有使用异步模块加载。
    3、bundle没有拆分css样式或者base64了图片。
    解决方法:1、路由懒加载

    import ShowBlogs from '@/components/ShowBlogs'
    
    routes:[ path: 'Blogs', name: 'ShowBlogs', component: ShowBlogs ]
    //改为
    routes:[ 
            path: 'Blogs',
            name: 'ShowBlogs',
            component: () => import('./components/ShowBlogs.vue')
        ]
    

    相关文章

      网友评论

          本文标题:面试一

          本文链接:https://www.haomeiwen.com/subject/rjozphtx.html