第三章 前端三层结构与应用

3.1 HTML结构层基础

结构层：HTML
表现层：CSS
行为层：JavaScript

3.1.1

虽然目前几乎所有浏览器均支持以HTML5的方式声明文档类型，即<！DOCUTYPE html>，但不代表HTML5的新标签元素就可以在这些浏览器上正常解析。这是因为DOCUTYPE声明只用于指示Web浏览器页面使用哪个HTML版本编写的指令进行解析。

3.1.2 Web语义化标签

Web语义化：是指在HTML结构的恰当位置上使用语义恰当的标签，使页面具有良好的结构，使页面标签元素具有含义，能够让人或搜索引擎更容易理解。

根据标签元素的display属性特点，可以将HTML标签分为以下几类：

1. 行内元素：<a>, <b>, <span>, <img>, <input>, <button>, <select>, <strong>等，其默认宽度是由内容宽度决定的。
2. 块级元素：<div>, <ul>, <ol>,<li>, <dl>, <dt>, <dd>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <p>, <table>等，其默认宽度为父元素的100%。
3. 常见空元素：<hr>, <br>, <link>, <meta>, <area>, <base>, <col>, <command>, <embed>, <******>, <param>, <source>, <track>等不能显示内容甚至不会在页面出现，但对页面的解析有着其他重要作用的元素。

3.1.4 AMP HTML

流动网页提速（AMP）是Google推行的一个提升页面资源载入效率的HTML提议规范。

基本思路有两点：使用严格受限的高效HTML标签以及使用静态网页缓存技术来提高网络访问静态资源的性能和用户体验。也就是，尽量避免使用目前网页上渲染或展示性能比较差的标签，并将部分网页静态内容缓存到页面上进行分发，例如内联体积较小的样式和图片，延时加载较大的静态资源文件，进而提高网页的初始加入速度。

使用AMP提升网页性能的基本原则：

1. 只允许异步的script脚本
2. 只加载静态的资源
3. 不能让内容阻塞
4. 不在关键路径中加载第三方JavaScript
5. 所有CSS必须内联
6. 字体使用声明必须高效
7. 最小化样式声明
8. 只运行GPU加速的动画
9. 处理好资源加载顺序问题
10. 页面必须立即加载
11. 提升AMP元素性能

3.4 JavaScript标准实践

3.4.1 ECMAScript 5

1. 严格模式：为开发者提供了更加安全规范的编程范围，限制了原有一些不规范的写法，让一些不合理的语法直接报错，从而提高代码安全性和规范性。

   严格模式的添加消除了JavaScript语法的一些不合理，不严谨之处，减少了一些怪异行为，可以在一定程度上提高编译器效率，加快运行速度，为未来新版本的JavaScript标准化做铺垫。

3.6 前端界面技术

3.6.1 CSS样式统一化

由于浏览器间内核实现的差异性，不同浏览器可能对同一元素标签的默认设置是不同的，如果不对CSS样式进行统一化处理，可能会出现同一个网页在不同浏览器下打开时显示不同或样式不一致的问题。

处理这一问题，目前主要有三种实现思路：reset，normalize，neat。

1. reset：
   将不同浏览器中标签元素的默认样式全部清除，消除不同浏览器下默认样式的差异性。

   典型的reset默认样式的代码如下：
   
   这种方法可以将不同浏览器上大多数标签的内外边距清除，但这个例子中的规则不能消除标签所有的差异性，只是针对消除内外边距。

2. normalize：

   它的做法是在整站样式基本确定的情况下对标签元素统一使用同一默认样式规则。

   例如：
   

3. neat：

   是上面两种实现的综合。
   

3.6.2 CSS预处理

预处理工具：SASS，LESS，Stylus，postCSS等。

预处理工具的最终目的：通过编写更高效，易管理的类CSS脚本并将它们自动生成浏览器解释执行的CSS代码，现实高效开发和便捷管理。

3.6.3 表现层动画实现

实现动画的方案主要有6种：

1. JavaScript直接实现动画
2. 可伸缩矢量图形（SVG）动画
3. CSS3 transition
4. CSS3 animation
5. Canvas动画
6. requestAnimationFrame

3.7 响应式网站开发技术

3.7.1 响应式页面实现概述

​ 通常认为，响应式设计是根据不同设备浏览器尺寸或分辨率来展示不同页面结构层，行为层，表现层的设计方式。

​ 响应式设计网站，目前比较主流的实现方法有两种：一是通过前端或后端判断userAgent来跳转不同页面完成不同设备浏览器的适配，也就是维护两个不同的站点来根据用户设备进行对应的跳转；二是使用media query媒体查询等手段，让页面根据不同设备浏览器自动改变页面的布局和显示，但不做跳转。

