type
status
date
slug
tags
category
icon
password

浏览器常见的内核

  1. Trident
      • 由微软开发的浏览器内核,用于IE
  1. Gecko
      • 由Mozilla开发,用于FireFox
  1. Webkit
      • 由苹果开发,用于safari
  1. Blink
      • 由谷歌开发,是Webkit一个分支,用于Chrome,Opera
  1. Presto
      • 由Opera Sofeware开发,用于Opera
  1. EdgeHtml
      • 由微软开发,用于Edge

什么是xss攻击

  • 概述
    • xss攻击(跨站脚本攻击)是一种常见的web安全漏洞,攻击者通过向web应用程序注入恶意脚本,使得用户在访问页面时执行这些脚本,从而实现攻击目的,xss攻击可以分为存储型攻击类型、反射型攻击类型、DOM型攻击类型。
  • 存储型攻击
    • 存储型xss攻击是指攻击者将恶意脚本存储在web应用程序的服务端,当用户发起请求访问这些页面时,服务端会从数据库中取出带有恶意脚本的内容并返回给客户端浏览器,用户在浏览器端执行这些恶意脚本,从而造成安全问题。
  • 反射型攻击
    • 反射型xss攻击是指攻击者将恶意脚本作为参数传递给web应用程序,web应用程序将恶意脚本反射回浏览器端,用户在浏览器端执行这些恶意脚本,从而造成安全问题。
  • DOM型攻击
    • DOM型xss攻击是指攻击者利用web应用程序中的漏洞,将恶意脚本插入到页面中,当用户访问页面时,浏览器解析脚本并执行,从而实现攻击目的。
  • 防范xss攻击
    • 输入内容进行过滤
    • 输出内容进行编码
    • 使用安全DOM

什么是csrf攻击

  • 概述
    • csrf(跨站请求伪造)攻击是一种常见的web攻击方式,指攻击者通过设置陷阱,强制对已完成认证的用户在不知情的情况下执行某些操作,比如在用户已经登陆了银行网站后,攻击者诱骗用户点击一个链接或图片,使得用户在没有察觉的情况下进行了银行转账或修改密码等操作。
  • 攻击流程
      1. 用户在已登录的银行网站上浏览页面,此时该网站会为该用户设置cookie保存用户的认证信息。
      1. 攻击者诱骗用户点击一个链接或者打卡一个图片等,这个链接或图片会发起一个对银行网站的请求,但是这个请求并不是用户的意愿,而是攻击者构造的。
      1. 银行网站接收到这个请求,以为是用户发出的请求,由于已经保存了用户的认证信息,就会执行该请求对应的操作,比如转账。
  • 预防csrf攻击
      1. 使用验证码,确保请求是由人类发出的而不是自动脚本发出的。
      1. 检查refer头,确保请求是从正确的页面发出的,而不是从其他页面发出的。
      1. 在请求中添加一个token,这个token会在服务器端生成,并在页面上放置一个隐藏字段,每次请求都需要带上这个token才能完成。

报文加密

  • 概述
    • 报文加密是指在网络传输过程中,为了保证数据的机密性和完整性,对数据进行加密和验证。常用的报文加密包括对称加密和非对称加密。
  • 对称加密
    • 对称加密是指加密或解密使用相同的密钥,通信双方需要通信前约定密钥,在报文传输过程中,发送方使用密钥对报文进行加密,接收方使用统一密钥对报文进行解密,常见的对称加密有AES,DES等。
  • 非对称加密
    • 非对称加密是指加密和解密使用不同的密钥,包括公钥和私钥,在通信前接收方生成一对密钥,其中一个是公钥,另一个是私钥,将公钥发送给发送方,发送方使用接收方的公钥对报文进行加密,接收方使用私钥对报文进行解密,常见的非对称加密有SPA、ECC等。
  • 收敛
    • 报文加密可以有效地防止黑客窃取数据进行中间人攻击,保护数据安全。

