前端面试题

发布于 2021-11-17  10,449 次阅读


1、第一组

1、jquery中的$是什么意思

在JQuery中,“$”就是jQuery的别称,是jQuery库提供的一个回传函数,定义为“选取”,是“selector”的缩写;语法“$ (selector)”,作用是根据“ ()”里的参数进行查找和选择html文档中的元素。

2、圣杯布局、等高布局写法

// 圣杯布局
<style>
    .father{
        padding: 0 300px 0 200px;
    }
    .son_left, .son_center, .son_right{
        position: relative;
        float: left;
        height: 300px;
    }
    .son_center{
        width: 100%;
        background-color: palevioletred;
    }
    .son_left{
        width: 200px;
        left: -200px;
        margin-left: -100%;
        background-color: papayawhip;
    }
    .son_right{
        width: 300px;
        margin-right: -300px;
        background-color: purple;
    }
</style>
<body>
    <div class="father">
        <div class="son_center">这是中间的盒子</div>
        <div class="son_left">这是左边的盒子</div>
        <div class="son_right">这是右边的盒子</div>
    </div>
</body>
// 等高布局
<style>
    .father{
        width: 800px;
        overflow: hidden;
        min-height: 200px;
        margin: 0 auto;
    }
    .son_left, .son_right{
        width: 400px;
        height: 100%;
        float: left;
        padding-bottom: 9999px;
        margin-bottom: -9999px;
    }
    .son_left{
        background-color: antiquewhite;
        font-size: 18px;
    }
    .son_right{
        background-color: palevioletred;
        font-size: 20px;
    }
</style>
<body>
    <div class="father">
        <div class="son_left">那是一个安静的晚上,一个人卧在摇椅上乘凉那是一个安静的晚上,一个人卧在摇椅上乘凉那是一个安静的晚上,一个人卧在摇椅上乘凉那是一个安静的晚上,一个人卧在摇椅上乘凉</div>
        <div class="son_right">那是一个安静的晚上,一个人卧在摇椅上乘凉那是一个安静的晚上,一个人卧在摇椅上乘凉那是一个安静的晚上,一个人卧在摇椅上乘凉那是一个安静的晚上,一个人卧在摇椅上乘凉那是一个安静的晚上,一个人卧在摇椅上乘凉那是一个安静的晚上,一个人卧在摇椅上乘凉那是一个安静的晚上,一个人卧在摇椅上乘凉那是一个安静的晚上,一个人卧在摇椅上乘凉那是一个安静的晚上,一个人卧在摇椅上乘凉</div>
    </div>
</body>

3、闭包是什么

有权访问另一个函数作用域中局部变量的函数

4、描述一下事件冒泡和事件委托

事件冒泡会从当前触发的事件目标一级一级往上传递,依次触发,直到document为止。 事件捕获会从document开始触发,一级一级往下传递,依次触发,直到真正事件目标为止。 事件委托就是通过操作父节点来间接操作子节点的方式

5、ajax的优点和缺点

优点:页面无刷新;支持异步通信;节省服务器带宽;兼容多种语言 缺点:对浏览器不兼容(不能回退);有安全隐患;对搜索引擎支持较弱;不适合移动端

6、http常见的8种状态码

1××:消息响应 2××:成功响应 3××:重定响应 4××:客户端错误 5××:服务器端错误

7、写一个数组去重的方法

<script>
    // 使用set方式
    let arr = [1, 1, 2, 2, 3, 4, 5, 6, 7, 4, 5, 8]
    let s = new Set([...arr])
    console.log(s);

    // 使用循环
    let arr = [1, 1, 2, 2, 3, 4, 5, 2, 1, 4, 5, 3]
    for (let i = 0; i < arr.length; i++) {
        for (let j = i + 1; j < arr.length; j++) {
            if (arr[i] == arr[j]) {
                arr.splice(j, 1)
                j--
            }
        }
    }
    console.log(arr);
</script>

8、清除浮动的几种方法

  • 在父节点这里设置overflow:hidden;
  • 在使用浮动的div下方添加一个空白div,设置样式为clear:both;
  • 通过设置伪类 div::after:{content: "";display: block;height: 0;clear:both;visibility: hidden;}

2、第二组

1、Element-UI打包后文件太大怎么处理

使用webpack进行项目打包,若打包后体积太大,则对图片或者代码进行压缩处理。

2、tcp和udp的区别

都是传输层协议;TCP是面向连接,可靠传输,效率低如http,ftp协议;UDP是无连接协议,不可靠传输,尽自己最大努力进行传输,效率高如IP电话,流媒体等

3、https如何加密的

采用 对称加密 和 非对称加密 结合的方式来保护浏览器和服务端之间的通信安全。 对称加密算法加密数据+非对称加密算法交换密钥+数字证书验证身份=安全

4、常见加密算法

md5哈希加密算法 即输入不定长度信息,输出固定长度128-bits的算法。经过程序流程,生成四个32位数据,最后联合起来成为一个128-bits散列。基本方式为,求余、取余、调整长度、与链接变量进行循环运算。得出结果。

