面试基金

1、http和https

  http 明文传输，数据不加密，安全性较差

  https 数据传输过程是加密的，安全性较好

  http 页面响应速度比https 快，主要是因为 HTTP使用tcp三次握手建立连接，客户端和服务器端需要交换3个包，而https除了tcp的三个包外，还要加上ssl握手需要的9个包

  不同的连接方式，端口号不一样，HTTP默认80，HTTPS默认443

  三次握手：

    首先客户端向。。。

2、css属性兼容性问题解决下划线缺失问题，利用tansform进行缩放比例

3、减少后台请求数

  能做雪碧图就做雪碧图， css雪碧图,用定位来做

 base64编码图片， 缺点：增加代码量

 合并 /JS/CSS

 尽量使用浏览器的缓存机制

4、css中 ~波浪号 +加号 ,逗号 > 大于号

>  子元素选择器

，

+   相邻兄弟元素选择器

~   同级元素选择器

空格  后代选择器

 

5、元素的隐藏

display: none

opacity: 0

visibility：hidden

v-if v-show

ts 与 js区别

 声明确定类型，之后不允许修改；

 始终先编译成js再运行

一旦一个变量被指定了某个数据类型，如果不经过强制转换，那么就是这个数据类型了

ts的好处：

类，接口的使用易于构建和维护

重构更方便

及早发现错误，编译时就能发现问题，不用等到运行

 

为什么推荐使用typescript

第一点，编译时就能检查出语法错误，代码类型错误

第二点，它提供了类，接口和模块易于构建组件和维护

然后就是不需要考虑运行环境

 

ts 异步方式

ts class interface接口怎么用的

typescript 引入类，它的特性有 构造器，属性，方法，可继承，封装，多态，抽象

vue2 vue3 中 v-if v-for 哪个优先级更高

 vue2中v-for优先级高于v-if，会先进行遍历，尽管只满足一个条件，也会全部遍历一遍

Vue3 中 v-if高于 v-for的

 

pc端技术亮点
原型链

 

改变this指向：
call apply bind

 

webpack怎么打包

 

v-if v-show

都可以控制元素的显示与隐藏

当对一个div进行显示或隐藏的时候，如果不改变他的状态的话就用v-if，如果频繁的改变状态就用v-show

v-if 会操作dom 隐藏的时候会对元素进行删除，显示进行添加

v-show只是通过css属性display:none/block 进行对DOM元素的显隐

 

// 虚拟节点就是一个对象，用来描述dom结构的
通过观察者模式，监听属性的变化，重新调用render方法，产生虚拟DOM，更新视图
watcher是每个组件自动创建了，，在Vue中页面渲染时使用的属性，需要进行依赖收集
组件的更新-->先取值 --> 取值之前先watcher --> this.getter 取值走get方法 ---> dep与watcher做关联

 

防抖操作： 无论你更新多少次，最后就执行一次 （不停的触发），重在clearTimeout(timer)

场景：登录按钮用户多次点击，短信验证码点击过多，会发送多次请求，需要防抖操作

平常改变窗口大小时，重新计算次数太频繁

节流：一定时间内只能触发一次，重在timer = null

场景：滚动事件，每隔一秒计算一次位置信息；浏览器播放事件，每隔一秒计算一次进度信息，

 

移动端h5与小程序的区别，技术上，代码开发

jQuery与Vue的区别

jquery总体来说是选取DOM对象，进行操作，数据与界面是在一起的

Vue 数据和视图层是分开的，对数据进行操作不需要选取DOM对象

请求头部携带

ts接口请求axios封装

 

PC端 前端进行数据请求有：普通的Ajax(json)请求，jsonp跨域请求，cors跨域请求，fetch请求

普通的Ajax(json)请求 和 jsonp跨域请求是默认携带cookie的，cors跨域请求 和 fetch请求默认不携带cookie。

因此当我们请求需要携带cookie时，我们就要对cors fetch请求方式进行特殊配置处理

 

 标准盒模型：包含 margin border padding content   box-sizing: content-box;

IE盒模型：box-sizing: border-box;

 文档声明 doctype 通常处于 HTML标签之前，就是告诉浏览器按照什么规范解析页面

 

webpack

插件 plugin loader

css-loader     对css样式进行处理

style-loader   

html-webpack-plugin 生成html文件

clean-wenpack-plugin 打包清理上一次项目生成的bundle文件

extract-text-webpack-plugin  将css生成文件，非内联

 

前端处理数据

1、采用懒加载+分页【使用虚拟滚动技术】  懒加载的实现主要是通过监听窗口的滚动，滚动到一定的可见区域，进行分页请求，加载数据

2、防抖函数 节流函数实现

虚拟滚动 分页 上拉加载等不同的方式进行优化，都是只渲染可见区域

 

移动端延迟解决方案：

出现的原因是移动端屏幕会双击缩放页面

第一种就是 禁用缩放，禁用默认的双击缩放行为可以去掉点击延迟 <meta name="viewport" content="user-scalable=no">

第二种就是 利用touch事件自己封装事件解决延迟

 

宏任务，微任务

数组的去重

数组对象的去重

深拷贝

组件间传值

vuex

计算属性

钩子函数