招银网络科技前端电话面

电话面 2020-6-29

首先让我做个简短的自我介绍，对前端掌握到何种程度，有没有做过前段相关的项目，如果做过的话在里面负责什么内容。

然后问我前端学了多久。

之后就开始问基础问题，下面的答案是我事后整理出来的参考答案，不是我当时的回答。

1. CSS里不同权重如何排序？

首先按照来源排序，从高到低依次为：
用户自定义的带有 !important 标记的声明；
开发者编写的带有 !important 标记的声明；
开发者编写的常规声明；
用户自定义的常规声明；
浏览器默认声明；

来源相同的情况下：
行内样式 > ID选择器 > 类选择器、属性选择器、伪类选择器 > 元素选择器、伪元素选择器。

前两项规则无法决出胜负时，写在后面（即一页代码的下面）的声明权重大于写在前面的。导入的样式表（即@import）一律视为插入在一个css文件的最前面，所以优先级低于直接写在当前文件中的声明。

2. 对回流和重绘有了解吗？二者有什么区别？

当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建渲染树。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程称为重绘。

当渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color、color，称为重绘。

回流必将引起重绘，而重绘不一定会引起回流。
比如：只有颜色改变的时候就只会发生重绘而不会引起回流
当页面布局和几何属性改变时就需要回流。
比如：添加或者删除可见的DOM元素，元素位置改变，元素尺寸改变——边距、填充、边框、宽度和高度，内容改变。

为了得到更高的性能，我们应该尽量避免或减少回流的产生。

3. 什么是同源策略，如何实现跨域？

所谓同源就是要求协议、域名、端口相同。非同源的脚本不能访问或者操作其他域的页面对象(如DOM等)。如果缺少了同源策略, web的安全将无从谈起。

跨域有如下几种方法：
使用代理
JSONP
postMessage
CORS 跨域访问
document.domain + iframe
location.hash + iframe
window.name + iframe

这一块内容比较多，大家可以自行搜索相关文章学习。

4. HTTP和HTTPS的区别。SSL是在哪一层加密的？

HTTPS 即 HTTP over SSL，顾名思义也就是基于SSL安全套接字层的HTTP。
相比于HTTP来说，HTTPS更安全，因为HTTP在传输时使用明文传输，而SSL层可以起到加密的作用。
HTTPS默认使用443端口，HTTP默认使用80端口。
对于服务器端来说，使用HTTPS需要向CA（Certification Authority， CA）购买证书，付出额外的经济成本。
在SSL更新到3.0时，IETF对SSL3.0进行了标准化，标准化后的SSL更名为TLS(Transport Layer Security，安全传输层协议)。
SSL可以理解为是在传输层和应用层之间，技术上来说属于应用层。
如果感兴趣可以自行了解SSL的具体原理，此处暂时省略。

5. 简述从用户将URL输入浏览器到网页加载完成的整个过程。

DNS解析：浏览器首先依次在浏览器缓存->系统缓存->路由器缓存中查找有无该域名对应IP地址的记录，缓存中没有则查找系统的hosts文件中是否有记录，如果没有则查询DNS服务器。
通过三次握手与目标服务器建立TCP连接。
浏览器构造HTTP请求。
将HTTP报文封装到一个TCP报文段当中，依次经过传输层、网络层、链路层、物理层将报文送达至服务器。
服务器收到请求后进行处理，然后返回一个响应报文给客户端。
浏览器得到HTML后构建DOM树，途中如果发现其他资源，会再次向服务器请求。这个过程可以通过建立HTTP长连接或使用Websocket协议代替HTTP协议来避免。
浏览器得到CSS文件后构建CSSOM树，再根据DOM树和CSSOM树构建渲染树，将页面呈现在显示器上。
如果在DOM树的构建过程中遇到JS脚本，则该过程会被阻塞，直到JS脚本下载并执行完成，除非引入JS脚本时设置了defer和async属性。（如果提到这点的话建议顺便看一下defer和async的区别，面试官可能会继续深入提问）

6. 如何实现div中图片居中？

水平居中：
①：为图片设置任意宽度，水平外边距设为auto，如:

#image {
    width: 200px;
    margin: 0 auto;
}

②：图片设为绝对布局，left值设为50%，左外边距设为负的一半宽度。如：

#image {
    position: absolute;
    left: 50%;
    width: 200px;
    margin-left: -100px;
}

③：设置父元素的display为table-cell，text-align为center（不推荐）：

#container {
    display: table-cell;
    text-align: center;
}

④：将父元素设置为flex容器（比较好的方法）：

#container {
    display: flex;
    justify-content: center;
}

垂直居中：
①：图片设为绝对布局，top值设为50%，上边距设为负的一半高度，如：

#image {
    position: absolute;
    top: 50%;
    height: 200px;
    margin-top: -100px;
}

②：设置父元素的display为table-cell，子元素的vertical-align为middle（不推荐）

#container {
    display: table-cell;
}
#image {
    vertical-align: middle;
}

③：将图片的height和父元素的line-height设为相同值（应用场景有限）：

#container {
    line-height: 100px;
}
#image {
    height: 100px;
}

④：将父元素设为flex容器（推荐）：

#container {
    display: flex;
    align-items: center;
}

7. HTTP常见状态码有哪些？

首先我们可以按照大类来区分。
1开头的都是信息提示类状态码；
2开头的都是成功类状态码；
3开头的都是重定向类状态码；
4开头的都是客户端错误类状态码；
5开头的都是服务器错误类状态码。

实际上目前有定义的状态码也没有多少，加起来可能也就三四十个。

200 OK
成功最常见的
301 Moved Permanently
要查找的资料已经永久移动到一个新地址，同时应该在Location首部中包含新地址。
302 Found
303 See Other **
这两个的作用类似，都是告诉用户代理要访问的资源临时改变了位置，这次使用Location首部提供的URL，将来仍然使用老的URL。而且如果是POST请求收到这两个状态码的响应，应该改为使用GET方法（但是浏览器不见得会遵守这个要求）。之所以有两个类似作用的不同状态码，是为了兼容HTTP/1.0协议。（HTTP权威指南上看的，不保证正确性，逃……）
**307 Temporary Redirect
也是临时使用新的URL，以后仍然用老的，和303的区别在于307要求如果原来是POST方法，新的请求仍然使用POST方法。
304 Not Modified
这个也很常见，应该都知道。资源没有被更改过，告知用户代理使用缓存即可。
403 Forbidden
因为某种原因请求被服务器拒绝了。
404 Not Found
这个太常见了。

8. 前端常见的优化性能的方法。

最基础的，CSS放在<head>里，JS放在最后，因为浏览器需要先构建CSSOM树才能构建渲染树进而加载页面，而JS的执行过程会阻塞页面加载。
CSS/JS 合并打包
压缩静态资源
懒加载
预加载
服务端开启gzip压缩
使用缓存
尽量减少 iframe 使用
使用 CDN
添加 Expires 或 Cache-Control 响应头
避免图片 src 为空
减少 Cookie 大小
静态资源使用无 Cookie 域名
不要使用 CSS 表达式
各种JS异步