进程和线程的区别

  • 概述
    • 进程和线程都是操作系统中用于执行代码的基本单位。
  1. 资源分配
      • 进程是资源分配的基本单位,每个进程都有独立的内存空间和系统资源
      • 线程是CPU调度的基本单位,同一进程的所有线程共享相同内存空间的和系统资源。
  1. 创建和销毁
      • 进程的创建和销毁需要消耗较多的系统资源,因为每个进程都需要独立的内存空间和系统资源,所以创建和销毁进程比较耗时。
      • 而线程的创建和销毁则比进程快速的多,因为线程共享进程的内存空间和系统资源。
  1. 切换开销
      • 在进程间切换,需要保持当前的进程状态并加载新进程的状态,这个过程需要花费较多时间,因为每个进程都有独立的内存空间和系统资源。
      • 而线程切换时,只需要保持线程的部分状态,因为线程共享相同的内存空间和系统资源,所以开销较小。
  1. 通信机制
      • 进程之间的通信需要通过ICP机制,比如管道,消息队列,信息量,共享内存等。
      • 而同一进程中的线程可以通过共享内存和全局变量等方式进行通信。
  • 收敛
    • 总之,进程和线程都是操作系统中用户执行代码的基本单位,它们之间的区别在于资源分配,创建和销毁,切换开销和通信机制等方面,在实际开发中,我们需要根据实际情况选择进程或线程来实现程序功能。

在进程之间的通信方式

  1. 管道
      • 一种半双工的通信方式,数据只能在一个方向上流动,常用于父子进程之间的通信。
  1. 命名管道
      • 也是一种半双工的通信方式,但是可以在多个进程之间使用。
  1. 信号
      • 用于进程之间的异步通信,是一种比较轻量级的通信方式,一般用于通知目标进程某个事件已发生。
  1. 共享内存
      • 将一块内存区域映射到多个进程的地址空间中,多个进程可以同时读写这个共享内存区域。
  1. 套接字
      • 是一种全双工的通信方式,可以在不同主机之间的进程通信。
  1. 消息队列
      • 是一种进程间的通信方式,可以通过系统调用发送消息到消息队列,也可以从消息队列接收消息
  1. 信息量
      • 用于进程之间对共享资源的访问进行同步,防止竞争条件的发生。
  1. 文件锁
      • 用于进程之间对共享文件的访问进行同步,防止竞争条件发生。

产生死锁的原因,如何解决死锁问题

  • 概述
    • 死锁是指两个或多个进程因争夺系统资源而造成的一种僵局,他们都在等待对方放弃已经持有的资源而无法继续执行,产生死锁的原因通常包括:
    • 资源竞争
      • 多个进程竞争同一资源,进程A持有该资源并等待进程B释放该资源,但是进程B在等待进程A释放它持有的资源。
    • 破坏资源占有和等待条件
      • 某个进程在运行时请求一些资源,但是因为该资源正在被其他进程持有而等待,此时该进程也持有一些资源,其他进程也需要这些资源,因此它们在等待彼此持有的资源被释放。
    • 破坏不可剥夺条件
      • 进程持有的资源不能被强制剥夺,只能在使用完后自行释放。
    • 破坏循环等待条件
      • 一组进程互相等待着对方持有的资源,形成一个环形等待的局面。
  • 解决死锁的方法
    • 预防死锁:需要遵循一定的规则,如不破坏资源占有和条件等待,不破坏不可剥夺条件,不破坏循环等待条件。
    • 避免死锁:避免死锁是在预防死锁的基础上增加一些额外的操作,如银行家算法,资源分配图。
    • 检测死锁:通过算法来判断系统是否已经出现死锁,资源分配图,银行家算法。
    • 解除死锁:撤销进程,资源抢占,资源回收。

浏览器缓存机制

  • 概述
    • 浏览器缓存机制是指浏览器对于已经请求过的资源进行缓存,以便下次再次请求资源时,可以直接从缓存中读取,避免重复的网络请求,从而提升网站的性能和用户体验。
  • 强缓存
    • 强缓存是指浏览器在第一次请求资源时,会将该资源缓存起来并在一定的时间内(通过设置响应头的Cache-Control或Expires字段)不再向服务器请求该资源,直接从缓存中获取,这种方式的优点在于快速加载,节省了网络资源,但缺点是无法及时更新资源,如果资源发生变化,浏览器可能无法获取到最新的版本。
  • 协商缓存
    • 协商缓存是指浏览器在第一次请求资源时,会将该资源的缓存标识(通过设置响应头中的ETag或Last-Modified)记录下来,并在下一次请求该资源时,带上这个标识发送给服务器,服务器根据这个表示判断资源是否发生了变换,如果没有发生变化,返回304状态码,告诉浏览器可以继续使用缓存中的资源,否则返回最新的资源,这种方式的优点是及时更新资源,缺点是需要向服务器发送请求,增加了网络开销。
  • 收敛
    • 在使用缓存策略时,需要根据实际情况选择合适的方式,并适当调整缓存时间,以达到最优的缓存效果。

