前端常见面试题（十八）@郝晨光

---

手写promise封装axios

其实，axios本身就是基于Promise进行封装的，我们之所以进行二次封装，主要是为了能够对错误信息进行一个集中的处理，根据不同的错误信息，需要给用户不同的提示，以便于给用户一个良好的操作体验。
封装方法有很多种，基于class类的，基于构造函数的，也可以直接封装一个函数。
具体按照个人习惯，最主要的还是要对后端给我们返回的状态码或者状态值进行判断，如果成功，则直接resolve数据，否则的话，对不同的错误信息做出不同的操作即可。

封装方法

/**
 * @function request 二次封装ajax请求函数
 * @param {Object} options 对象形式配置参数
 * @param {String} options.url 请求路径
 * @param {String} [options.method=GET] 请求方式
 * @param {Object|String} [options.params] GET请求携带数据
 * @param {Object|FormData} [options.data] POST请求携带数据
 * @param {Object} [options.headers] 请求头
 * @return {Promise}
 * */
function request(options) {
    const defaultOptions = {
        method: 'GET',
    };
    options = Object.assign(defaultOptions, options);
    return new Promise((resolve, reject) => {
        axios(options).then(res => {
            // 此处对后台返回的状态值进行二次判断，可能是状态码，也可能是状态值
            // 根据实际项目不同，后端人员不同，返回的值不同
            if(res.data.success) {
                resolve(res.data);
            // 否则的话是错误状态，后端人员会给一个错误信息
            // 我们需要针对不同的错误执行不同的操作，给用户不同的提示
            }else if(res.data.msg) {
                // 执行操作
            }
        }).catch(err => {
            // 如果错误的话，直接返回错误
            // 也可以对错误进行一些处理
            reject(err);
        })
    })
}

调用方法

request({
    url: 'http://www.haochenguang.cn',
    method: 'get',
}).then(res => {
    // 接收返回成功的结果
}).catch(err => {
    // 接收返回失败的结果
})

---

详述前端性能优化的手段

前端优化的目的

1. 优化可以使页面加载的更快，用户体验更加流畅，提升用户体验度。
2. 优化可以有效的减少带宽，减少HTTP请求，减轻服务器压力，节省资源。

优化方式

从HTTP请求方面优化

1. 合并压缩CSS样式；
2. 合并压缩JS文件；
3. 使用Sprites雪碧图；
4. 使用base64格式的图片，将图片内嵌到页面中；
5. 图片懒加载
6. JS文件放置在body底部或者异步加载；
7. 对JS文件实行懒加载；
8. 将CSS文件放置在head内，保证用户体验；
9. 避免多页面之间的重复资源引用；
10. 减少不必要的HTTP跳转或重定向；
11. 使用CDN来代替本地静态资源；
12. 使用gzip压缩。

从代码方面优化

1. 避免在document上直接进行频繁的DOM操作
2. 使用classname代替大量的内联样式修改
3. 对于复杂的UI元素，设置position为absolute或fixed
4. 尽量使用css动画
5. 使用requestAnimationFrame代替setInterval操作
6. 适当使用canvas
7. 尽量减少css表达式的使用
8. 使用事件代理
9. 避免图片或者frame使用空src
10. 在css属性为0时，去掉单位
11. 禁止图像缩放
12. 正确的css前缀的使用
13. 移除空的css规则
14. 对于css中可继承的属性，如font-size，尽量使用继承，少一点设置
15. 缩短css选择器，多使用伪元素等帮助定位

image

更加详细的优化解析：
前端性能优化常用总结
前端性能优化方法总结

---

浏览器输入网址回车发生了什么

简洁回答：

1. DNS 解析:将域名解析成 IP 地址
2. TCP 连接：TCP 三次握手
3. 发送 HTTP 请求
4. 服务器处理请求并返回 HTTP 报文
5. 浏览器解析渲染页面
6. 断开连接：TCP 四次挥手

关于浏览器输入网址回车后发生了什么这两篇文章写的特别好，我就不献丑了。
从URL输入到页面展现到底发生什么？
从输入url到页面展示到底发生了什么@小四

---

列举你知道的浏览器内核

浏览器	内核
Google chrome 谷歌浏览器	Blink内核
Firefox 火狐浏览器	Gecko内核
IE浏览器	Trident内核
Opera 欧朋浏览器	Blink内核
Safari 苹果浏览器	Webkit内核

---

如果本文对您有帮助，可以看看本人的其他文章:
前端常见面试题（十七）@郝晨光
GitHub创建项目并添加协作者@郝晨光
TypeScript入门学习@郝晨光

结言

感谢您的查阅，本文由郝晨光整理并总结，代码冗余或者有错误的地方望不吝赐教；菜鸟一枚，请多关照