有关于浏览器的常见问题

346 阅读11分钟

从输入url到展示的过程发生了什么。

  1. 输入网址
  2. DNS解析
    • 什么是DNS(域名系统)解析,通过解析主机名,最终得到主机名对应的IP地址。通俗的讲,我们更习惯记住一个网站的名字,例如www.baidu.com而不是它的ip地址,DNS就相当于电话本,比如你要找百度,我就得翻翻我的电话本,找到对应的ip。ip简单粗暴理解就是服务器。
  3. 建立TCP连接(三次握手四次挥手)
    1. 三次握手
    • 第一次握手:客户端将带有SYN(联机标识)发送给服务器
    • 第二次握手:服务器收到SYN后,给客户端发送一个ACK(确认标识)和SYN标识
    • 第三次握手:客户端收到SYN标识后,给服务器发送ACK标识建立连接,并开始传输数据
    1. 四次挥手
    • 客户端向服务器发送带FIN(结束标识),告知服务器即将断开;等待服务器确认。
    • 服务器收到结束标识(FIN)后,向客户端发送确认标识(ACK)。收到断开请求
    • 待数据传输完成后,服务器向客户端发送结束标识FIN,告知客户端可以断开。
    • 客户端收到结束标识后,向服务器发送确认标识ACK,然后断开连接。
  4. 客户端发送HTTP请求
  5. 服务器处理请求
  6. 服务起响应请求
  7. 浏览器显示HTML

HTTP和HTTPS

HTTP和HTTPS的区别

  1. HTTP:http是超文本传输协议,http协议是以明文的方式发送信息,如果黑客截取了浏览器和服务器之间的传输报文,就可以直接获取其中的信息。存在信息窃听、篡改、劫持的风险
  2. HTTPs:htpps是基于http上基础上添加了SSL,SSL对数据进行压缩、加密,使得数据传输更加的安全。

HTTP中的get和post请求的区别

  1. get:指的是从指定的资源请求数据。
  2. post:向指定的资源提交要被处理的数据。例如提交表单。
  3. get的参数通过url传递,长度也有限制,而post没有。
  4. post的参数通过请求体(request body)传递
  5. get的安全系数比post低,因为参数传递直接暴露在url中,所以不能用来传递敏感信息。
  6. get请求只能进行url编码,而post支持多种编码。

HTTP状态码

  • 1xx收到请求正在处理
  • 2XX该请求已被成功处理
    • 200 表示客户端的请求已被服务器正常处理
    • 204 客户端请求成功,但是服务器端没有资源返回
    • 206 范围请求
  • 3XX重定向,响应结果表明,浏览器需要执行某些特殊的处理以正确处理请求
    • 301永久重定向
    • 302临时重定向
    • 304该状态码表示客户端发送附带的请求条件时,服务器允许请求访问资源,但未满足条件的情况。

附带条件的请求指的是get方法的请求报文中包含If-Match,If-Modified-Since,If-None-Match,If-Range,If-Unmodified-Since 中任一首部。

  • 4XX客户端错误
    • 400 错误请求,表示该请求报文中语法错误
    • 401 未经授权
    • 403 资源不可用,服务器理解客户端请求,但拒绝处理它,由于权限的缘故。
    • 404 服务器没有找到该网址
  • 5XX服务器错误
    • 500 内部服务错误,有可能是前端请求参数传错,或者是服务器的问题
    • 503 服务器处于超负载或者是停机维护状态(服务器正忙)

为什么产生跨域?怎么解决

  1. 跨域产生的原因:因为浏览器的同源策略,在协议、域名、端口号不一样的情况下就会产生跨域。
  2. 跨域的解决方法。
    1. proxy代理
      • proxy原理:浏览器和服务器之间存在跨域问题,而服务器和服务器之间不存在跨域问题,所以浏览器将请求代理给自己的服务器,再由服务器发起和后端服务器发起请求。
    2. jsonp动态创建script
    3. CORS请求头

