前端面试题---http+性能

悦悦妍妍
79 阅读2分钟

tcp和udp以及三次握手四次挥手\color{red}{tcp 和 udp 以及 三次握手 四次挥手}

www.bilibili.com/video/BV1kV… www.bilibili.com/video/BV18h…

ajax、axios、fetch区别\color{red}{ajax 、axios 、 fetch区别}

GET和POST的请求的区别\color{red}{GET和POST的请求的区别}

常见的HTTP请求头和响应头\color{red}{常见的HTTP请求头和响应头}

HTTP Request Header 常见的请求头：

  • Accept:浏览器能够处理的内容类型
  • Accept-Charset:浏览器能够显示的字符集
  • Accept-Encoding：浏览器能够处理的压缩编码
  • Accept-Language：浏览器当前设置的语言
  • Connection：浏览器与服务器之间连接的类型
  • Cookie：当前页面设置的任何Cookie
  • Host：发出请求的页面所在的域
  • User-Agent：浏览器的用户代理字符串

HTTP Responses Header 常见的响应头：

  • server:服务器名称
  • Connection：浏览器与服务器之间连接的类型
  • Cache-Control：控制HTTP缓存
  • content-type:表示后面的文档属于什么MIME类型 （multipart/form-data：文件上传 | application/json：服务器消息主体是序列化后的 JSON 字符串）

HTTP1.0和HTTP1.1有以下区别\color{red}{HTTP 1.0和 HTTP 1.1 有以下区别}

  • http1.0 默认使用非持久连接，默认没有Keep-alive的；而 http1.1 默认使用持久连接，Connection: keep-alive。http1.1 通过使用持久连接来使多个 http 请求复用同一个 TCP 连接，以此来避免使用非持久连接时每次需要建立连接的时延。

HTTP和HTTPS协议的区别\color{red}{HTTP和HTTPS协议的区别}

  • HTTPS协议需要CA证书，费用较高；而HTTP协议不需要；
  • HTTP协议是超文本传输协议，信息是明文传输的，HTTPS则是具有安全性的SSL加密传输协议；
  • 使用不同的连接方式，端口也不同，HTTP协议端口是80，HTTPS协议端口是443；
  • www.bilibili.com/video/BV1Tx…

浏览器中输入baidu.com并且按下回车之后发生了什么\color{red}{浏览器中输入 baidu.com 并且按下回车之后发生了什么}

  • 浏览器会判断所请求的资源是否在缓存里，如果请求的资源在缓存里并且没有失效，那么就直接使用，否则向服务器发起新的请求。
  • DNS解析：首先需要获取的是输入的 URL 中的域名的 IP 地址
  • 根据ip查询主机
  • TCP三次握手
  • 返回资源
  • 页面渲染
  • TCP四次挥手

http缓存\color{red}{http 缓存}

HTTP状态码\color{red}{HTTP状态码}

WebSocket和轮询\color{red}{ WebSocket 和 轮询}

加密的方式\color{red}{加密的方式}

优化白屏\color{red}{优化白屏}

  • cdn
  • 图片懒加载
  • ssr
  • 路由懒加载
  • 资源文件压缩
  • css剥离
  • 图片转字体图标或者选择性的base64
  • 减少回流与重绘（虚拟dom key）(浏览器会将所有的回流、重绘的操作放在一个队列中，当队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会对队列进行批处理。这样就会让多次的回流、重绘变成一次回流重绘。)
  • ⽤webpack来优化前端性能
// 图片懒加载
<div class="container"> 
  <img src="loading.gif" data-src="pic.png"> 
</div> 

<script> 
let imgs = document.querySelectorAll('img');
function lozyLoad() {
    let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    let winHeight = window.innerHeight;
    for (let i = 0; i < imgs.length; i++) {
        if (imgs[i].offsetTop < scrollTop + winHeight) {
            imgs[i].src = imgs[i].getAttribute('data-src');
        }
    }
}
window.onscroll = lozyLoad();

⽤webpack来优化前端性能

  • 压缩代码
  • 将引⽤的静态资源路径修改为CDN上对应的路径
  • Tree Shaking
  • Code Splitting  将代码按路由维度或者组件分块(chunk),这样做到按需加载

节流与防抖\color{red}{节流与防抖}

avatar
文章
阅读
粉丝