5、websocket异常断链如何处理

异常断链的处理方式

6、项目开发流程

详细流程

7、如何解决移动端屏幕适配

  • 使用rem布局
  • 使用媒体查询
  • 使用响应式框架

8、常用的VUE插件

  • Axios(官方推荐的ajax数据请求的插件)
  • Vue-Router(vue路由管理插件)
  • Vuex(vue数据中心化状态管理插件)
  • Less(css预处理插件)
  • Sass(css预处理插件)
  • Element-Ui(饿了么ui插件)
  • Mint-ui(移动端ui插件)
  • swiper-vue(swiper的vue包)

9、Vue+Mui

为了达到更好的体验 我们可以使用 Mui 来实现更接近原生APP的体验

3、第三组

1、promise一般怎么用,功能有哪些

  • Promise 是异步编程的一种解决方案。promise是一个对象,从它可以获取异步操作的消息;promise有三种状态: pending(等待态),fulfiled(成功态),rejected(失败态);状态一旦改变,就不会再变。创造promise实例后,它会立即执行。
  • Promise可以解决:1.回调地狱,代码难以维护, 常常第一个的函数的输出是第二个函数的输入这种现象。2.promise可以支持多个并发的请求,获取并发请求中的数据。3.promise可以解决异步的问题,本身不能说promise是异步的

2、什么是闭包

有权访问另一个函数作用域中局部变量的函数就是闭包。

3、用过mockjs吗

mockjs 是一款模拟数据生成器,旨在帮助前端工程师独立于后端进行开发,帮助编写单元测试。提供了以下模拟功能: 1.根据数据模板生成模拟数据 2.模拟 Ajax 请求,生成并返回模拟数据 3.基于 HTML 模板生成模拟数据

4、echarts和canvas了解过或者用过吗

Echarts是一个使用 JavaScript 实现的开源可视化库,涵盖各行业图表,满足各种需求;canvas(canvas菜鸟教程)是HTML5新增标签,需要通过脚本进行绘图。

4、第四组

1、css3动画实现

CSS3 可通过@keyframes 动画名{}来定义动画,举个例子:

<style>
    div {
        width: 100px;
        height: 100px;
        background: red;
        position: relative;
        animation-name: divmove;
        animation-duration: 5s;
        animation-timing-function: linear;
        animation-delay: 2s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-play-state: running;
    }

    @keyframes divmove {
        0% {
            background: red;
            left: 0px;
            top: 0px;
        }

        25% {
            background: yellow;
            left: 200px;
            top: 0px;
        }

        50% {
            background: blue;
            left: 200px;
            top: 200px;
        }

        75% {
            background: green;
            left: 0px;
            top: 200px;
        }

        100% {
            background: red;
            left: 0px;
            top: 0px;
        }
    }

</style>

<body>
    <div></div>
</body>

效果图:
css3动画

2、typescript

TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准。 TypeScript 由微软开发的自由和开源的编程语言。 TypeScript 设计目标是开发大型应用,它可以编译成纯 JavaScript,编译出来的 JavaScript 可以运行在任何浏览器上。 详见typescript中文手册

3、异步请求数据的方法

  • 原生Ajax
  • jQuery中封装的Ajax
  • fetch
  • es6中的promise
  • es6中的async和await方法

4、mongodb与mysql数据不同步怎么处理

使用go-mysql-transfer工具进行数据同步

5、mongodb数据丢失怎么处理

采用增加mongo数据库的auth权限进行解决

6、WebSocket

websocket是HTML5的一个新协议,它允许服务端向客户端传递信息,实现浏览器和客户端双工通信。websocket弥补了HTTP不支持长连接的特点。

7、axios

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中

8、了解制作地图还有支付的api吗

  • 地图:百度地图api
  • 支付api

9、前后端分离的思想

在前后端分离的模式中,后端看不到项目里的页面,后端给前端提供接口,前端通过后端提供的接口进行也米娜的展示。核心思想是前端html页面通过ajax调用后端的restuful api接口并使用json数据进行交互。在前后端分离的应用模式中 ,前端与后端的耦合度相对较低。在前后端分离的应用模式中,我们通常将后端开发的每个视图都称为一个接口,或者API,前端通过访问接口来对数据进行增删改查。

10、什么是模块化

模块化开发是一种管理方式,是一种生产方式,一种解决问题的方案。一个模块就是实现特定功能的文件,有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块。

5、第五组

1、vue线上环境如何配置跨域,常见解决跨域的方式

在本地vue项目的根目录下创建vue.config.js并配置:

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: "",  // node后台接口域名
                secure: true,  // 如果是https接口,需要配置这个参数
                changeOrigin: true,  //是否跨域
                pathRewrite: {
                    '^/api': ''   //需要rewrite的
                }
            }
        }
    }
}

配置Nginx:

