典型的一个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. torch

    1.从数据直接构建tensor x = torch.tensor([5.5,3]) 2.从已有的tensor构建一个tensor.这些方法会重用原来tensor的特征. x = x.new_ones( ...

  2. idea在docker环境,调试spring boot程序

    允许docker被远程访问 见:https://www.cnblogs.com/wintersoft/p/10921396.html 教程见:https://spring.io/guides/gs/s ...

  3. 修改mysql开启innodb支持

    1.找到/etc/my.cnf文件 a. 修改默认引擎 b. 注释掉: loose-skip-innodb c.打开被注释掉的innodb配置 2.重启服务器  /etc/init.d/mysql r ...

  4. electron---表单验证问题

    使用elementui进行表单提交数据的时候,经常会需要用到表单验证的功能,下面就来说说这个功能. <template> <div> <el-form :model=&q ...

  5. xadmin插件

    from django.http import HttpResponse from xadmin.plugins.actions import BaseActionView class test(Ba ...

  6. SpringBoot入门-概念(一)

    SpringBoot是什么 Spring boot是一个构建在Spring框架之上.以一种更加简单快捷的方式来配置和运行web应用程序的开源框架. 为什么用SpringBoot 可以解决普通的java ...

  7. matlab学习笔记8 基本绘图命令-LineSpec线条设定

    一起来学matlab-matlab学习笔记8 基本绘图命令_4 LineSpec线条设定 觉得有用的话,欢迎一起讨论相互学习~Follow Me 绘图函数接受线条设定作为参数并相应地修改生成的图形.您 ...

  8. 网页视频直播、微信视频直播技术解决方案:EasyNVR与EasyDSS流媒体服务器组合之区分不同场景下的直播接入需求

    背景分析 熟悉EasyNVR产品的朋友们都知道,EasyNVR不仅可以独成体系,而且还可以跟其他系列产品相配合,形成各种不同类型的解决方案,满足各种不同应用场景的实际需求.针对很多设备现场没有固定公网 ...

  9. node端代理浏览器路由 解决浏览器跨域问题

    var _ = require('lodash'); var request = require("request"); /* @LM 2017-02-16 node端代理浏览器路 ...

  10. Java之浮点数运算

    浮点数运算和整数运算相比,只能进行加减乘除这些数值运算,不能做位运算和移位运算. 在计算机中,浮点数虽然表示的范围很大,但是浮点数有个非常重要的特点,就是浮点数常常无法精确表示 举例 浮点数0.1在计 ...