前端常见面试题（网络）

一个完整的 URL 是由哪几个部分组成的

1. protocol：
   protocal即协议，https是一种协议也是URL的开头部分
   协议包括FTP，HTTP，file等等
2. hostname:
   hostname 即主机名 指存放资源的服务器的域名系统(DNS)主机名或是IP地址
   如www.baidu.com关于域名和DNS在后面会有详细的介绍
3. port
   port即端口，省略时使用协议的默认端口 需要知道的几个端口号为：
   http协议默认端口：80
   https协议默认端口：443
   MySQL 默认端口：3306
4. path
   path即路径 由零或多个"/" 符号分隔开的字符串 一般用来表示主机的一个目录或文件地址 本例中 path为" /s "
5. query & parameters
   如本例中 查询的单词为hello
   query以?开头 传递 参数信息；参数可以为多个 并以 & 分隔开每个参数名和值以
   key=value的传递并呈现在url上
6. anchor
   anchor即锚点 指定了跳转到网页的哪个位置
   如本例中：https://www.baidu.com/s?wd=hello&rsv_spt=1#5就规定了跳转到网页锚点为5的位置
   锚点在URL的最后 以#开头

GET与POST区别

GET参数通过URL传递，POST放在Request body中。
GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。
GET请求会被浏览器主动cache，而POST不会，除非手动设置。
GET产生的URL地址可以被Bookmark，而POST不可以
GET在浏览器回退时是无害的，而POST会再次提交请求。
GET请求在URL中传送的参数是有长度限制的，而POST么有。

常见状态码

• 200
请求成功
• 301
被请求的资源已永久移动到新位置，通常会发送HTTP Location来重定向到正确的新位置。返回301请求码进行跳转被Google认为是将网站地址由 HTTP 迁移到 HTTPS 的最佳方法
• 302
请求的资源暂时驻留在不同的URI下面
• 304
服务端已经执行了GET，但文件未变化，资源缓存。
• 400 Bad Request
主要分为两种。
1、语义有误，当前请求无法被服务器理解。除非进行修改，否则客户端不应该重复提交这个请求。
2、请求参数有误。
• 401
当前的请求需要进行用户的验证。
• 403
403是HTTP协议中的一个状态码，可以理解为 没有权限访问此网站，服务器接收到了用户的请求，并理解了请求，但是拒绝为其提供服务
• 404
HTTP 404 即 Not Found
请求所希望得到的资源未被在服务器上发现
通常是因为，用户所访问的网页已经被删除被移动 或从未存在。
• 500
500状态码表示内部服务器错误，服务器遇到了不知道如何处理的情况。
• 502
此错误响应表明服务器作为网关需要得到一个处理这个请求的响应，但是得到一个错误的响应。
• 503
服务器没有准备好处理请求。 常见原因是服务器因维护或重载而停机。

HTTP协议和HTTPS协议的区别

1. https需要CA申请证书认证，付费
2. http使用TCP/IP进行通信，而HTTP增加了SSL/TLS作为应用层
3. 端口不一样，https是443，而http是80
4. https协议可以进行加密传输和身份认证，而Http是明文传输

从输入URL到页面加载发生了什么

1. DNS解析域名 转化为IP地址
2. TCP连接（三次握手）
3. 发送HTTP请求
4. 服务器处理请求并返回HTTP报文
   浏览器收到200的响应则表示找到对应资源
5. 浏览器解析渲染页面
6. 连接结束（四次挥手）

在第五步主要包括：

解析
浏览器会解析 HTML 成树形的数据结构DOM，生成 DOM Tree(深度遍历过程)，浏览器将CSS代码解析成树形的数据结构CSSOM，生成深度遍历过程。然后两者生成render tree

布局
有了Render Tree，浏览器知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。接着就开始布局，计算出每个节点在屏幕中的位置。

渲染
浏览器已经知道了哪些节点要显示、每个节点的CSS属性是什么、每个节点在屏幕中的位置是哪里。就进入了最后一步，按照算出来的规则，通过显卡，把内容画到屏幕上。
而 javascript 又可以根据 DOM API 操作DOM。比如JS修改了DOM或者CSS属性，也会重新触发布局和渲染的执行过程。

js代码可以访问和修改dom节点和css，所以在解析js的过程中会导致页面重新布局和渲染，这就是重绘（repaint）和回流(reflow)。

重绘

指css样式的改变，但元素的大小和尺寸不变，而导致节点的重新绘制。

重绘的触发
任何对元素样式，如background-color、border-color、visibility 等属性的改变。css 和 js 都可能引起重绘。

回流

回流（reflow）是指元素的大小、位置发生了改变，而导致了布局的变化，从而导致了布局树的重新构建和渲染。

回流的触发
dom元素的位置和尺寸大小的变化
dom元素的增加和删除
伪类的激活
窗口大小的变化
增加和删除class样式
动态计算修改css样式
当然，我们的浏览器不会每一次reflow都立刻执行，而是会积攒一批，这个过程也被成为异步reflow，或者增量异步reflow。但是有些情况浏览器是不会这么做的，比如：resize窗口，改变了页面默认的字体，等。对于这些操作，浏览器会马上进行reflow。

如何减少回流和重绘

1.将需要对DOM的多次操作进行合并（使用createDocumentFragment）
2.使用cssText属性或者切换类名实现样式的修改
3.缓存DOM查询 用变量保存在内存里
4.将需要多次重排的元素，position属性设为absolute或fixed，这样此元素就脱离了文档流，它的变化不会影响到其他元素。例如有动画效果的元素就最好设置为绝对定位
5.利用display:none隐藏元素，进行各种增删改元素的操作，操作完再使其可见，对display:none隐藏元素进行操作是不会引起回流的。下面代码只会在ul显示的时候（display:block的时候）进行一次回流。
6.使用css3硬件加速，可以让transform、opacity、filters这些动画不会引起回流重绘

如何理解浏览器内核？

主要分成两部分

渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

JS引擎：解析和执行javascript来实现网页的动态效果。

白屏时间
用户从打开页面开始到页面开始有东西呈现为止

首屏时间
用户浏览器首屏内所有内容都呈现出来所花费的时间

可交互时间
用户可以进行正常的点击、输入等操作，默认可以统计domready时间，因为通常会在这时候绑定事件操作

前端如何进行性能优化

网络请求的优化

1. 使用webpack或者gulp等打包工具对资源（js、css、图片等）进行打包、合并
2. 雪碧图
3. CDN
4. 懒加载
5. 缓存
6. 接口合并
   
   页面渲染性能的优化
7. CSS放在页面最上部，javascript放在页面最下面
8. 减少重绘和回流
9. 一些不改变dom和css的js 使用 defer 和 async 属性告诉浏览器可以异步加载，不阻塞解析