location / {
    try_files $uri $uri/ /index.html;
}
location /api/ {
    proxy_pass  node后台接口域名;
}

2、简单说一下React 16.8的hook

react16.8开始推出hooks,在兼容之前的类组件的同时,更加倾向于函数式编程。Hooks只能在函数组件(FunctionComponent)中使用,赋予无实例无生命周期的函数组件以class组件的表达力并且更合理地拆分/组织代码,解决复用问题。

3、js不知道小数长度的两个小数进行计算如何解决精度问题

var calcAdd = function (a, b) { //函数声明A+B 
    var aroot = a + "", broot = b + ""; //字符串化
    var as = aroot.split("."), bs = broot.split("."); //切割
    var afc = 0, bfc = 0; //定义默认值 A因子 B因子 factor
    var ret; //返回值
    try { //容错处理
        afc = as[1].length;//确定小数点后长度位
        bfc = bs[1].length;//同上
    } catch (e) { }//容错处理 但是缺省值上面生命已经包含 不需要catch后续处理 
    //   console.log(afc,bfc);//测试打印 因兼容IE8相关业务系统匀速选需要考虑 注释了部分代码 请无视
    ret = (Number(aroot.replace(".", "")) * Math.pow(10, bfc) + Number(broot.replace(".", "")) * Math.pow(10, afc)) + "";
    //将小数点去掉 然后将上文中获取的 小数后精度 作为10的乘方加入乘法 注意考虑数值大小问题是否超过js能处理的最大值
    return Number(ret.substr(0, ret.length - afc - bfc) + "." + ret.substr(ret.length - afc - bfc, ret.length));
    //将上述结果的小数点 按照上文获取的小数后精度 从后向前 增加小数点 同时将字符串数值化 
}

console.log(calcAdd(0.1, 0.2222)); // 0.3222

4、vue2+和vue3的区别

  • vue2.0和3.0的初始化就存在着一定区别,比如vue3.0可以在安装脚手架同时提前安装好一些项目开发必备的插件,并且3.0提供了可视化创建脚手架,可以更加方便的对插件和依赖进行管理和配置,同时两个版本的目录结构也是有些许差别的
  • 使用方式差不多,但许多底层方法有区别。比如生命周期,双向绑定等
  • Vue2中的双向绑定原理是利用ES5的一个API,Object.definePropert()对数据进行劫持、结合、发布订阅模式的方式来实现的。
  • Vue3中的双向绑定原理是利用ES6的ProxyAPI对数据代理,通过 reactive() 函数给每一个对象都包一层 Proxy,通过 Proxy 监听属性的变化,从而实现对数据的监控。相比Vue2中defineProperty只能监听某个属性,不能对全对象监听;Proxy还可以监听数组,不用再去单独的对数组做特异性操作,通过Proxy可以直接拦截所有对象类型数据的操作,完美支持对数组的监听。
  • Vue3还新增了一些内置组件和方法,比如vue3可以默认进行懒观察,使用Function-based API,setup函数,对与插件或对象的一个按需引入,Computed Value ,新加入了 TypeScript 以及 PWA 的支持等等…

5、forEach和map的区别

forEach()方法不会返回执行结果,而是undefined。也就是说,forEach()会修改原来的数组。而map()方法会得到一个新的数组并返回。

6、setTimeout时间精准么

不精准。由于JS是单线程的, setTimeout是异步执行函数。因此会先执行同步主线程, 再执行异步任务队列

7、promise三个状态

Promise的三种状态: pending、fulfilled、rejected(未决定,履行,拒绝),同一时间只能存在一种状态,且状态一旦改变就不能再变。

8、操作数组的方法

// 1、字符串方法(生成新数组,不影响原数据)
toString : 数组转字符串
join : 数组转字符串
split: 字符串转数组
// 2、添加和删除(堆栈方式,影响原数组)
push : 在末尾添加数组元素(返回添加后的数组长度)
unshift : 在头部添加数组元素(返回添加后的数组长度) 可添加多个
pop : 在尾部删除元素,无参数(返回删除的元素)
shift : 在头部删除一个元素,无参数(返回删除的元素)
// 3、排序方法
reverse : 倒序排列(影响原数组)
sort : 正/倒序排序/随机排序(影响原数组)
reverse : 倒序排列(不影响原数组)
sort : 正/倒序排序/随机排序(不影响原数组)
// 4、slice与splice
slice : 截取数组[开始,结束), 左闭右开,还可以将类数组转换为数组,不影响原数组
splice : 裁减/替换或新增数组元素(start, deletCount,…items),结合三个参数用法实现不同功能,影响原数组
// 5、查找方法
indexOf : 查找数组元素,返回第一个找到的元素下标,找不到返回-1
lastIndexOf: 查找数组元素,返回最后一个找到的元素下标,找不到返回-1
includes : 查找数组是否包含某一元素,包含则返回true,不包含返回false
find : 查找满足函数条件的第一个值,找不到返回undefined
findIndex : 查找满足函数条件的第一个值得下标,找不到返回-1
// 6、转换成数组
Array.of : 将一数值转化为数组
Array.from : 将类数组转化为数组
// 7、创建数组
let arr = []
let arr = new Array()
let arr = Array(3) // 创建长度为3的数组
let arr = Array(1,2,3) // 创建内容为[1,2,3]的数组
let arr = Array.of(1,2,3) // 创建内容为[1,2,3]的数组
let arr = Array.from(‘123’) //类数组转数组

