《现在前端技术技术解析》笔记三： 前端三层结构与应用
1、前端的三个基本构成
结构层HTML、表现层CSS和行为层JavaScript
2.AMP HTML
-
定义：流动网页提速（Accelerated Mobile Pages，AMP）是google推行的一个提升页面资源载入效率的HTML提议规范。
-
基本思路有两点：
（1）使用严格受限的高效HTML标签以及使用静态网页缓存技术来提高网络访问静态资源的性能和用户体验。
（2）尽量避免使用目前网页上渲染或展示性能比较差的标签，并将部分网页静态内容缓存到页面上进行分发
内联体积较小的样式和图片、延时加载较大的静态资源文件等，进而提高网页的初始载入速度。
例如在AMP中，<img>、<video>、<audio>、<embed>、<form>、<table>、<frame>、<object>、<iframe>这类较慢或可能影响页面内容渲染的标签是不建议被直接使用的，因为它们常常在页面元素解析时就要去做较慢的渲染或者会立即直接下载src或param等属性里面的内容。
即使用<amp-video>、<amp-img>、<amp-audio>、<amp-pixel>等来做页面元素内容的延迟载入或渲染，其实本质上这类标签的逻辑封装实现和异步加载有点类似。
3.ECMAScript 6对函数参数进行了新的设计，主要添加了默认参数、不定参数和拓展参数。
// 默认参数
function sayHi(name = 'ouven'){
console.log(`Hello ${name}`);
}
sayHi(); // Hello ouven ”
// 不定参数
function sayHi(...name){
// 这里 name 的值为['ouven', 'zhang']
console.log(name.reduce((a,b)=>`Hello ${a} ${b}`));
}
sayHi('ouven', 'zhang'); // Hello ouven zhang
// 扩展参数
let name = ['ouven','zhang'];
function sayHello(name1, name2){
console.log(`Hello ${name1} ${name2}`);
}
sayHello(...name); // Hello ouven zhang
4.模块module
//简单的模块导入导出示例
import {sayHi} from'./people';
export default sayHi;
5.表现层动画实现
JavaScript直接实现动画、可伸缩矢量图形（Scalable Vector Graphics，SVG）动画、CSS3 transition、CSS3 animation、Canvas动画、requestAnimationFrame
6.requestAnimatioFrame
-
requestAnimationFrame是前端表现层实现动画的另一种API实现，
-
它的原理和setTimeout及setInterval类似：都是通过JavaScript持续循环的方法调用来触发动画动作的
7.requestAnimatioFrame 相比setTimeout,setInterval的好处?
requestAnimationFrame是浏览器针对动画专门优化而形成的API，在实现动画方面性能比setTimeout及setInterval要好，可以将动画每一步的操作方法传入到requestAnimationFrame中，在每一次执行完后进行异步回调来连续触发动画效果。
和setInterval方法类似requestAnimationFrame只是将回调的方法传入到自身的参数中处理执行，而不是通过setInterval调用，其他的实现过程则基本一样
8.响应式页面实现？
一是通过前端或后端判断userAgent来跳转不同的页面完成不同设备浏览器的适配，也就是维护两个不同的站点来根据用户设备进行对应的跳转；
二是使用media query媒体查询等手段，让页面根据不同设备浏览器自动改变页面的布局和显示，但不做跳转
9.CDN的基本思想
尽可能避开互联网上有可能影响数据传输速度和稳定性的环节，实现内容的快速、稳定传输
10.屏幕适配布局？
在移动端解决内容按照不同屏幕大小自动等比例缩放的一种布局计算方式
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, user-scalable=no"/>
控制页面使用移动端浏览器展示并保持内容不缩放。
11.屏幕适配布
（1）依据HTML中<html>标签元素的zoom属性缩放
（2）根据REM自适配方案实现等比例缩放。
