前端页面的生命周期

简介: 前端页面的生命周期

一道常见的面试题

从浏览器地址栏输入URL后到整个页面渲染出来都经历了什么?

主要分为6个阶段:

  • 浏览器接收到URL到网络请求线程的开启
  • 一个完整的HTTP请求发出
  • 服务器收到请求并转到具体的处理后台
  • 前后台之间的http交互和设计的缓存机制
  • 浏览器接收到的数据包后的关键渲染路径
  • Js引擎的解析过程

网络请求线程的开启

URL的结构

Protocol://Host:Port/Path?Query#Fragment

Protocol:协议,常见的有HTTP,HTTPS,FTF,Telnet

HOST:主机域名或者IP地址 ,主机域名通过DNS解析为IP地址

Port:端口 请求程序和响应程序直接连接用的标识

Query:查询参数 请求所传递的参数

Fragment:次级资源信息,通常可作为前端路由或锚点

进程和线程

3.png


单线程和多线程


进程就是一个程序运行的实例,操作系统会为进程创建独立的内存用来存放运行所需要的代码和数据;

线程是进程的组成部分,每个进程至少有一个或多个线程,这些线程由所属的进程进行启动和管理,由于多个线程可以共享操作系统为其所属的进程所分配的资源,所以多线程可以并行处理,有效提高程序的运行效率。

线程和进程之间的关系

  1. 只要某个线程执行出错,将会导致整个进程崩溃;
  2. 进程与进程之间的相互隔离,这保证了当一个进程挂起或崩溃的情况发生时,并不会影响其他进程的正常运行,虽然每个进程只能访问系统分配给自己的资源,但是可以通过ipc机制进行进程间的通信;
  3. 进程所占用的资源会在其关闭后由操作系统回收,即使进程中存在某个线程产生的内存泄露,当进程退出时,相关的内存资源也会被回收
  4. 线程之间可以共享所属进程的数据
单线程浏览器

单线程浏览器存在以下弊端:

1. 页面内存泄露导致的流畅性问题

流畅性单线程浏览器会存在页面的内存泄露,因为浏览器内核通常比较复杂,单线程浏览器打开再关闭一个页面的操作,会导致一些内存不能回收,这样随着时间的积累,泄露的内存越来越多,占用的内存也会越来越多,从而使得浏览器运行变慢,流畅性变差

2.安全性问题

由于插件的存在不免其中有些恶意脚本会利用浏览器漏洞来获取系统权限进行引发安全问题的行为

3.稳定性问题

由于所有模块都运行在同一个线程中,对于稍复杂的JS代码,如果页面渲染引擎崩溃,就会导致整个浏览器崩溃,同样各种不稳定的地方,三方插件也是导致浏览器崩溃的隐患

多进程浏览器


目录
相关文章
|
14天前
|
前端开发 数据安全/隐私保护
.自定义认证前端页面
.自定义认证前端页面
6 1
.自定义认证前端页面
|
4月前
|
开发框架 前端开发 JavaScript
循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理
循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理
|
9天前
|
前端开发 安全 JavaScript
在阿里云快速启动Appsmith搭建前端页面
本文介绍了Appsmith的基本信息,并通过阿里云计算巢完成了Appsmith的快速部署,使用者不需要自己下载代码,不需要自己安装复杂的依赖,不需要了解底层技术,只需要在控制台图形界面点击几下鼠标就可以快速部署并启动Appsmith,非技术同学也能轻松搞定。
|
1月前
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
37 18
|
2月前
|
前端开发 JavaScript API
前端JS读取文件内容并展示到页面上
前端JavaScript使用FileReader API读取文件内容,支持文本类型文件。在文件读取成功后,可以通过onload事件处理函数获取文件内容,然后展示到页面上。
85 2
前端JS读取文件内容并展示到页面上
|
1月前
|
前端开发 数据安全/隐私保护
angular前端基本页面验证
angular前端基本页面验证
29 1
|
1月前
|
前端开发
搭建个人博客--1、前端页面
搭建个人博客--1、前端页面
21 1
|
3月前
|
开发框架 前端开发 Java
【前端学java】SpringBootWeb极速入门-实现一个简单的web页面01
【8月更文挑战第12天】SpringBootWeb极速入门-实现一个简单的web页面01
69 3
【前端学java】SpringBootWeb极速入门-实现一个简单的web页面01
|
2月前
|
前端开发 JavaScript
前端基础(一)_前端页面构成
本文介绍了前端页面的基本构成,包括HTML(负责页面的结构和语义)、CSS(负责页面的样式和表现)和JavaScript(负责页面的行为和动态效果)。文章通过示例代码展示了如何使用这三种技术来创建一个简单的网页,并解释了HTML文档的结构和语法。
34 0
|
4月前
|
开发框架 前端开发 JavaScript
循序渐进VUE+Element 前端应用开发(4)--- 获取后端数据及产品信息页面的处理
循序渐进VUE+Element 前端应用开发(4)--- 获取后端数据及产品信息页面的处理