9、Set 去重原理是什么

  • set() 函数中会先调用对象的 hash() 方法,获取 hash 结果;
  • 如果 hash 结果相同,用比较操作符 == (也就是调用函数 eq())判断二者的值是否相等;
  • 如果都相等,去重;否则,set() 认为二者不同,两个都保留到结果中。

10、axios和fetch的区别是什么

fetch是一个浏览器级别原生支持的api; axios 是一个封装好的插件

11、setTimeout回调函数中 用function 和 箭头函数分别打印的this 是什么

前者指向window,后者指向生效的对象。

12、for in 和 for of的区别

前者是es5方法,后者是es6方法。
前者遍历出来的是属性(index),后者是属性值(value)。

13、slice,splice的区别

slice : 截取数组[开始,结束), 左闭右开,还可以将类数组转换为数组,不影响原数组
splice : 裁减/替换或新增数组元素(start, deletCount,…items),结合三个参数用法实现不同功能,影响原数组

14、了解区块链么

初识区块链——用JS构建你自己的区块链

6、第六组

1、ES6新增了那些东西

ES6新特性

  • let、const与作用域(块级作用域)
  • 解构赋值
  • 原始值与引用值
  • 基本类型Symbol
  • Set与Map
  • 迭代器和生成器
  • 代理器Proxy
  • promise
  • module
    等等。。。

2、vuex有哪些方法

  • state:vuex的基本数据,用来存储变量
  • geeter:从基本数据(state)派生的数据,相当于state的计算属性,具有返回值的方法
  • mutations:提交更新数据的方法,必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。
  • action:和mutation的功能大致相同,不同之处在于 Action 提交的是 mutation,而不是直接变更状态。 Action 可以包含任意异步操作
  • modules:模块化vuex,可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,方便管理

3、vuex中异步操作为了什么

使用action来处理异步操作。

4、css3有哪些居中方法

  • 给div设置一个宽度,然后添加margin:0 auto属性.
  • 使用绝对定位
  • 利用flex布局
  • 未知容器的宽高,利用'transform'属性
    div{
    position:absolute;
    width:500px;
    height:300px;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%)
    background-color:pink;
    }

5、购物车是怎样操作的 ,用户登录怎么实现的

6、session和cookie区别

  • Cookie存储在客户端中,对客户端是可见的。而Session存储在服务器上,对客户端是透明的。
  • cookie不是很安全,本地可以直接读取

7、第七组

1、css的计算属性

使用calc()函数,calc() 只作用于属性值,不能在媒体查询中使用。
举个例子:

div {
   width: calc("Candyman " * 3);
   height: calc(20% + 3px)
}

2、Elemnet-ui的平均一行3个是怎么样实现的

使用栅格布局,24/3=8,如
<el-col :xs='24' :md="8"></el-col>

3、vue的路由是怎么写的

// 1、使用router-link标签
<router-link to="/">主页</router-link>
// 2、配置路由
{ path: "/", name: "hello", component: Hello }

4、后端给一个日期前端怎么变成中间是-的形式

使用时间格式化,将DataTime形式转变为普通字符串形式。

dateFormat(value) {
    let year = value.substr(0, 4)
    let month = value.substr(5, 2)
    let day = value.substr(8, 2)
    let hour = value.substr(11, 2)
    let min = value.substr(14, 2)
    let second = value.substr(17,2)
    return year + "-" + month + "-" + day + " " + hour + ":" + min + ":"+second
}

5、说三种提升页面加载的方法

  • CSS使用Sprites;
  • JS、CSS源码压缩、图片大小控制合适;
  • 网页Gzip;
  • CDN托管;
  • data缓存 ;
  • 图片服务器;

6、JS去重方法,关于this的指向

  • this指向
    全局—指向全局对象
    对象函数—指向当前对象
    全局函数—指向全局对象
    new实例化对象—指向新创建的对象
    call&apply—指向上下文传入的第一个

  • JS去重

// 1、set方式
function unique(arr) {
    return Array.from(new Set(arr))
}
// 2、for循环+splice
function unique(arr) {
    for (var i = 0; i < arr.length; i++) {
        for (var j = i + 1; j < arr.length; j++) {
            if (arr[i] == arr[j]) {
                arr.splice(j, 1)
                j--
            }
        }
    }
    return arr
}
// 3、for循环+indexOf
function unique(arr) {
    var newArr = []
    for (var i = 0; i < arr.length; i++) {
        if (newArr.indexOf(arr[i]) === -1) {
            newArr.push(arr[i])
        }
    }
    return newArr
}

