典型的一个Web应用的生命周期从用户在浏览器输入一串URL,或者单击一个链接开始(就是访问一个页面)。而这个生命周期的结束就是我们关闭这个页面。

响应流程:

  1. 用户输入一个 URL(生命周期开始)
  2. 客户端生成一个请求到服务端
  3. 服务端响应这个请求,并发送回客户端
  4. 客户端处理HTML、CSS、Javascript代码构建页面
  5. 构建并返回页面之后,并进行事件监听,一次处理一个事件(这些事件根据用户的操作来进行交互)
  6. 用户退出这个页面(生命周期结束)

例子(本例来自《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应用的生命周期(客户端)的更多相关文章

  1. WEB页面的生命周期,DOMContentLoaded,load,beforeunload,unload

    简言 理解WEB页面的生命周期,文档加载事件及顺序对WEB开发有十分的重要意义.如果不理解,在元素未加载就提前操作元素,则得不到想要的结果.而如果页面完全加载完成后,再进行操作,则又会影响用户体验. ...

  2. web页面的生命周期

    1.先上几张原理图着重理解: 现在针对第四副图原理进行解析: 流程: 1.浏览器发送请求 2.服务器软件(IIS)接收,它最终的目的就是为了向客户输出它请求的动态页面生成的html代码. 3.服务器不 ...

  3. 一个Web页面的生命周期 ,面试常常被问到

    常规页生命周期阶段 一般来说,页要经历下表概述的各个阶段.除了页生命周期阶段以外,在请求前后还存在应用程序阶段,但是这些阶段并不特定于页.有关更多信息,请参见 ASP.NET 应用程序生命周期概述. ...

  4. Lightning Web Components 组件生命周期(六)

    组件创建以及渲染流程 组件移除dom 处理流程 组件从dom 移除 组件中的disconnectedCallback() 方法被调用 子组件从dom 移除 每个子组件的disconnectedCall ...

  5. Java开发之Servlet生命周期

    Servlet会在服务器启动或第一次请求该Servlet的时候开始生命周期,在服务器结束的时候结束生命周期.无论请求多少次Servlet,最多只有一个Servlet实例.多个客户端并发请求Servle ...

  6. Django(35)Django请求生命周期分析(超详细)

    Django请求生命周期分析 1.客户端发送请求 在浏览器输入url地址,例如www.baidu.com,浏览器会自动补全协议(http),变为http://www.baidu.com,现在部分网站都 ...

  7. JavaWEB 通过Listener理解域对象生命周期

    利用 ServletRequestListener.HttpSessionListener 以及 ServletContextListener 可以把request,session,以及Applica ...

  8. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期

    回顾 哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Red ...

  9. 【译】WebAPI,Autofac,以及生命周期作用域

    说明 原文地址:http://decompile.it/blog/2014/03/13/webapi-autofac-lifetime-scopes/ 介绍 这是一篇关于AutoFac的生命周期作用域 ...

随机推荐

  1. 集合类 collection接口 ArrayList

    数组: 存储同一种数据类型的集合容器.数组的特点:1. 只能存储同一种数据类型的数据.2. 一旦初始化,长度固定. 3. 数组中的元素与元素之间的内存地址是连续的. : Object类型的数组可以存储 ...

  2. [RoarCTF]Easy Calc

    目录 [RoarCTF]Easy Calc 知识点 1.http走私绕过WAF 2.php字符串解析特性绕过WAF 3.绕过过滤写shell [RoarCTF]Easy Calc 题目复现链接:htt ...

  3. 带空格的 jquery ID 选择器

    当 DOM ID有一个空格时,如何使用 jquery 的 ID 选择器? 例如,我的 DOM ID 是 <div id="content Module">Stuff&l ...

  4. 123456123456#1#---###3%%%----com.zzj.SuperPuperID668---前拼show后广--嘻哈水管工-111111

    com.zzj.SuperPuperID668---前拼show后广--嘻哈水管工-1111111111111

  5. 错误:net::ERR_BLOCKED_BY_CLIENT

    提示net::ERR_BLOCKED_BY_CLIENT错误 解决办法: 当我们查看浏览器第三方插件的时候,就会看到插件中存在“广告过滤插件”,其实,报错的原因就是第三方广告过滤插件在捣鬼, 当你关闭 ...

  6. SQL server触发器学习记录

    作为C#程序员,我工作内容基本就是winform,wpf,asp.net.sql接触的比较少,今天突然来了一个ticket要我修改触发器脚本....只会select*的我顿感迷茫... 需求描述:as ...

  7. SQL查询无限层级结构的所有下级,所有上级(即所有的子孙曾孙等等)

     表名:tb_menu 内容如下: 查询ID为3的所有无限层下级会员 WITH TAS( SELECT * FROM tb_menu WHERE id=3 UNION ALL SELECT a.* F ...

  8. hexo 博客如何更换电脑

    如何在更换电脑后继续使用Hexo部署博客 重要目录 _config.yml package.json scaffolds/ source/ themes/ 在新电脑上配置hexo环境:安装node.j ...

  9. 2017ACM/ICPC广西邀请赛 1005 CS Course

    CS Course Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...

  10. MySQL执行计划值type,强烈推荐

    表结构: create table user ( id int primary key, name varchar(), sex varchar(), index(name) )engine=inno ...