浏览器的渲染过程

  1. 解析url
      • 浏览器会先解析输入的url,得到协议、主机、端口、路径等信息。
  1. 发送请求
      • 浏览器向服务器发送HTTP请求,请求页面的HTML、CSS、JS等资源
  1. 构建DOM树
      • 浏览器解析HTML文件内、构建DOM树,DOM树是一个树形结构,它将页面的HTML标签按照层级关系进行组织。
  1. 构架CSSOM树
      • 同上
  1. 合并DOM树和CSSOM树,生成一颗渲染树
  1. 布局
      • 渲染树构建完成后,浏览器会对页面上的所有元素进行布局,确定每个元素在页面中的位置和大小。
  1. 绘制
      • 根据渲染树和布局信息,浏览器开始绘制页面,生成一个像素点的位图。
  1. 加载js
      • 浏览器在绘制页面的同时会加载和执行js脚本。
  1. 执行js
      • 浏览器会根据js代码的顺序执行js脚本,并且会执行脚本过程中修改DOM树和CSSOM树,导致重新布局和绘制。
  1. 渲染完成
      • 当浏览器渲染页面完成后,就会将渲染后的位图显示在屏幕上。

浏览器渲染优化

  • 概述
    • 浏览器渲染优化是指通过一些技术手段来提高网络页面的渲染速度和性能,以提升用户的体验,以下是常见的优化技术:
    • 减少HTTP请求
      • 可以通过合并脚本和样式表,使用雪碧图等方式减少HTTP请求次数。
    • 压缩脚本和样式表
      • 可以使用工具将脚本和样式表压缩,以减少其文件的大小,从而提高页面的加载速度。
    • 使用cdn
      • 将资源存放在cdn上,可以使得资源能够更快的从距离用户较近的服务器上获取,从而提高页面加载速度
    • 减少页面元素数量
      • 可以通过删除不必要的页面元素,减少页面元素数量,以减轻浏览器的渲染负担,从而提高页面加载速度。
    • 使用浏览器缓存
      • 将页面中的静态资源缓存到本地,减少接口请求
    • 使用web workers
      • 将一些比较耗时的计算转后台线程中,避免阻塞
    • 使用css3代替js动画
      • css3由GPU渲染,性能bijs高
    • 图片懒加载
      • 减轻页面加载压力

浏览器本地存储方式及使用场景

  • Cookie
    • Cookie是浏览器本地存储的最早的一种方式,它可以存储一些较小的数据,并且在浏览器和服务器之间传递,Cookie的存储容量有限,一般不能超过4Kb,因此他适合存储一些较小的数据,如用户的登录状态。
  • Web Storage
    • HTML5新增的本能地存储方式,它包括两种存储方式:localStorage和SessionStorage,localStorage存储的数据在浏览器关闭后依然存在,而sessionStorage存储的数据在当前关闭会话窗口后被清除,存储容量为5Mb。
  • IndexDB
    • 是一种支持事务的NoSQL数据库,它可以在浏览器存储大量数据,并支持复杂的查询操作,存储容量可以达到几百MB,适合存储较大的数据集,如离线数据。
  • 使用场景
    • cookie
      • 用户的登录状态
      • 购物车信息
    • web Storage
      • 用户的浏览记录
      • 搜索记录
      • 表单数据
    • IndexDB
      • 离线数据
      • 音视频数据

cookie、localStorage、sessionStorage的区别

  • 存储大小
    • cookie存储量为4kb
    • 5MB
  • 数据存储时效
    • cookie可以设置过期时间
    • localStorage永久有效
    • sessionStorage会话窗口关闭
  • 与服务端通信
    • cookie会在HTTP中携带存储和传输数据
    • 只在客户端
  • 数据库存储范围
    • cookie可以被同源所有页面访问
    • 只能被创建窗口访问
  • 存储方式
    • cookie键值对,字符串
    • 键值对,JSON对象

什么是同源策略

  • 同源策略是一种安全策略,用于限制一个源的文件或脚本如何与不同源的资源进行交互,同源是指协议、域名、端口号都相同,只有在同源的情况下才能够共享资源,否则浏览器将会阻止页面的请求。