7、ajax实现过程

function ajax(url, data, method, success) {
    // 异步对象
    var ajax = new XMLHttpRequest();
    // get 跟 post 需要分别写不同的代码
    if (method == 'get') {
        if (data) {// 如果有值
            url += '?' + data;
        }
        ajax.open(method, url);// 设置 方法 以及 url
        ajax.send(); // send 即可
    } else {
        ajax.open(method, url);
        // 需要设置请求报文
        ajax.setRequestHeader(Content-type,
            application/x-www-form-urlencoded)
        // 判断 data send 发送数据
        if (data) {
            ajax.send(data); // 如果有值 从 send 发送
        } else {
            ajax.send();// 没有值 直接发送即可
        }
    }
    // 注册事件
    ajax.onreadystatechange = function () {
        // 在事件中 获取数据 并修改界面显示
        if (ajax.readyState == 4 && ajax.status == 200) {
            success(ajax.responseText);
        }
    }
}
// 获取本地数据
ajax('bendi.txt', , get, function (res) {
    console.log(res);
})

8、第八组

1、webpack常用配置

https://blog.csdn.net/qq_42103673/article/details/116480615

2、vue中怎么实现代码复用,除了组件还有没有其他方式

1、在Vue中的页面使用组件封装
2、在Vue里只针对js功能(比如methods中的方法等)进行复用使用extends

3、webpack了解过吗,可以做什么?

webpack可以对项目进行打包,可以对代码、图片等进行压缩。

4、浏览器兼容有哪些,你常遇到的兼容有哪些

浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。常见的兼容性问题有:

  • js中的兼容性
1、事件对象的兼容
e = ev || window.event
2、滚动事件的兼容
scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
3、阻止冒泡的兼容
if (e.stopPropagation) { e.stopPropagation; } else { e.cancelBubble=true; }
4、阻止默认行为的兼容
if (e.preventDefault) { e.preventDefault; } else { e.returnValue = false; }
5、添加事件监听器的兼容
if (target.addEventListener) { target.addEventListener("click", fun, false); } else { target.attachEvent("onclick", fun); }
6、ajax创建对象的兼容
var xhr = null; if (window.) { xhr = new ; } else { xhr = new ActiveXObject("Microsoft XMLHTTP"); }
7、鼠标按键编码的兼容
function mouse (ev) { var e = ev || window.event; if (evt) { return e.button; } else if (window.event) { switch (e.button) { case 1: return 0; case 4: return 1; case 2: return 2; } } }
8、在IE中,event对象有x,y属性,Firefox中与event.x等效的是event.pageX,而event.pageX在IE中又没有
x = event.x ? event.x : event.pageX;
9、在IE下,event对象有srcElement属性,但是没有target属性;Firefox下,event对象有target属性,但是没有srcElement属性
var source = ev.target || ev.srcElement; var target = ev.relatedTarget || ev.toElement;
10、在Firefox下需要用CSS禁止选取网页内容,在IE用JS禁止
-moz-user-select: none; // Firefox obj.onselectstart = function {return false;} // IE
11、innerText在IE中能正常工作,但在FireFox中却不行
if (navigator.appName.indexOf("Explorer") > -1) { document.getElementById('element').innerText = "IE"; } else { document.getElementById('element').textContent = "Firefox"; }
12、在Firefox下,可以使用const关键字或var关键字来定义常量;在IE下,只能使用var关键字来定义常量
统一使用var 关键字来定义常量
  • 移动端的兼容性