存储

  1. 为什么需要cookie和storage?
    • 因为http协议是无状态的,导致了服务器无法分辨是谁浏览了网页,为了维持用户在网站的状态。
  2. 我们经常需要对业务中进行一些存储,通常分为短暂性存储和持久性存储
    • 短暂性存储,我们只需要将数据存在内存中,只在运行时可用。
    • 持久性存储,浏览器可以存在cookie,localStorage/sessionStorage
      • cookie:通常存储用户的身份,登陆信息等等;http中自动携带,体积上限为4K,可自行设置过期时间。一般引用js-cookie,vue-cli自行安装依赖,引用就行。
      //1、先安装依赖
      npm i js-cookie
      //2、在main.js中引入
      import Cookie from 'js-cookie'
      //一般的使用方法
      this.Cookie.set('name','小可爱');//设置key为name;value为小可爱
      this.Cookie.set("age","20",{expires:7});//设置数据,并设置有效期为7天
      this.Cookie.get('name')//获取数据
      this.Cookie.remove('name')//删除数据
      
      • storage:不会在网络中进行传输,相对于cookie安全许多,但是storage是依赖cookie的。当我们访问一个站点时,服务器会为这个用户产生一个storage_id,并将这个id以cookie的形式发送给客户端。以后这个客户端的所有请求都会自动携带这个cookie。
      //storage的使用方法
      window.localStorage.setItem('key','value'); //存数据
      window.sessionStorage.setItem('key','value');
      window.localStorage.getItem('key');//获取数据
      
  3. cookie、localStorage、sessionStorage的区别。
    • cookie:存储数据在4k左右,每次都会携带http请求头中,一般由服务器生成,可以设置失效时间。如果由浏览器生成的话,默认是关闭浏览器失效。
    • localStorage:除非被永久清除,要不然永久保存。
    • sessionStorage:仅在当前会话有效,关闭浏览器或者页面被清除。
    • Storage的存储大小为5m,仅在浏览器中存储,不参与服务器中的通信。

内存泄漏和内存溢出

内存泄漏:

  • 内存泄漏是内存一直被占用,导致内存浪费,致使系统崩溃。
  • 内存泄漏的场景:
    • 意外的全局变量,无法被收回。
    • 定时器无法被正确关闭,导致所引用的外部变量无法释放
    • 闭包
    • 死循环

内存溢出:

  • 内存溢出是指内存不够用,内存泄漏堆积过多就会导致内存溢出。

前端网页性能的优化

页面上的优化

  • 减少HTTP请求
    • 合并js和cs文件
    • 使用icon 图标库
  • 减少DNS查询
  • 避免重定向
  • 利用缓存;缓存文件(比如图片)在本地存有副本,浏览器下次请求的时候可以从本地磁盘直接读取,而不会再次请求图片的url。
    • 强缓存:不用请求服务器,直接从缓存中获取资源。强缓存的设置是根据请求头的cache-control字段设置的;cache-control字段有以下属性
      • cache-control:max-age = xxxx,public
        • 客户端和代理服务器端都可以缓存资源
        • 客户端在xxx秒内的有效期内,如果有请求资源的需求直接读取,状态码返回200
        • 如果用户做了刷新,就像服务器发起http请求
      • cache-control:max-age = xxxx,private
        • 只允许客户端缓存资源,服务器端不可以
      • cache-control:max-age =xxxx,immutable
        • 客户端在xxxx秒的有效期内,如果有请求资源的需求,直接读取,状态码返回200
        • 即使用户做了刷新操作也不会向服务器发送http请求
      • cache-control:no-cache
        • 跳过强缓存,但是不阻碍设置协商,一般做了强缓存,只有强缓存失效了才会走协商缓存。设置了no-cache就不会走强缓存,每次请求都会询问服务器
      • cache-control:no-store
        • 不缓存,这个让客户端和服务器都不能缓存资源,也就没有所谓的强缓存和协商缓存了。
    • 协商缓存:向服务器发送请求;服务器根据这个请求头的一些参数(Etag和last-modified)来判断是否命中协商缓存,如果命中则返回304状态码,并带上新的请求头通知浏览器从缓存中读取资源。
  • 延迟加载
    • js延迟加载的方式
      • <script async></script>//只是用与外部脚本文件
      • 让js放在页面底部
    • 图片懒加载利用vue-lazyload插件
  • 预先加载
  • 减少Dom元素数量
  • 尽量减少iframe使用
  • 避免404错误
  • 减少页面的重绘和回流

