【产品经理必知Web前端技术】20190515

1. AJAX

AJAX(Asynchronous JavaScript And XML)是一项用于异步拉取数据并展示在当前页面的技术,这对需要延迟加载数据和触发式家在数据的页面有很大益处。

如运用到鼠标悬浮显示注释的功能:鼠标悬浮到相应的按钮上后,这是浏览器的XmlHttpRequest对象发起对后台的一次去请求。随后这次请求返回注释的JSON串,这是网页中的JavaScript程序开始进行处理,解析JSON串,并将解析后的字符串插入网页的DOM结构中。

如运用到网站访问中:网站的后台会把当前页面的基本框架“吐回”浏览器,如基本的文字显示。图片是在框架加载完后,再发起AJAX请求拉取。

技术优势:最大程度上缓解用户等待的焦虑感

2. DOM

DOM(Document Object Model,文档对象模型)定义了一个网页的结构,是网页的骨骼和框架,网页呈现的内容是通过JavaScript从服务器上请求到数据后操纵DOM而展现的。---异步加载

更便捷的技术:虚拟DOM。用JavaScript模拟一个简单的DOM树,然后在上面演练所有的DOM操作,等时机成熟后再把虚拟DOM树和真正浏览器的DOM树做对比,算出差异,一次性改变真正的DOM树。

3. 静态网页和动态网页

都是网页,静态网页不需要后台程序处理,直接从服务器返回;动态网页一般需要后台程序来处理(ASP、JSP、PHP、Python、Ruby等),并且由数据库提供数据支撑。

动态网页的后台处理以PHP为例:当网页被请求时,首先到PHP容器中进行解释,这时解释器知道了当前页面的需求(比如文字,图片),然后PHP程序连接数据库,获取这些数据并插入网页的HTML中,再吐回浏览器显示。

4. 分析URL的结构

一个标准的URL地址由protocol(协议),hostname(主机名),port(端口),path(路径),parameter(参数),query几部分组成。

protocol(协议)

http://、https://、ftp、thunder都是协议,协议就是一套定义了数据的封装、打包、拆包和解释的规则。URL地址标识了一个资源,协议头标识我们可以通过什么协议访问它。

hostname(主机名)

qq.com是一级域名,www.qq.com和news.qq.com都是二级域名

port(端口)

一般http的端口号为80,https的端口号为443。

一个主机可以有2的16次方,65536个端口,URL中的端口号就是指定了从哪个这个端口访问资源,这个网页服务器必须现在这个端口部署服务,才能供用户访问。

path(路径)

路径是最终文件所在的路径和文件名,只不过此地址的文件存储在服务器上。

如https://www.jianshu.com/p/a12049bfc461 加粗的即为路径

5. 网页基础知识:表单

表单

是用户和服务器的数据交互的用户界面。

表单代码说明了数据内容提交的地址和方法(GET或POST)

6. H5应用程序缓存简介

如果没有缓存,用户每次打开同一个网页都要全量下载,如果访问的用户量大的话,服务器会顶不住。因此引出了缓存的技术(当然有钱可以扩容)。

Application Cache是H5中定义的一种离线存储技术标准,可以让开发者明确指定页面中的哪些静态资源可以在第一次访问网页的同时缓存到本地。再次访问的时候,页面通过注册监听器的方式获得Cache更新成功的事件,主动刷新一下页面,并最新的内容及时展示给用户。

技术优势:大大释放了服务器带宽,同时内容展示时间大大缩短。

你可能感兴趣的:(【产品经理必知Web前端技术】20190515)