目录
技术面（包括一面，二面，三面）
会根据简历上面有的内容去提问，会问到做的项目，遇到哪些问题，怎么解决
1. less相比css的优势
（1）嵌套 逻辑清楚 代码简洁
// less
.father {
height: 300px;
.sun {
height: 200px;
}
}
// css 的写法更加的冗余
.father {
height: 300px;
}
.father .sun {
height: 200px;
}
（2）变量
/** 1. 作为属性值*/
@width: 30px;
div {
width: @width;
}
/** 2. 作为类名*/
@father: 'father'
.@{father} {
width: 20px;
}
/** 3. 作为路径使用*/
@imgs: './img';
.father {
background: url("@{imgs}/222.jpg");
}
/** 4. 作为属性名称使用*/
@w: "width";
.father {
@{w}: 30px;
}
/** 5. 可变变量（了解）*/
@w: '30px';
@a: 'w';
.father {
width: @@a;
}
（3）extend伪类
// 写法1：
// 编译前
.nav {
width: 30px;
}
.sun {
/** &表示父级元素*/
&:extend(.nav)
height: 30px;
}
// 编译后
.nav, .sun {
width: 30px;
}
.sun {
height: 30px;
}
// 写法2：
// 编译前
.nav {
width: 30px;
}
.sun:extend(.nav) {
height: 30px;
}
// 编译后
.nav, .sun {
width: 30px;
}
.sun {
height: 30px;
}
（4）混合Mixins
// 1. 创建类选择器或者id选择器（类选择器或id选择的样式依旧有效）
.color, #color {
width: 30px;
}
// 编译前
.box {
#color();
}
#box {
.color();
}
// 编译后
.box {
width: 30px;
}
#box {
width: 30px;
}
// 2. 创建混合集(只有使用了.color()之后样式才有效)
// 编译前
.color() {
width: 30px;
}
.box {
.color();
}
// 编译后
.box {
width: 30px;
}
// 3. 混合集若设置!important,则所有属性都继承!important
.color() {
width: 30px;
height: 30px;
}
.box {
.color()!important;
}
// 编译后
.box {
width: 30px !important;
height: 30px !important;
}
// 4. 接收参数（多个之间用逗号分隔）
// 编译前
.color(@position, @color1, @color2) {
background: linear-gradient(@position, @color1, @color2);
}
.box {
.color(top, red, green);
}
// 编译后
.box {
background: linear-gradient(top, red, green);
}
// 5. mixins中的when的使用
// 编译前
.mixin(@w){
width:@w;
}
//监听参数的情况
.mixin(@w) when (@w>=500px){
height:600px;
}
.mixin(@w) when (@w<500px){
height:300px;
}
.box16{
.mixin(500px)
}
// 编译后
.box16 {
width: 500px;
height: 600px;
}
// 6. Mixins中循环的使用（不断调用自身）
// 编译前
.loop(@count)when(@count>0) {
.font@{count}: {
font-size: 12px + @count;
}
}
.loop(5);
// 编译后
.font5 {
font-size: 17px;
}
.font4 {
font-size: 16px;
}
.font3 {
font-size: 15px;
}
.font2 {
font-size: 14px;
}
.font1 {
font-size: 13px;
}
（5）运算 算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算
1、运算时以最左侧的单位为准。运算时最好单位统一
2、若属性值之间有‘/’,则less默认当作除法运算
// 编译前
ul{
@width:1200px;
@margin:5px;
width:@width;
li{
width:@width/4-2*@margin;
margin:@margin;
}
}
// 编译后
ul {
width: 1200px;
}
ul li {
width: 290px;
margin: 5px;
}
（6）转义字符
由于在less中‘/’会被编译成除法运算符，所以加上转义字符防止被被转换
// 编译前
.box {
border-radius: ~'30px/50px';
}
// 编译后
.box {
border-radius: 30px/50px;
}
（7）函数
less中有许多内置函数
// 1. if
// 编译前
@some: foo;
div {
margin: if((2 > 1), 0, 3px);
color: if((iscolor(@some)), @some, black);
}
// 编译后
div {
margin: 0;
color: black;
}
// 2. escape编码
不会被编码的字符：/ ? @ & + ' ~ ! $
常见的被编码的字符串：# ^ ( ) { } | : > < ; [ ] =
其余函数以及解释见：less中的函数
（8）命名空间和访问符
为了提供一些封装的目的，你希望对混合（mixins）进行分组
将一些混合（mixins）和变量置于 #bundle 之下，为了以后方便重用或分发
// 编译前
#bundle(){
.border(@c){
border:1px solid @c;
}
color:blue;
}
.box14 {
//映射
color:#bundle[color];
//访问mixins
#bundle.border(black);
}
// 编译后
.box14 {
color: blue;
border: 1px solid black;
}
（9）注释
less中//不会被编译到css中
less中/**/会被编译到css中
（10）导入import
在标准的css中，@import必须放置在其他类型的规则之前
在Less中@import语法可以放置在任意的位置
语法：@import "文件路径"
/*导入的test.less的内容*/
@import "./test";
注意：
1、less的@import的导入可以放置在任意位置
2、若导入的文件为.less后缀，则可以省略(其他文件后缀不能省略)
3、同一个less文件只会被导入一次
2. vuex工作流程
（1）由组件通过dispatch触发actions里面的修改数据操作
（2）由actions通过commit触发mutations的修改操作
（3）mutations接收到commit的请求就会修改state里面的数据
（4）最后通过store来触发每一个调用它的组件的更新
vuex的作用：数据状态的集中管理，复杂组件的数据通信问题
vuex的实际运用方式
3. vue的生命周期
4. websocket流程简述
服务器和客户端通过TCP建立连接，服务器向客户端发送实时数据，客户端接收到数据并处理。
5. 防抖和节流（都要用到闭包）
防抖节流参考
防抖：就是指触发n秒后再执行函数，n秒内再次触发，重新计算时间，只执行最新的那个触发；
节流：就是连续触发函数事件，但是在n秒内只执行一次，节流会稀释函数的执行频率；
偶然看到的特别精辟的解释，防抖就是回城（被打断-再次触发会重新计算时间），节流就是放技能，有cd，cd过了再触发才能执行
6. 项目中遇到的难点怎么解决的
7. 前端性能优化
8. 页面适配
（1）根据不同分辨率加载不同的css文件
<script>
// 分辨率大于等于1680，大部分为1920的范围情况下，调用此css
if(window.screen.width >= 1680){
document.write('<link rel="stylesheet" href="css/index_1920.css">');
}
// 分辨率在1600-1680这个范围的情况下，调用此css
else if(window.screen.width >= 1600){
document.write('<link rel="stylesheet" href="css/index_1600.css">');
}
// 分辨率小于1600的范围情况下，调用此css
else{
document.write('<link rel="stylesheet" href="css/index.css">');
}
</script>
（2）媒体查询
@media only screen and (min-width: 1600px) and (max-width: 3200px) {
// 样式
}
（3）媒体查询动态设置根元素的字体大小
@media only screen and (min-width: 1600px) and (max-width: 3200px) {
html {
font-size: 100px;
}
}
（4）响应式布局
（5）百分比布局
9. vue3和vue2的区别
10. 页面卡死怎么看问题出在哪了
11. 优化页面响应速度
（1）vue路由懒加载
（2）http缓存
12. 浏览器根据包的hashcode决定要不要刷新静态资源
13. vue2绑定数据的原理
14. echarts渲染流程
(1)init初始化dom
1. 将容器传递给init函数
初始化的时候theme和opts配置项可以传可以不传
export function init(
dom: HTMLElement,
theme?: string | object,
opts?: EChartsInitOpts
)
2. init函数里面：
先判断是否已经初始化了这个dom，如果已经初始化了，就返回
如果没有初始化，就实例化new ECharts
const existInstance = getInstanceByDom(dom);
if (existInstance) {
return existInstance;
}
const chart = new ECharts(dom, theme, opts);
chart.id = 'ec_' + idBase++;
instances[chart.id] = chart;
3. 在Echarts实例化里面：
使用zrender初始化
。。。。。。未完全理解
(2)setOption设置配置项渲染
15. websocket状态类型
1xxx: 表示一些信息状态码，用来传递非错误信息
2xxx: 表示成功状态码，用于表示连接成功或者操作成功
3xxx: 表示重定向状态码，用于表示需要进一步操作来完成请求
4xxx: 表示客户端错误状态码，用于表示客户端发送的请求有误
5xxx: 表示服务端状态错误码，用于表示服务器无法完成请求
常见的WebSocket状态码：
1000：正常关闭
1001：客户端离开
1002：协议错误
1003：数据类型错误
1005：无法接收
1006：连接关闭异常
1011：服务器遇到异常
204
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
