Web应用的生命周期(客户端)
典型的一个Web应用的生命周期从用户在浏览器输入一串URL,或者单击一个链接开始(就是访问一个页面)。而这个生命周期的结束就是我们关闭这个页面。
响应流程:
- 用户输入一个 URL(生命周期开始)
- 客户端生成一个请求到服务端
- 服务端响应这个请求,并发送回客户端
- 客户端处理HTML、CSS、Javascript代码构建页面
- 构建并返回页面之后,并进行事件监听,一次处理一个事件(这些事件根据用户的操作来进行交互)
- 用户退出这个页面(生命周期结束)
例子(本例来自《javascript:忍者秘籍》)
HTML:
<ul></ul>
<ul></ul>
javascript:
const ulList = document.querySelectorAll('ul');
function addMessage(element, message) {
var messageElement = document.createElement('li');
messageElement.innerHTML = message;
element.appendChild(messageElement);
}
addMessage(ulList[0], 'Page loading');
document.body.addEventListener('mousemove', function () {
addMessage(ulList[1], 'Event: mousemove');
});
document.body.addEventListener('click', function () {
ddMessage(ulList[1], 'Event: click');
});
Web应用的生命周期(客户端)的更多相关文章
- WEB页面的生命周期,DOMContentLoaded,load,beforeunload,unload
简言 理解WEB页面的生命周期,文档加载事件及顺序对WEB开发有十分的重要意义.如果不理解,在元素未加载就提前操作元素,则得不到想要的结果.而如果页面完全加载完成后,再进行操作,则又会影响用户体验. ...
- web页面的生命周期
1.先上几张原理图着重理解: 现在针对第四副图原理进行解析: 流程: 1.浏览器发送请求 2.服务器软件(IIS)接收,它最终的目的就是为了向客户输出它请求的动态页面生成的html代码. 3.服务器不 ...
- 一个Web页面的生命周期 ,面试常常被问到
常规页生命周期阶段 一般来说,页要经历下表概述的各个阶段.除了页生命周期阶段以外,在请求前后还存在应用程序阶段,但是这些阶段并不特定于页.有关更多信息,请参见 ASP.NET 应用程序生命周期概述. ...
- Lightning Web Components 组件生命周期(六)
组件创建以及渲染流程 组件移除dom 处理流程 组件从dom 移除 组件中的disconnectedCallback() 方法被调用 子组件从dom 移除 每个子组件的disconnectedCall ...
- Java开发之Servlet生命周期
Servlet会在服务器启动或第一次请求该Servlet的时候开始生命周期,在服务器结束的时候结束生命周期.无论请求多少次Servlet,最多只有一个Servlet实例.多个客户端并发请求Servle ...
- Django(35)Django请求生命周期分析(超详细)
Django请求生命周期分析 1.客户端发送请求 在浏览器输入url地址,例如www.baidu.com,浏览器会自动补全协议(http),变为http://www.baidu.com,现在部分网站都 ...
- JavaWEB 通过Listener理解域对象生命周期
利用 ServletRequestListener.HttpSessionListener 以及 ServletContextListener 可以把request,session,以及Applica ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期
回顾 哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Red ...
- 【译】WebAPI,Autofac,以及生命周期作用域
说明 原文地址:http://decompile.it/blog/2014/03/13/webapi-autofac-lifetime-scopes/ 介绍 这是一篇关于AutoFac的生命周期作用域 ...
随机推荐
- 第09组 Beta冲刺(3/4)
队名:软工9组 组长博客:https://www.cnblogs.com/cmlei/ 作业博客:https://edu.cnblogs.com/campus/fzu/SoftwareEngineer ...
- [代码质量] 代码质量管控 -- 复杂度检测 (JavaScript)
转载自: https://juejin.im/post/59bb8b546fb9a00a4247532e 背景 代码的复杂度是评估一个项目的重要标准之一.较低的复杂度既能减少项目的维护成本,又能避免一 ...
- jmeter BeanShell断言(四)
Bean Shell常用内置变量 JMeter在它的BeanShell中内置了变量,用户可以通过这些变量与JMeter进行交互,其中主要的变量及其使用方法如下: log:写入信息到jmeber.log ...
- vue---定义全局变量或函数
开发项目的时候,有很多的东西需要重复使用,例如函数或者变量等,例如网站服务器地址,token等,这时候就需要设置一波全局变量和全局函数 定义全局函数 原理 新建一个模块文件,然后在main.js里面通 ...
- 使用bert进行情感分类
2018年google推出了bert模型,这个模型的性能要远超于以前所使用的模型,总的来说就是很牛.但是训练bert模型是异常昂贵的,对于一般人来说并不需要自己单独训练bert,只需要加载预训练模型, ...
- Qt请求http地址数据
QNetworkAccessManager *manager = new QNetworkAccessManager(this);; QNetworkRequest network_request; ...
- 位运算在 PHP 实际项目当中的高级运用
我们首先来看一个系统中常见的需求: 有一个广告表,我们要对广告做显示控制: 手动上下线. 只允许 VIP 查看. 可能的表结构如下: CREATE TABLE `finger_ad` ( `ad_id ...
- openstack虚拟机获取不到ip
一.现象描述: openstack平台中创建虚拟机后,虚拟机在web页面中显示获取到了ip,但是打开虚拟机控制台后查看网络状态,虚拟机没有ip地址,下图为故障截图: 二.分析思路: (1)查看neut ...
- express 413 Request Entity Too Large解决办法
1.配置nginx 原因是请求实体太长了.一般出现种情况是Post请求时Body内容Post的数据太大了 如上传大文件过大; 如POST数据比较多 处理方法修改nginx.conf的值就可以解决了. ...
- vue -- router路由跳转错误 , NavigationDuplicated
vue-router ≥3.0版本回调形式以及改成promise api的形式了,返回的是一个promise,如果路由地址跳转相同, 且没有捕获到错误,控制台始终会出现如图所示的警告 (注:3.0以下 ...