服务器方面的优化

  • 使用CDN预解析;通过DNS预解析告诉浏览器未来我们可能从某个特定的URL获取资源,当浏览器真正使用到该域中的某个资源时就可以尽快的完成DNS解析。
  • 启用Gzip
  • 配置Etag
  • ajax使用get方法
  • 避免图片src为空

Cookie方面

  • 减少cookie、storage大小

css方面

  • 把样式放在中
  • 减少css表达式
  • 使用link代替@import
    • link属于HTML标签,而@import是css提供的,页面被加载时,link会同时加载,而@import引用的css会等到页面加载完再加载
    • @import只在IE5以上才能被识别,而link是HTML标签,没有兼容性问题。
    • link的权重高于@import
  • 雪碧图
    • 多个图片集合在一张的图片
    • 使用雪碧图可以减少网络请求次数。
    • 通过background-position去定位图片在屏幕的哪个位置

js方面

  • 把脚本放在页面底部
  • 使用外部的css和js
  • 移除重复脚本
  • 减少Dom操作

web前端兼容性问题总结

  • HTML获取id元素
    • FireFox:document.getElementById('idname')
    • ie:document.idname或者document.getElementById('idname')
    • 解决办法:统一使用document.getElementById('idname')
  • const问题
    • FireFox:可以使用var和const关键字定义变量
    • ie:只能使用var来关键字来定义变量
    • 解决办法:全部使用var来定义变量
  • window.location.href问题
    • FireFox和ie2.0版本下可以使用window.location.href;FireFox1.5下只能使用window.location
    • 解决办法:统一使用window.location
  • css鼠标移上变小手的问题
    • FireFox:不支持cursor:hand,支持cursor:pointer
    • ie:支持cursor:hand和cursor:pointer
    • 解决办法:统一使用cursor:pointer
  • ie6下图片下有空隙产生
    • 解决办法:改变html排版,或者img设置display:block;或者vertical-align:top
  • 1px的高度不同的问题
    • 利用flixeble.js解决。
      • 根据屏幕分辨率大小的不同,自动调整根元素html中的font-size,从而达到适配移动端。flixeble.js的原理是先获取设备的像素比,然后根据设备的像素比动态的设定viewpoint的值,让viewpoint的值(宽度)等于实际的设备物理宽度。
    • 利用伪类+transform解决
      • 给父级元素设定相对定位;position:relative,子元素利用伪类+绝对定位+transform:scale()解决。
      .parent{
          position:relative
      };
      .son::after{
          position:absolute;
          content:'';
          top:0;
          left:0;
          width:200%;
          height:200%;
          transform:scale(0.5);
          border:1px solid red;
          pointer-events:none //元素永远不会成为点击事件
      }
      
    • 利用媒体查询判断设备像素比值
       @midea screen and (min-device-pixel-ratio : 2){
           .son{
               border:0.5px solid red
           }
       }
       @midea screen and (min-device-pixel-ratio : 3){
           .son{
               border:0.33333px solid red
           }
       }
      
  • 解决移动端的适配问题
    • 在head设置meta
    <meta name = "viewpoint" content="width = device-width , initial-scale=1.0 , maximum-scale = 1 ,minimum-scale = 1 , user-scalable = no" />
    
    • initial-scale:初始的缩放比
    • maximum-scale:允许用户缩放的最大比例
    • minimum-scale:允许用户缩放的最小比例
    • user-scalable:no;不允许用户手动缩放

前端的安全性问题

  • XSS跨站脚本攻击是web浏览器攻击中最常见的一种。原理是通过**对网页注入可执行代码且成功被浏览器执行,达成有效的攻击目的。**一般有以下三种类型
    1. 反射性XSS;这种跨站代码一般存在于某一链接中,当被攻击者访问这些链接时,跨站代码就执行。攻击原理:通过给别人发送带有恶意脚本代码参数的URL,当URL被打开时,特有的恶意代码参数被HTML解析、执行。它的特点时非持久性,必须用户点击带有特性参数的链接才能引起。
    2. 存储型XSS:这种XSS用起来