1、禁止iOS弹出各种操作窗口
-webkit-touch-callout:none
2、禁止iOS和Android用户选中文字
-webkit-user-select:none
3、iOS下取消input在输入的时候英文首字母的默认大写
<input autocapitalize="off" autocorrect="off" />
4、Android下取消输入语音按钮
input::-webkit-input-speech-button {display: none}
5、在移动端修改难看的点击的高亮效果,iOS和安卓下都有效
* {-webkit-tap-highlight-color:rgba(0,0,0,0);}
6、iOS下input为type=button属性disabled设置true,会出现样式文字和背景异常问题
opacity=1;
7、input为fixed定位,在iOS下input固定定位在顶部或者底部,在页面滚动一些距离后,点击input(弹出键盘),input位置会出现在中间位置
内容列表框也是fixed定位,这样不会出现fixed错位的问题
8、移动端字体小于12px使用四周边框或者背景色块,部分安卓文字偏上bug问题
可以使用整体放大1倍(width、height、font-size等等),再使用transform缩放
9、在移动端图片上传图片兼容低端机的问题
input 加入属性accept="image/*" multiple
10、在Android上placeholder文字设置行高会偏上
input有placeholder情况下不要设置行高
11、overflow: scroll或auto;在iOS上滑动卡顿的问题
-webkit-overflow-scrolling: touch;
12、移动端click300ms延时响应
使用Fastclick,如:
window.addEventListener( "load", function { FastClick.attach( document.body ); }, false );
13、移动端1px边框问题
原先元素的border去掉,然后利用:before或者:after重做border,并transform的scale缩小一半,原先的元素相对定位,新做的border绝对定位
.border-1px{ position: relative; border:none; }
.border-1px:after{content: '';position: absolute; bottom: 0;background: #000;width: 100%; height: 1px;-webkit-transform: scaleY(0.5);transform: scaleY(0.5);-webkit-transform-origin: 0 0;transform-origin: 0 0; }
  • css中的兼容性
1、不同浏览器的标签默认的内外边距不同
*{margin: 0; padding: 0;}
2、图片加a标签在IE9中会有边框
img{border: none;}
3、IE6及更低版本浮动元素,浮动边双倍边距
不使用margin ,使用 padding
4、IE6及更低版本中,部分块元素拥有默认高度
给元素设置font-size: 0;
5、a标签蓝色边框
a{outline: none;}
6、IE6不支持min-height属性
{min-height: 200px; _height: 350px;}
7、IE9以下浏览器不能使用opacity
Firefox/Chrome/Safari/Opera浏览器使用opacity;IE浏览器使用filter
8、IE6/7不支持display:inline-block
{display: inline-block; *display: inline;}
9、cursor兼容问题
统一使用{cursor: pointer;}
10、IE6/7中img标签与文字放一起时,line-height失效的问题
文字和<img> 都设置 float
11、table宽度固定,td自动换行
table设置 {table-layout: fixed} ,td设置 {word-wrap: break-word}
12、相邻元素设置margin边距时,margin将取最大值,舍弃小值
不让边距重叠,可以给子元素加一个父元素,并设置该父元素设置:{overflow: hidden}
13、a标签css状态的顺序
按照link--visited--hover--active 的顺序编写
14、IE6/7图片下面有空隙的问题
img{display: block;}
15、ul标签在Firefox中默认是有padding值的,而在IE中只有margin有值
ul{margin: 0;padding: 0;}
16、IE中li指定高度后,出现排版错误
设置line-height
17、ul或li浮动后,显示在div外
清除浮动;须在ul标签后加<div style="clear:both"></div> 来闭合外层div
18、ul设置float后,在IE中margin将变大
ul{display: inline;} , li{list-style-position: outside;}
19、li中内容超过长度时,用省略号显示
li{ width: 100px; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; }
20、div嵌套p时,出现空白行
li{display: inline;}
21、IE6默认div高度为一个字体显示的高度
{line-height: 1px;} 或 {overflow: hidden;}
22、在Chrome中字体不能小于10px
p{font-size: 12px; transform: scale(0.8);}
23、谷歌浏览器上记住密码后输入框背景色为黄色
input{ background-color: transparent !important; } input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{ -webkit-text-fill-color: #333 !important; -webkit-box-shadow: 0 0 0 1000px transparent inset !important; background-color: transparent !important; background-image: none !important; transition: background-color 5000s ease-in-out 0s; }
24、CSS3兼容前缀表示

5、ajax超时了怎么办?

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <titile>超时与网络异常处理</titile>
    <style>
        #content {
            width: 400px;
            height: 200px;
            border: 1px solid rgb(4, 247, 25);
            border-width: 3px;
            margin: 20px 0 20px 0;
        }
    </style>
</head>

<body>
    <button type="button">提交</button>
    <div id="content"></div>
    <script>
        const btn = document.getElementsByTagName('button')[0];
        const res = document.getElementById('content');
        btn.onclick = function() {
            const xhr = new XMLHttpRequest();
            xhr.timeout = 2000;
            xhr.ontimeout = function() {
                alert('请求超时,请检查网络是否可用!');
            }
            xhr.onerror = function() {
                alert('你的网络开小差了,请重新连接网络试试');
            }
            xhr.open('GET', 'http://127.0.0.1:8080/delay');
            xhr.send();
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        res.innerHTML = xhr.response;
                    }
                } else {
                     return
                }
            }
        };
    </script>
</body>

</html>
const express = require("express");

const app = express();

// 模拟请求超时
app.all("/delay", (request, response) => {
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');

    setTimeout(() => {
        response.send('接收成功:模拟请求超时');
    }, 3000);
})

app.listen(8080, () => {
    console.log('正在监听8080端口');
});

6、你的项目觉得比较好的是哪个,讲一讲这个项目

主要介绍自己做了什么项目,前端和后端使用了什么技术,实现了什么功能的,大体模块有哪些?解决了什么问题。

7、做移动端的时候遇到了什么问题,之前是怎么和后台做交互的,用过token吗,用来干什么的,怎么设计登录的逻辑(结合token)

使用Vue做移动端,通过axios向后台交互。
用户输入自己的信息(用户名,密码,邮箱等),在提交时会判断当前当前页面的localStroage中是否存在token,如果存在登录成功,否则登录失败

