前端面试集锦（2）

时间 2019-11-13

标签前端面试集锦栏目快乐工作繁體版

原文原文链接

面试总结css

一、自我介绍：姓名、学校、项目简述、自我评价html

二、从输入URL到页面加载发生了什么vue

　　http://www.javashuo.com/article/p-sqewywzj-b.htmlnode

　　一、浏览器的地址栏输入URL并按下回车。面试

　　二、浏览器查找当前URL是否存在缓存，并比较http缓存是否过时。算法

　　三、DNS解析URL对应的IP。vue-router

　　四、根据IP创建TCP链接（三次握手）。api

　　五、HTTP发起请求。数组

　　六、服务器处理请求，浏览器接收HTTP响应。promise

　　七、渲染页面，构建DOM树。

　　八、关闭TCP链接（四次挥手）。

三、页面重绘和回流以及优化

　　https://www.css88.com/archives/4996

http://www.javashuo.com/article/p-gixdflfw-kh.html

当render tree中的一部分(或所有)由于元素的规模尺寸，布局，隐藏等改变而须要从新构建。这就称为回流(reflow)。
每一个页面至少须要一次回流，就是在页面第一次加载的时候。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并从新构造这部分渲染树，完成回流后，浏览器会从新绘制受影响的部分到屏幕中，该过程成为重绘。
当render tree中的一些元素须要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，好比background-color。则就叫称为重绘。
注意：回流必将引发重绘，而重绘不必定会引发回流。

优化：

　　1. 将屡次改变样式属性的操做合并成一次操做

　　2. 将须要屡次重排的元素，position属性设为absolute或fixed，这样此元素就脱离了文档流，它的变化不会影响到其余元素。例若有动画效果的元素就最好设置为绝对定位。

　　3. 在内存中屡次操做节点，完成后再添加到文档中去。例如要异步获取表格数据，渲染到页面。能够先取得数据后在内存中构建整个表格的html片断，再一次性添加到文档中去，而不是循环添加每一行。

　　4. 因为display属性为none的元素不在渲染树中，对隐藏的元素操做不会引起其余元素的重排。若是要对一个元素进行复杂的操做时，能够先隐藏它，操做完成后再显示。这样只在隐藏和显示时触发2次重排。

　　5. 在须要常常获取那些引发浏览器重排的属性值时，要缓存到变量。

四、IE9兼容性

五、css优化

六、elementUI优缺点

　　Element UI 是一套采用 Vue 2.0 做为基础框架实现的组件库，它面向企业级的后台应用，可以帮助你快速地搭建网站，极大地减小研发的人力与时间成本

　　（1）<el-input>没法彻底兼容<input>
　　　　场景：<el-input>和vuejs结合起来时，没法实现输入框中的动态更新
　　　　解决方法：v-model要和<input/>搭配起来才能实现实时更新

　　（2）<el-button>对disabled属性的不支持
　　　　应用场景：有一个输入框，在框内没有内容时禁用旁边的删除按钮
　　　　方法：disabled属性

　　　　因此只能使用<button>而不是<el-button>来使用disabled属性

七、修改elementUi默认样式（-deep）

　　https://blog.csdn.net/wangguoyu1996/article/details/81394707

　　（1）在须要更改的组件里新增一个style标签【重点：不要加scoped】，而后直接获取class设置样式

　　（2）/deep/；.resourceDig为咱们要修改组件类名的父级组件样式类名。

八、Less和Sass使用过吗？Less优缺点?Less中@的使用

九、ES6数组去重：new set()

十、ES6扩展运算符（...）用法

十一、排序算法（冒泡、快排实现代码）

十二、怎么理解模块化

　　http://www.javashuo.com/article/p-uqptukos-dz.html

　　http://www.javashuo.com/article/p-ngitjbct-kg.html

　　http://www.javashuo.com/article/p-kwegwhtc-gx.html

　　当即执行函数： https://blog.csdn.net/csdn_yudong/article/details/77431106

　　所谓模块化开发，就是封装细节，提供接口，彼此之间互不影响，每一个模块都是实现某一特定功能。

　　模块化开发的4点好处：

　　　　1 避免变量污染，命名冲突

　　　　2 提升代码复用率

　　　　3 提升维护性

　　　　4 依赖关系的管理

1三、什么状况下使用组件，优势

1四、vue父子组件之间怎么通讯

1五、vue全局组件使用、import的缺点

　　https://blog.csdn.net/ywl570717586/article/details/79984909

