前端小白面试之旅二

最新推荐文章于 2024-04-22 03:57:30 发布

weixin_34007020

最新推荐文章于 2024-04-22 03:57:30 发布

阅读量205

点赞数

CC 4.0 BY-SA版权

文章标签：面试前端网络 ViewUI

原文链接：https://juejin.im/post/5c80e3e75188251b652afa3f

本文探讨了Vue.js应用的性能优化策略，包括代码分割、懒加载、减少HTTP请求及合理放置脚本和样式表的方法。同时，详细讲解了路由参数的三种传递方式，以及如何使用flex布局和CSS3新特性提升网页表现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题一：vue页面如何优化提升页面的加载速度

通过 coding split（代码分割）结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载。把不同路由对应的组件分割成不同的代码模块，当路由被访问的时候去加载对应的模块即可，也就是说组件在引入的时候是以一个函数的形式引入

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

export default new Router({
  routes:[
    {path:'/',redirect:"/home"},
    {path:'/home',component:()=>import('../components/Home.vue'),meta:{keepAlive:true,title:'首页'}},
    {path:'/list',component:()=>import('../components/List.vue'),meta:{title:'列表'},},
    {path:'/collect',component:()=>import('../components/Collect.vue'),  meta:{title:'添加'},},
    //detail/1 {bid:1} 路径参数 必须有但是可以随机
    {
      path:'/detail/:bid',
      component:()=>import('../components/Detail.vue'),
      meta:{title:'详情'},
      name:"detail"
    },
    {path:'/add',component:()=>import('../components/Add.vue')},
    {path:'*',redirect:'/home'}
  ]

})
复制代码

问题二：路由组件如何传参

布尔模式
对象模式
函数模式

问题三：路由如何传参

通过params
通过query
通过hash

问题三：flex常用属性

flex-direction:row/colunm 默认是行还是列
jsuttify-content:center 垂直居中
align-content:center 水平居中
flex:1 平均几等分

问题四：页面加载慢如何优化？

减少HTTP请求

例如在进行删除时页面会刷新一下数据，此时不要去直接调用接口，而是从新写一遍删除方法即可

将样式表放在头部

可以减少页面的请求时间，使内容逐步呈现，提升用户体验，防止‘白屏’

将脚本放在底部

js的下载和执行会阻断DOM树的构建，甚至是中断

避免CSS表达式
一些小图标进来采用雪碧图的形式引入

引入雪碧图是将所有的小图片都放在一张大图上，因此我们只需要请求一次，接下来每次都是通过位置去获取到相应的图标

精简JavaScript

问题五：CSS3有哪些新特性

新增各种css选择器
圆角border-radius -多列布局
阴影和反射
文字特效 text-shaow
线性渐变
旋转transtorm 优先级：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

问题六:HTML5有哪些新特性？

绘画canvas
媒介回放 videodio和audiovideo
本地存储localStora 和 seesitionStorage
语义化内容标签 article,footer,header,nav,section
表单控件 calendar,email,time,url,search
新的技术 webworker,webSocket,Geoloaction

问题七：常见的兼容问题如何处理

浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同

利用通配符设置*{margin：0;padding:0;}

浏览器兼容问题二：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大

利用通配符设置*{margin：0;padding:0;}

浏览器兼容问题三：设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度

给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

浏览器兼容问题四：行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug

在display:block;后面加入display:inline;display:table;

浏览器兼容问题五：图片默认有间距

使用float属性为img布局

标签最低高度设置min-height不兼容

如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}

浏览器兼容问题七：透明度的兼容CSS设置

CSS hack 解决

元素水平居中问题

FF:margin:0 auto; IE: text-align:center

问题八：vue声明周期函数

beforeCreated 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
created 在实例创建完成后被立即调用。
beforeMounted 在挂载开始之前被调用
mounted el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
beforeUpdata 数据更新时调用，发生在虚拟 DOM 打补丁之前。
updata 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
active keep-alive 组件激活时调用
deactivated keep-alive 组件停用时调用。
beforeDestroy 实例销毁之前调用
destory 实例销毁之后调用
errorCaptured 当捕获一个来自子孙组件的错误时被调用

Vue实现数据双向绑定的原理：Object.defineProperty（）答：主要采用数据劫持结合发布者-订阅者的模式，通过Object.defineProperty劫持各个属性的setter和getter,在数据变动时发布消息给订阅者，触发相应监听回调 vue数据双向绑定，将MVVM作为数据绑定的入口Observer,compile,watcher,通过Observer来监听自己的数据变化，通过compile来解析编译模板指令，最后通过watcher来搭建起Obsever和compile的通信桥梁，达到视图化数据更新的效果

问题九：vue-router的钩子函数

全局钩子 beforeEach afterEach
单个路由里面的钩子 beforeEnter beforeLeave
组件路由 beforeRouteEnter和beforeRouteUpdate ,beforeRouteLeave

其它问题： 1、访问一个url都经历了什么？答：客户端获取URL - > DNS解析 - > TCP连接 - >发送HTTP请求 - >服务器处理请求 - >返回报文 - >浏览器解析渲染页面 - > TCP断开连接

2、h5新特性？答： 1、标签语义化 2、新增视频和音频 3、web storage 4、web worker 5、web socket 6、canvas 7、增强型表单 8、拖拽API 9.svg 绘图 10、地理定位

冒泡排序

数组去重

let ary1 = [1,['2','3'],2];
let ary2 = [1,['2','2',3,['3']],4];
let aryOne =  [].concat.apply([], ary1).join(',').split(',').map(Number);
let set = new Set(aryOne);
console.log(set)


查找出现次数最多的字母个数

var testStr = 'asdasddsfdsfadsfdghdadsdfdgdasd';
var testArray = testStr.split('');
var a = testArray.reduce(function(prev,next){
    if(next in prev) {
        prev[next]++;
    }else {
        prev[next] = 1;
    }
    return prev
},{})
console.log(testArray)
console.log(a)
复制代码