8、怎么解决下拉之后被截断显示的问题,怎么提高一大堆东西要渲染的性能问题(很多张图片)

9、第九组

1、如何判断电脑端和手机端来适应不同的页面

  • 允许网页宽度自动调整
<meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">

这里表示网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%

  • 不适用绝对的尺寸,如10px。使用百分比或者auto属性值
  • 使用相对字体大小,如em,rem
  • 使用流动布局,即每个区域都是浮动的,不是一成不变的。
  • 使用媒体查询(建议)

2、vue传参有哪些

  • 路由传参
  • 组件传参

3、网站SEO搜索引擎该如何优化

有几个因素可以使网站搜索引擎友好,包括关键字、质量内容、标题、元数据等。网站需要这些因素才能被搜索引擎排名并因此被用户找到

4、如何看待vue

vue 是一套用于构建用户界面的渐进式框架,vue 的核心库只关注视图层,我们使用 vue 时完全可以像跟使用 js 一样,通过script标签导入即可使用,当我们的页面足够多时,可以逐步的引入 vue-router;当我们需要全局状态管理时,也可以再引入 vuex;当我们需要构建一个大型的 SPA 项目时,完全可以使用工具 vue-cli 来构建。

5、如何看待小程序

微信小程序采用 JavaScript、WXML、WXSS 三种技术进行开发,本质就是一个单页面应用,所有的页面渲染和事件处理,都在一个页面内进行,但又可以通过微信客户端调用各种接口,是数据驱动的架构模式,它的 UI 和数据是分离的,所有的页面更新,都需要通过对数据的更改来实现。
小程序分为两个部分 webview 和 appService 。其中 webview 主要用来展现 UI ,appService 有来处理业务逻辑、数据及接口调用。它们在两个进程中运行,通过系统层 JSBridge 实现通信,实现 UI 的渲染、事件的处理。

6、如何理解递归,一般应用场景在哪些地方

如果一个函数在内部调用自身本身,这个函数就是递归函数。
应用场景: 数组求和、数组扁平化、斐波拉契数列、数组对象格式化等。

10、第十组

1、电商核心点sku是前端购物车还是后端购物车

在大型的电商网站中,这些都是后端处理的。当然,前端也可以实现。

2、sku 规格与联动

各种属性的值选中后,SKU 填写表格进行变动,对属性、属性值的数量自适应,编辑时不因去掉勾选导致原有值不显示

3、每个商品有不同的规格和不同的筛选条件是怎么做的

可以将不同的筛选条件定义在一个对象中,传入后端进行判断和查询

4、rem适配原理, 根据font-size为什么可以实现这个效果

em作为font-size的单位时,其代表父元素的字体大小,em作为其他属性单位时,代表自身字体大小。
rem作用于非根元素时,相对于根元素字体大小;rem作用于根元素字体大小时,相对于其出初始字体大小。举个例子:

/* 作用于根元素,相对于原始大小(16px),所以html的font-size为32px*/
html {font-size: 2rem}

/* 作用于非根元素,相对于根元素字体大小,所以为64px */
p {font-size: 2rem}

5、不同屏幕大小想要更精确的控制,有哪些方法

使用媒体查询或者响应式框架

6、怎么更精确的适配到不同屏幕 有哪些方案

使用固定的长和宽
使用百分比
使用媒体查询

7、逻辑像素和物理像素观念、关系是怎么样的

物理像素指的是设备的实际像素,这个主要由设备自身的硬件所决定,因此同一类型的设备物理像素是固定的。
逻辑像素是相对于物理像素之后提出的一个概念,也被称为设备独立像素。指的就是我们在css中设置的像素。

8、阿里的flexible使用

flexible的作用是使页面可以适配不同移动终端。
在页面html标签上添加style = "font-size: 36px;"样式,设置字体大小是屏幕宽度的十分之一。然后页面布局使用rem单位。
使用npm install lib-flexible --save进行安装。
在main.js中引入:import lib-flexable;
在html页面中添加移动端兼容代码:
<meta name="viewport" content="width=device-width, initial-scale=1.0">

9、高清屏和普通屏的区别是什么

同样的尺寸,分辨率不同,导致的实际效果不一样

10、图片懒加载的实现 ,原理是什么

图片懒加载是前端页面优化的一种方式。原理是优先加载可视区域的内容,其他部分等进入了可视区域再加载,从而提高性能。

11、预加载和懒加载的区别

预加载图片指的是:提早加载图片,当用户须要查看时可直接从本地缓存中渲染。
懒加载图片指的是:先在页面中把全部的图片统一使用占位图进行占位,把正真的路径存在元素的“data-url”属性里,要用的时候就取出来。

12、浏览器的缓存机制

浏览器缓存通过 HTTP/HTTPS 实现,存储位置有四种:
Service Worker(运行在浏览器背后的独立线程,必须是https才可以)
Memory Cache(内存缓存)
Disk Cache(硬盘缓存)
Push Cache(推送缓存)

