前端面试题

发表于2025-07-06|更新于2026-08-03|前端

|总字数:10.2k|阅读时长:38分钟|浏览量:

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'属性 ```html
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() 只作用于属性值，不能在媒体查询中使用。 举个例子：

```html
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超时了怎么办？


<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' }

文章作者: likepoems

文章链接: https://likepoems.com/archives/the-interview-questions-for-web-front-end/

html css javascript