【明年找到好工作】：面试题打卡第四天

# 前端优化手段

• 降低请求量：合并资源，减少HTTP请求数，minify/gzip压缩，webP，lazyLoad
• 加快请求速度：预解析DNS，减少域名数，并行加载，CDN分发
• 缓存：HTTP协议缓存请求，离线缓存 manifest，离线数据缓存localStorage
• 渲染：JS/CSS优化，加载顺序，服务端渲染，pipeline

---

# GET和POST的区别

• GET 参数通过URL传递，POST参数放在 request body 中

• GET 请求在URL中传递的参数是有长度限制的，而 POST 没有

• POST 比 GET 更安全

• GET 请求只能进行URL 编码，而 POST 支持多种编码方式

• GET 请求参数会被完整保留在浏览历史记录里，而 POST 的参数不会被保留

• GET 产生一个TCP数据包，POST 产生两个TCP数据包

对于 GET 浏览器会把 http header 和 data 一并发送出去，服务器返回数据

对于 POST 浏览器会先发送 header，再发送 data，服务器返回数据

---

# 301 和302的区别

• 301：永久重定向（被请求的资源已永久移动到新位置）
• 302：临时重定向（被请求的资源临时移动到新位置）

---

# HTML5 新增的元素

• 语义化标签：header、footer、nav、aside、section
• 表单：input增加了 color、email、data、range
• 存储：sessionStorage、localStorage、离线存储
• 多媒体：audio、vedio
• 地理定位
• canvas画布
• 拖放
• 多线程编程的web worker
• websocket协议

---

# 在地址栏里输入URL，到这个页面呈现出来，中间发生什么？

1、输入 url 后，需要通过 url 找到其服务器的 ip，为了找到该ip

2、浏览器会先寻找缓存，查看缓存中是否有记录（浏览器缓存 =》 系统缓存 =》 路由缓存）

3、若没找到，再次查找系统的 hosts文件 中是否有记录

4、最终没有，则查询 DNS 服务器，得到 ip 后

5、浏览器会根据 ip 以及端口号，构造一个 http 请求，并将这个请求封装在一个TCP包中

6、这包会经过传输层，网络层，数据链路层，物理层，最终到达服务器

7、服务器接收到该请求后，进行解析，返回相应的html给到浏览器

8、浏览器根据 html 来构建 DOM 树，如果在构建过程中遇到js脚本或外部js链接，则会停止DOM树，来执行和下载js代码，这就会造成阻塞

9、之后，根据外部样式，内部样式，内联样式构建一个CSS对象模型树CSSOM树

10，构建完成后和 DOM 树合并为渲染树（这一步的操作只要是排除非视觉节点，比如script,meta以及displa为none的节点）

11、最后进行布局（确定各个元素的位置和尺寸）

12、由于hrml 文件可能存在图片，视频，音频等资源，在构建 DOM树 过程中，遇到这些都会进行并行下载。

13、浏览器对每个于的并行下载数量有一定的限制（4~6）

14、在这下载过程优化的过程中，就可能涉及到强缓存或协商缓存

---

# CSRF 和 XSS

XSS（跨站脚本攻击）是一种代码注入攻击，攻击者通过在目标网站上注入恶意脚本，使之在用户的浏览器上运行，获取敏感信息（Cookie、sessionID）

CSRF（跨站请求伪造）攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨域请求，利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击网站执行某项操作的目的

XSS预防手段：对输入的URL以及参数进行过滤，过滤掉导致脚本执行的相关内容；对动态输入到页面的内容进行html编码，使脚本无法在浏览器中执行

CSRF防御手段：验证HTTP Referer字段；在请求地址中添加token并验证；在HTTP头中自定义属性并验证