13、cookie怎么工作的

由服务器产生内容,浏览器收到请求后保存在本地;当浏览器再次访问时,浏览器会自动带上cookie,这样服务器就能通过cookie的内容来判断这个是“谁”了。

14、基于cookie的session的状态同步是怎么做的

session是基于cookie的。在数据库中存储session,而不是存储在内存中,可以解决重启服务器后session就消失的问题。

15、token ,session 的区别是什么

token存储与客户端,session 是基于 cookie 实现的,session存储于服务端,sessionId 会被存储到客户端的cookie 中。

16、登录过后怎么保存登录状态

将登录信息存入session中。
使用cookie。
使用本地存储或会话存储。

17、const申明出来的常量有什么特性

申明的常量不可更改,申明的对象可以修改属性。

18、解构的时候重命名怎么做

let obj = {
    name:'Tom',
    age:24,
}
let {name:n} = obj;
console.log(n);  //Tom

19、用const定义的常量如果是对象的话,这个对象的属性属性可以改变吗?为什么

可以修改。const指针指向一个地址,地址不可变地址内容可变。
对象是引用类型的。const仅保证指针不发生变化,修改对象的属性不会改变对象的指针。

20、会封装promise吗? 工作机制是什么

Promise 对象用于表示一个异步操作的最终完成(或失败),及其结果值。Promise 一旦被创建,会立即执行,共有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。只有异步结果可以决定当前是哪一种状态,状态一旦被确定就再也不会更改。也就是说, Promise 对象状态的更改只有两种可能:从 pending 变为 fulfilled 和从 pending 变为 rejected。

21、下拉加载无限滚动什么怎么实现,原理是怎样的

首先预先加载一部分内容,并显示出滚动条。
监听浏览器滚动条。
当滚动条快到浏览器底部的时候,触发请求。
加载新的页面

<script>
   var bodyObj=document.documentElement||document.body;
   scrollTop=bodyObj.scrollTop,
   browseHeight=bodyObj.clientHeight||window.innerHeight;
   window.onscroll=function(){
       var currentScrollTop=bodyObj.scrollTop,
       pageHeight=bodyObj.scrollHeight;
       document.title=currentScrollTop+"|"+browseHeight;
       if(pageHeight-(browseHeight+currentScrollTop)<100){
          document.title="到底部了!";
       }else{
           document.title="还没有到了!";
       }
   }
</script>

22、自己封装过轮播图没有,原理是什么

23、引用数据类型(object)和基本数据的区别是什么

基本数据类型指的是简单的数据(栈),引用数据类型指的是有多个值构成的对象(堆)。所有在方法中定义的变量都是放在栈内存中,随着方法的执行结束,这个方法的内存栈也自然销毁。javascript的引用数据类型是保存在堆内存中的对象。与其他语言的不同是,不可以直接访问堆内存空间中的位置和操作堆内存空间。只能操作对象在栈内存中的引用地址。

24、什么是赋值什么是深拷贝什么是浅拷贝

赋值:当我们把一个对象赋值给一个新的变量时,赋的其实是该对象在栈中的地址,而不是堆中的数据。也就是两个对象指向的是同一个存储空间,无论哪个对象发生改变,都会改变存储空间的内容。
深拷贝:从堆内存中开辟出来一个新的区域存放新对象,对对象中的子对象进行递归拷贝,拷贝前后的两个对象互不影响。
浅拷贝:重新在堆中创建内存,拷贝前后对象的基本数据类型互不影响,但拷贝前后对象的引用类型共享一块内存,会相互影响。

25、深拷贝和浅拷贝的区别和实现原理

let person = {
    name: 'TOM',
    age: 12,
    sex: 'boy'
}
// 赋值
let person2 = person;
person2.name = '小明';
console.log(person2, person)
// { name: '小明', age: 12, sex: 'boy' } { name: '小明', age: 12, sex: 'boy' }

// 浅拷贝
function shallowCopy(object) {
    var target = {}
    for (const key in object) {
        if (object.hasOwnProperty(key)) {
            target[key] = object[key]
        }
    }
    return target
}
let person3 = shallowCopy(person);
person3.name = '小红';
console.log(person3, person);
// { name: '小红', age: 12, sex: 'boy' } { name: '小明', age: 12, sex: 'boy' }

// 深拷贝
function deepClone(object) {
    var cloneObj = new object.constructor()
    if (object === null) return object
    if (object instanceof Date) return new Date(object)
    if (object instanceof RegExp) return new RegExp(object)
    if (typeof object !== 'object') return object
    for (const key in object) {
        if (object.hasOwnProperty(key)) {
            cloneObj[key] = deepClone(object[key])
        }
    }
    return cloneObj
}
let person4 = deepClone(person);
person4.name='Marry';
person4.sex = 'girl';
console.log(person4,person);
// { name: 'Marry', age: 12, sex: 'girl' } { name: '小明', age: 12, sex: 'boy' }

活的像诗一样