​ 第一种方案：

典型响应式站点实现：

这种情况存在一些问题：

1. 需要开发为维护至少两个站点跳转来适配不同用户的设备浏览器。
2. 下载使用哪个站点内容由设备的userAgent信息来判断，无法根据屏幕尺寸或分辨率来决定。
3. 多一次跳转。

​ 第二种方案： 桌面浏览器和移动端浏览器使用同一个站点域名来加载内容，只需要开发维护一个站点就可以，然后根据media query来实现不同屏幕下的布局显示，适用于访问量较小，性能要求不高的应用场景。

存在的问题：

1. 移动端加载了与桌面端浏览器相同的资源，例如图片，脚本资源等，导致移动端加载了冗余或体积较大的资源。
2. 桌面端浏览器和移动端浏览器访问站点需要展示的内容可能不完全相同，这种响应式的方式只实现了内容布局显示的适应，但要做到更多差异性的功能布局难。
3. 桌面端和移动端浏览器页面功能具有差异性，使用一套处理方式，会有更多兼容性问题。

​ 总结两种方式的所有问题：

1. 能否使用同一个站点域名避免跳转的问题
2. 能否保证移动端加载的资源内容最优
3. 如何做移动端和桌面端浏览器的差异化功能
4. 如何根据更多的信息进行更加灵活的判断，而不仅仅是userAgent

合理开发方式和网站访问架构设计是可以解决上述四个问题。下面看看在响应式的三层结构上具体能做什么处理。

3.7.2 结构层响应式

结构层响应设计可以理解成HTML内容的自适应渲染实现方式，即根据不同的设备浏览器渲染不同的页面内容结构，而不是直接进行页面跳转。

这里页面中结构层渲染的方式可能不同，包括前端渲染数据和后端渲染数据，这样主要就有两种不同的设计思路：一是页面内容在前端渲染，二是页面内容在后端渲染。

1. 前端数据渲染响应式

根据不同平台浏览器的情况加载不同的异步静态JavaScript。然后异步渲染不同的模块内容，生成不同的表现层结构。

这种方式尽管可以让桌面端和移动端附庸一个页面并做页面的差异性，但是由于使用了应该HTML结构层为基础进行渲染和操作，因此页面的功能实现仍然有部分耦合的地方。

2. 后端数据渲染响应式

这种情况的处理方式其实可以做到更优化，只要尽可能将桌面端和移动端的业务层模板分开维护就可以。

3. 结构层媒体响应式

通过对不同开发模式中的渲染思路的分析，我们基础解决了结构层HTML响应式所面临的主要问题。

细节上，有一点需要强调：结构层媒体响应式的实现。根据统计，目前主要的网站60%以上的流量数据来自图片，所以如何在保证用户访问网站体验不降低的前提下尽可能地降低网站图片的输出流量具有很重要的意义。

这里提到的媒体主要是指图片，即我们需要在根据浏览器设备屏幕分辨率和屏幕宽度来加载不同大小和尺寸的图片，避免在移动端上加载体积过大的资源，下面来看看前端图片响应式的几种解决方案。

1. 使用Media Query背景图片代替
2. 标签元素 （HTML5标签，大多浏览器可能不兼容）
3. 模板判断响应式图片
   在前端渲染数据的开发模式下，使用前端模板进行判断渲染输出不同的图片是最简单，最直接的响应式图片实现方式。
4. 图片服务器判断输出内容

3.7.3 表现层响应式

这里至少要了解两个方面的内容：响应式布局和屏幕适配布局

1. 响应式布局是根据浏览器宽度，分辨率，横屏，竖屏等情况来自动改变页面元素展示的一种布局，一般可以使用栅格方式来实现，实现思路有两种：一种是桌面端优先。扩展到移动端浏览器适配，另一种则是以移动端浏览器优先，扩展到桌面端浏览器适配，由于移动端的网络和计算资源较少，所以一般比较推荐从移动端扩展到桌面端的方式进行适配，这样避免了在移动端加载冗余的桌面端CSS样式。

2. 屏幕适配布局则是主要针对移动端的，由于目前移动端屏幕大小各部相同，屏幕适配布局是为了实现网页内容根据移动端设备屏幕大小等比例缩放所提出的一种布局计算方式。

   首先为了固定浏览器对HTML文件的渲染，会在HTML的 里面加上下面一段 声明来控制页面使用移动端浏览器展示并保持内容不缩放。
   <meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1,user-calable=no'/>

3.7.4 行为层响应式

在页面响应式设计中。行为层脚本也是需要根据浏览器来执行不同逻辑的。
行为层的响应式分为：JavaScript内容在前端引入和在后端引入这两种情况。