　　vue组件分两种：全局组件和局部组件

　　全局组件引入写法：在项目的main.js中

　　局部组件引入写法：在须要使用组件的a.vue文件中

1六、vue生命钩子

1七、vue-router源码分析及路由实现原理

　　http://www.javashuo.com/article/p-xgymiwpz-na.html

　　https://router.vuejs.org/zh/api/#router-resolve

　　总结：

　　一、安装插件
　　混入beforeCreate生命周期处理，初始化_routerRoot，_router，_route等数据
　　全局设置vue静态访问router和router和route，方便后期访问
　　完成了router-link和 router-view 两个组件的注册，router-link用于触发路由的变化，router-view做为功能组件，用于触发对应路由视图的变化

　　二、根据路由配置生成router实例
　　根据配置数组生成路由配置记录表
　　生成监控路由变化的hsitory对象

　　三、将router实例传入根vue实例
　　根据beforeCreate混入，为根vue对象设置了劫持字段_route，用户触发router-view的变化
　　调用init()函数，完成首次路由的渲染，首次渲染的调用路径是调用history.transitionTo方法，根据router的match函数，生成一个新的route对象
　　接着经过confirmTransition对比一下新生成的route和当前的route对象是否改变，改变的话触发updateRoute，更新hsitory.current属性，触发根组件的_route的变化,从而致使组件的调用render函数，更新router-view

　　另一种更新路由的方式是主动触发
　　router-link绑定了click方法，触发history.push或者history.replace,从而触发history.transitionTo
　　同时会监控hashchange和popstate来对路由变化做对用的处理

1八、nodejs主要实现什么

===========================================================================================================================

一、vue生命周期

二、vue中修改了数据但视图没法更新的状况

　　https://blog.csdn.net/qq_39985511/article/details/79778806

三、vue动态组件

　　https://cn.vuejs.org/v2/api/#is

　　经过 component 动态组件的方式遍历数据
　　<component :is="item.type" :data="item" v-for="item in sourceData"></component>
　　数据必须包含一个数据的所属组件类型

四、vue父子组件传播

五、vue监听路由

六、vue路由按需加载

七、v-if和v-show的区别

八、清除浮动的方法

　　https://blog.csdn.net/u013137242/article/details/83753804

　　（1）overflow:hidden;

<div style="overflow:hidden;zoom:1;">
    <p style="float: left;">使用overflow:hidden 清除浮动</p>
</div>

　　（2）clear:both;

<style>
.clearfix:after{
    /*START 真正起到清除浮动的代码*/
    content: '';
    display: block;
    clear: both;
    /*END 真正起到清除浮动的代码*/
    height:0;
}
.clearfix{display: inline-block;} /* for IE/Mac */
</style>
<div class="clearfix">
    <div style="float: left;">clear:both ;son div</div>
</div>

九、display有几种

　　http://www.w3school.com.cn/cssref/pr_class_display.asp

　　none、inline、block、inline-block、table、inherit（继承父级的display属性）

十、inline-block和block的区别

　　http://www.javashuo.com/article/p-zfyowszx-hm.html

　　http://www.javashuo.com/article/p-hwbglygn-eo.html

display:block

block元素会独占一行，多个block元素会各自新起一行。默认状况下，block元素宽度自动填满其父元素宽度。
block元素能够设置width,height属性。块级元素即便设置了宽度,仍然是独占一行。
block元素能够设置margin和padding属性。

display:inline

inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
inline元素设置width,height属性无效。
inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

display:inline-block

简单来讲就是将对象呈现为inline对象，可是对象的内容做为block对象呈现。以后的内联对象会被排列在同一行内。好比咱们能够给一个link（a元素）inline-block属性值，使其既具备block的宽度高度特性又具备inline的同行特性。

十一、a标签是行内元素吗？能够设置宽、高、行高吗？

　　a标签是内联元素，不能够设置宽、高，能够设置行高、padding水平方向、margin水平方向

十二、css实现省略号？实现省略号的属性是？

　　一、纯css+js控制省略号

<html>
<head>

<style type="text/css">
.box{width: 100px;height: 50px;overflow: hidden;}
.wz{float: left;height: 50px;margin-right: 20px;}
.dot{float: right;width: 20px;height：50px;margin-top: -50px;}
</style>

</head>

<body>
<div class="box">
　　<div class="wz">文字内容</div>
　　<div class="dot">...</div>
</div>

</body>
</html>