如何解决跨域问题

  • 概述
    • 在前端开发中,跨域问题是一个表较常见的问题,当浏览器在访问一个网站时,如果该网站所在的域名、协议、端口号不一致,就会跨域。
  • JSONP
    • 通过动态创建script标签,向跨域的域名发送请求,接口返回一个JSONP格式的回调函数,并把数据作为参数传递给该函数,从而实现跨域请求数据的一种方式。
  • CORS
    • 是一种跨域资源共享的机制,它允许浏览器向跨域服务器发送请求,从而解决了AJAX不能跨域请求的问题,在服务器配置一些响应头信息,就可以支持cors。
  • 代理
    • 在同源策略的限制下,我们可以在同一域名下设置一个代理服务器,将要请求的地址发送到该代理服务器,再由代理服务器去请求接口数据,然后将请求结果返回给前端页面。
  • postMessage
    • HTML5中引入的跨文档消息传递机制,postMessage可以实现在不同的窗口,甚至不同的域之间进行通信,从而实现跨域通信。
  • WebSocket
    • WebSocket是HTML5新增的协议,它可以在浏览器和服务器之间建立一条持久化的链接,可以实现双向通信,并且不受同源策略的限制,因此可以用来解决跨域问题。

事件流

  • 讲概念
    • JavaScript 事件流(Event flow)指的是浏览器处理事件的方式。
  • 详细说
    • 在 JavaScript 中,事件流分为三个阶段:捕获阶段、目标阶段和冒泡阶段。这三个阶段是从外到内,从父节点到子节点,再从子节点到父节点的顺序依次发生。
    • 事件流的过程如下:
      • 1. 捕获阶段:事件从最外层的节点(文档对象)开始,逐级向下传播,直到达到事件的目标节点。
      • 2. 目标阶段:事件到达目标节点,触发目标节点上的事件处理函数。
      • 3. 冒泡阶段:事件从目标节点开始,逐级向上传播,直到达到最外层的节点(文档对象)。
  • 扩展答
    • 在事件流中,事件的传播过程可以被停止或取消。在事件处理函数中,可以使用 event.stopPropagation() 方法阻止事件的进一步传播,或者使用 event.preventDefault() 方法取消事件的默认行为。
  • 总结收敛
    • 在 JavaScript 中,事件流是自下而上的,也就是说,事件首先在子元素上触发,然后逐级向上传播,直到达到文档对象。如果在某个节点上注册了多个事件处理函数,这些函数会按照注册的顺序依次执行。

事件循环机制

  • 讲概念
    • JavaScript 事件轮询(Event Loop)是一种异步编程模型,用于处理 JavaScript 中的事件和回调函数。JavaScript 事件轮询机制可以使得单线程的 JavaScript 能够处理多个任务,从而实现异步编程。
  • 详细答
    • 在浏览器中,JavaScript 事件轮询机制由浏览器的事件循环(Event Loop)负责执行。事件循环是一种机制,它会不断地轮询任务队列(Task Queue),并将队列中的任务依次执行。
    • JavaScript 中的任务可以分为两类:宏任务(Macro Task)和微任务(Micro Task)。
    • 宏任务通常包括一些需要花费较长时间的操作,例如定时器、事件回调等等。当一个宏任务执行完毕后,JavaScript 引擎会检查是否存在未执行的微任务,如果存在,则立即执行这些微任务。在所有微任务执行完毕后,JavaScript 引擎会再次开始执行宏任务。
    • 微任务通常包括一些需要尽快执行的操作,例如 Promise 的回调函数、MutationObserver 的回调函数等等。微任务可以使用 Promise 对象的 then() 方法或者 MutationObserver 的 observe() 方法注册。
    • 在 JavaScript 中,事件轮询机制的执行顺序如下:
        1. 执行当前宏任务中的同步代码,直到遇到第一个宏任务或微任务。
        1. 如果遇到微任务,则立即执行所有微任务。微任务执行完毕后,JavaScript 引擎会检查是否存在新的微任务,如果存在,则重复执行该步骤,直到所有微任务执行完毕。
        1. 如果遇到宏任务,则将它添加到宏任务队列中,继续执行下一个同步代码。
        1. 当前宏任务执行完毕后,JavaScript 引擎会检查宏任务队列是否为空。如果不为空,则执行队列中的第一个宏任务,重复执行该步骤直到宏任务队列为空。
        1. 当前事件轮询结束,等待下一次事件的触发。
    • 需要注意的是,JavaScript 中的事件轮询机制是单线程的,也就是说,所有任务都是在同一个线程中执行的,不能同时执行两个任务。如果当前宏任务执行的时间太长,会阻塞其它宏任务的执行,从而导致应用程序的性能问题。因此,在编写 JavaScript 代码时,应该尽可能避免长时间的同步操作,而是使用异步操作,以保证应用程序的性能和响应速度。
 
计算机网络前端性能优化
SuHanqin
SuHanqin
一个普通的干饭人🍚
公告
type
status
date
slug
tags
category
icon
password
🎉NotionNext 4.0即将到来🎉
-- 感谢您的支持 ---
👏欢迎更新体验👏