前端优化

面试题

1

• 如何在页面上实现一个圆形点击区域

• viewport -

• meta viewport 相关 -

• 浏览器内核 - 26

• 图片优化: 懒加载 雪碧图(怎么更改) icon base64 webp

• 请求报文 响应报文

1. 请求协议 HTTP 请求地址

2. 请求方法 post

3. 请求头部

响应报文

1. HTTP响应报文也由三部分组成：响应行、响应头、响应体

• display: none; visibility: hidden 区别

• 清除内浮动和外浮动的方法

• css3 有哪些新特性: 10来个

• css3 新增伪类

• css3 动画: tranform (事件触发) animation(不需要事件)

• 如何美化 checkbox: -webkit-appearance: none

• rgba 和 opacity 区别

• 如何使用CSS实现硬件加速, GPU渲染

transfrom: translate3D(100, 0, 0): 写上Z轴 会使用伪 GPU渲染

will-change: 绝对的GPU渲染

• 闭包

• JavaScript基本数据类型 Object Number String Boolean Null undefinde Symbol

• 防抖 节流

所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，

则会重新计算函数执行时间。

所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数

oninput

sug 200ms 如果使用 防抖 只要用户在不停输入 并且输入间隔时间小于 200 取消上一次的

输入 不会触发后台

2

• bind apply call 区别

• 怎么判断一个对象的类型 Object.prototype.toString.call(对象)

• 原型链

• 箭头函数的特点

• == 和 ===的区别

• JSON.parse(JSON.stringify(object)) 深拷贝的局限性

• in hasOwnProperty 区别:

in 操作符用来判断某个属性属于某个对象 可以是对象的直接属性 也可以是通过 prototype 继承的属性

hasOwnProperty 当前属性必须是 直接属性

• cookie localstorage session

• 如何解决跨域: 代理 jsonp 后台设置请求头

• 事件代理: 1. 新插入标签没有事件 2. 减少内存占用

• 浏览器缓存

Expires: 2020.01:20 8:0 ajax(‘1.php’)

Cache-Control: max-age(30 * 60) 30分钟 8:00 8:29 -> 8.29 + 30 9:30

2小时 2小时之内你重新请求了一个接口 从你请求这个接口开始 重新计算2小时

协商缓存 If-Modified-Since 过期 2020.12.12 8.0

ajax(‘1.php’) -> 后台可以拿到过期时间 后台判断 不给返回新数据 300, 200

** 怎么做文件缓存

• 安卓 IOS通信方法

3

• 宏任务 setTimeout setInterval 微任务 Promise

同步任务 > 微任务 > 宏任务

• react key

• 在⽣命周期中的哪⼀步你应该发起 AJAX 请求 4

• shouldComponentUpdate 作用

• redux 中间件

• react 生命周期

• mvvm

• vue 生命周期

• vue 双向绑定原理 (暂时背)

• vuex

• v-if v-show 区别

• $route $router 区别

• vue 组件 data 为什么必须是函数

• (讲)

• git 文件夹

5

• 页面埋点 PV 点击 UV

sendPv({

‘baidu_sousuo_images’: ‘x1’

})

• 状态码

200 204

301 302 303

304: 使用本地的缓存 (强缓存 协商缓存)

400 401 403 404

500 501 503

7

• restful

/abc/aaa

post delete put get

• 如何判断数据类型 Object.prototype.toString

综合

• 浏览器内核

• cookie sessionStorage localstorage

• 图片优化