http和https基本概念
- http：超文本传输协议。用于从服务器传输超文本到本地浏览器的超文本传输协议。
- https: 安全性的ssl加密传输协议。
http和https的区别及优缺点
- http默认端口是80，https默认端口是443
- https缓存不如http高效，会增加数据开销
- https需要ca证书，费用较高
- https握手阶段比较费时，http无状态，连接简单
TCP三次握手
- 第一次握手：客户端发送syn包到服务器，进入syn_ent状态，等待服务器确认；
- 第二次握手：服务器收到syn包并确认，同时发送自己的syn包，服务器进入syn_recv状态；
- 第三次握手：客户端收到服务器的包，向服务器发送确认包ack，客户端和服务器进行established（tcp连接成功）状态，完成三次握手。
为什么需要三次握手（面试简答）？
- 第一次握手，客户端发送网络包，服务器收到，这样服务器确定客户端的发送能力是正常的
- 第二次握手，服务器发送网络包，客户端收到，这样客户端确定服务器的发送能力是正常的
- 第三次握手，这时服务器不确定客户端的接收能力，于是客户端发送网络包，服务器收到，这样服务器确定客户端的接收能力是正常的
三次握手的作用
- 确定客户端和服务器的接收和发送能力
- 指定自己的序列号，为可靠的传输做准备
从输入url到页面加载的全过程
在浏览器中输入url 查找缓存 DNS域名解析 建立tcp连接 发起http请求 服务器响应请求并返回结果 关闭tcp连接
TCP四次挥手
HTTP请求跨域问题
跨域原理
- 跨域：是指浏览器不能执行其他网站的脚本，由浏览器的同源策略造成。
- 同源策略：是指浏览器对JavaScript实施安全限制，只要协议，域名，端口有任何一个不同，都被当作是不同的域。
- 跨域原理：是指通过各种方式，避开浏览器的安全限制
解决跨域方案
- window.postMessage: h5新特性
- window.name: 浏览器窗口内载入所有的域名都是共享一个window.name
- CORS：跨域资源共享。服务器设置Access-Control-Allow-Origin的HTTP响应头，浏览器将允许跨域请求。
- document.domain：基础域名相同，子域名不同
- jsonp：只支持get，因为script只能用get请求，jsonp需要后端配合返回指定格式的数据。 proxy代理：目前常用方式，通过服务器设置代理。
cookie、sessionStorage、localStorage的区别
相同点：都是存储在客户端
不同点：
- cookie数据不能超过4k，sessionStorage和localStorage存储可以达到5m；
- cookie设置过期时间前一直有效，localStorage永久存储（浏览器关闭后数据不丢失，除非主动删除），sessionStorage数据在当前窗口关闭后自动删除
浏览器重绘和重排
重绘和重排的区别
- 重绘：当一个元素外观发生改变，但没有改变布局，重新把元素外观绘制出来的过程就是重绘。即某些元素外观被改变
- 重排：当dom的变化影响了元素的几何信息，浏览器需要重新计算元素的几何属性就是重排。即重新生成布局，重新排列元素。
触发重绘和重排的场景
- 添加、删除、更新dom节点
- display：none隐藏dom节点
- 移动或者给页面中的dom节点添加动画
- 调整窗口大小，滚动
- 改变字体
如何避免重绘和重排
- 不使用table布局，容易重新布局
- 集中改变样式
前端优化策略
- 减少http请求：建议先请求首屏数据，进行分批请求。
- 资源合并与压缩：尽可能对外部脚本，样式进行合并，对js，图片进行压缩。
- 骨架屏使用：让用户可以第一时间看到页面
- 懒加载：组件或图片进行懒加载处理
- 资源数据缓存：合理使用资源缓存
axios
- axios是一个基于promise的HTTP库，可以用在浏览器和node.js中
- 可以拦截请求和响应
- 可以转换请求数据和响应数据，并对响应回来的内容自动转出json类型的数据
- 安全性更高，客户端支持防御XSRF
axios常用方法 axios.get axios.delete axios.post axios.put
缓存
http缓存
- http缓存是将用户请求过的静态资源存储到电脑本地磁盘中.当再次访问时,可以直接从本地缓存中加载而不用去服务器请求.
- 浏览器缓存由后端配置,强制缓存优先于协商缓存
强缓存
强缓存通过http的response header的cache-control字段控制 强缓存步骤:
- 第一次请求文件,缓存中没有该信息,直接请求服务器
- 服务器返回请求文件,并且http的响应头中的cache-control为max-age=xxx
- 再次请求该文件时,判断是否过期,如果没有过期,直接读取本地缓存,如果过期就进行协商缓存
协商缓存
当请求文件的响应头的cache-control的值为no-cache,或者其值max-age过期时触发协商缓存 协商缓存步骤
- 请求资源时,同时比较本地该资源的ETag和服务器最新资源的ETag
- 如果资源没有被更新,返回304状态码,浏览器读取本地缓存
- 如果资源已经被更新,返回200状态码,浏览器获取服务器最新资源
浏览器缓存
cookie
描述参考以上: cookie、sessionStorage、localStorage的区别
webStorage
webStorage包括sessionStorage和localStorage.描述参考以上cookie、sessionStorage、localStorage的区别
