有关于浏览器的常见问题

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

1. 输入网址
2. DNS解析
   • 什么是DNS（域名系统）解析，经过解析主机名，最终获得主机名对应的IP地址。通俗的讲，咱们更习惯记住一个网站的名字，例如www.baidu.com而不是它的ip地址，DNS就至关于电话本，好比你要找百度，我就得翻翻个人电话本，找到对应的ip。ip简单粗暴理解就是服务器。
3. 创建TCP链接（三次握手四次挥手）
   1. 三次握手
   • 第一次握手：客户端将带有SYN（联机标识）发送给服务器
   • 第二次握手：服务器收到SYN后，给客户端发送一个ACK（确认标识）和SYN标识
   • 第三次握手：客户端收到SYN标识后，给服务器发送ACK标识创建链接，并开始传输数据
   2. 四次挥手
   • 客户端向服务器发送带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自行安装依赖，引用就行。

     //一、先安装依赖
     npm i js-cookie
     //二、在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用起来