上个世纪的1989年，欧洲核子研究中心的物理学家Tim Berners-Lee发明了超文本标记语言（HyperText Markup Language），简称HTML
最早的HTML页面是完全静态的网页，它们是预先编写好的存放在Web服务器上的html文件。
浏览器请求某个URL时，Web服务器把对应的html文件扔给浏览器，就可以显示html文件的内容了。
如果要针对不同的用户显示不同的页面，显然不可能给成千上万的用户准备好成千上万的不同的html文件，所以服务器就需要针对不同的用户，动态生成不同的html文件。
一个最直接的想法就是利用C、C++这些编程语言，直接向浏览器输出拼接后的字符串。这种技术被称为CGI：Common Gateway Interface
很显然，像新浪首页这样的复杂的HTML是不可能通过拼字符串得到的。于是，人们又发现，其实拼字符串的时候，大多数字符串都是HTML片段，是不变的，变化的只有少数和用户相关的数据，所以，又出现了新的创建动态HTML的方式：ASP、JSP和PHP等——分别由微软、SUN和开源社区开发。
在以前：
在ASP中，一个asp文件就是一个HTML，但是，需要替换的变量用特殊的<%=var%>标记出来了，再配合循环、条件判断，创建动态HTML就比CGI要容易得多。
但是，一旦浏览器显示了一个HTML页面，要更新页面内容，唯一的方法就是重新向服务器获取一份新的HTML内容。
如果浏览器想要自己修改HTML页面的内容，怎么办？那就需要等到1995年年底，JavaScript被引入到浏览器。
有了JavaScript后，浏览器就可以运行JavaScript，然后，对页面进行一些修改。JavaScript还可以通过修改HTML的DOM结构和CSS来实现一些动画效果，而这些功能没法通过服务器完成，必须在浏览器实现。
以上页面发展历史，摘自廖雪峰总结，有兴趣可以去搜
MVC模式
视图（View）：用户界面。
控制器（Controller）：业务逻辑
模型（Model）：数据保存
互相的通信
View 传送指令到 Controller
Controller 完成业务逻辑后，要求 Model 改变状态
Model 将新的数据发送到 View，用户得到反馈
这个模式缺点是什么呢？
缺点一：它必须等待服务器端的指示，而且如果是异步模式（异步处理解释往下看）的话，所有html节点、数据、页面结构都是后端请求过来。
浏览器只作为一个解析显示容器，Model 作用几乎是废x，Model 层面做的很少几乎前端无法控制，你前端几乎是切图仔和做轮播图的工作/哭
缺点二：因为你前端渲染的页面结构，几乎是后端服务器包扎一堆数据一起发送过来，前端的你只需要用拼接字符串 或者字符串拼接引擎
比如Mustache、Jade、artTemplate、tmpl、kissyTemplate、ejs等来做事，说白了纯苦力和重复工作居多，这也导致了，如果很多人认为前端并不重要，只负责美工 和 动作体验就好了。
缺点三：一发而动全身。数据、显示不分离！
为什么这么说，因为如果业务逻辑要变，比如很简单的需求，你用jsp或者php 拼接出来的ajax数据页面，年龄这个字段我不需要了，把性别字段 区分开，男的单独显示，女的单独显示，以前是一起显示到一个表的
那么，后端先要sql查询把 男、女数据分开，然后渲染字符串时候把 年龄 这个字段去除，然后把男女分开成2个table，然后再推送给前端接收。
前端收到了，然后从新在渲染一遍，在加工一次页面甚至是展示动作效果。。。真苦逼啊（前后端一起大声喊到：加班使我快乐，呜呜呜）
异步请求的原理
同步请求的原理。当浏览器向服务器发送同步请求时，服务处理同步请求的过程中，浏览器会处于等待的状态，服务器处理完请求把数据响应给浏览器并覆盖浏览器内存中原有的数据，浏览器重新加载页面并展示服务器响应的数据。
那么，有没有一种技术，可以让浏览器发送请求给服务器，服务器处理请求的过程中，浏览器不处于等待的状态，并且浏览器接收响应数据的同时不再重新加载整个页面，既请求发送之前的数据不丢失，又能实现页面的局部刷新呢？那就要用到ajax请求——异步请求模型，那么异步请求的原理是什么呢？
我们知道，在同步请求模型中，浏览器是直接向服务器发送请求，并直接接收、处理服务器响应的数据的。这就导致了浏览器发送完一个请求后，就只能干等着服务器那边处理请求，响应请求，在这期间其它事情都做不了。这就像是你到了一个新城市去找房子住，你可以自己去找，在网站上或者是街头小广告上去了解房源信息，找合适自己的那一个，然后去跟房东谈价钱。在这期间你的精力和时间大部分都用到了找房子上，你可能没时间再去找工作或者做其他的事情了。还有一种方式是你找一个租房中介，找你一个代理人，把你的需求告诉他让他来帮你找，在中介给你找房子的同时你还可以去找工作或者做其他的事情。
异步请求正是基于以上所述的模式，浏览器把请求交给代理对象—XMLHttpRequest（绝大多数浏览器都内置了这个对象），由代理对象向服务器发起请求，接收、解析服务器响应的数据，并把数据更新到浏览器指定的控件上。从而实现了页面数据的局部刷新。异步请求使浏览器不用等待服务器处理请求，不用重新加载整个页面来展示服务器响应的数据，在异步请求发送的过程中浏览器还能进行其它的操作。
「 何为mvvm模式 」
MVVM最早由微软提出来，它借鉴了桌面应用程序的MVC思想，在前端页面中，把Model用纯JavaScript对象表示，View负责显示，两者做到了最大限度的分离。也就是我们常说的，前后分离，真正在这里得以实现
它采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然,model数据的变动，也自动展示给页面显示
把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。
我们来看MVVM 数据绑定怎么实现。
由于数据驱动模式的精髓在于【数据】和【视图】分离，所以我们首先并不关心DOM结构，而是关心数据的展现。
最简单的数据存储方式是什么呢？显然不是mysql、数据库而是使用JavaScript对象
我们只要改变JavaScript对象的内容，就会导致DOM结构作出对应的变化（示例点链接）
这让我们的关注点从如何操作DOM变成了如何改变JavaScript对象的状态，而操作JavaScript对象比获取和操作DOM简单了一个地球的距离！
这也是MVVM的核心思想：关注Model的变化，让MVVM框架利用自己的机制去自动更新DOM，从而把开发者从操作DOM的繁琐中解脱出来！
也就是所谓的 数据 - 视图分离，数据驱动视图， 视图不影响数据，再也不用管繁琐的DOM结构操作了，世界顿时清净，完美！
作者：小北哥哥和北妈
原文：https://blog.csdn.net/xllily_11/article/details/69527396
javaScript 在浏览器端是如何运行的
https://blog.csdn.net/u010998803/article/details/81382500