1.页面在移动端及其它主流浏览器上保持良好的兼容性
Zepto 是一个轻量级的 JS 库，从当初 2~5k 大小到正式发布，仍保持不到 10k 的体积，能减少下载和与运行时间；兼容大多数移动浏览器和主流桌面现代浏览器，支持 Detect 和
Touch 模块实现浏览器检测和触屏事件，对 PhoneGap、Firefox OS 等浏览器环境的 WebApps 支持更加友好。Zepto 借鉴了 jQuery 的语法并实现了 jQuery 的大部分功能，减少学习成本，
会 jQuery 就知道怎么用 Zepto。
2.css3动画
@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式
把它绑定到一个选择器，否则动画不会有任何效果。animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、
animation-direction；
3.浏览器的兼容性问题
（1）浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同；
（2）浏览器兼容问题二：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大；解决方案：在这个div里面加上display:inline;
（3）浏览器兼容问题五：图片默认有间距；解决方案：使用float属性为img布局
（4）浏览器兼容问题六：标签最低高度设置min-height不兼容；解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !
important; height:200px; overflow:visible;}
（5）浏览器兼容问题七：透明度的兼容CSS设置；IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。 FF：opacity:0.6。
4.HTML5
（1）新标签：header、nav、progress、section、source、embed、video;
（2）新的控件：email、url、number、range、date、search、color；
（3）多媒体音视频；
（4）拖拽：首先，为了使元素可拖动，把 draggable 属性设置为 true
拖动什么 - ondragstart 和 setData()
放到何处 - ondragover默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式
进行放置 - ondrop
（5）画布：canvas 元素使用 JavaScript 在网页上绘制图像
创建 Canvas 元素
JavaScript 使用 id 来寻找 canvas 元素
然后，创建 context 对象
线条、圆形、渐变、图像
（6）svg：可伸缩矢量图形，SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失，可伸缩的，
把 SVG 直接嵌入 HTML 页面；
（7）地理定位： Geolocation（地理定位）用于定位用户的位置。
navigator.geolocation支持性检测；
使用 getCurrentPosition() 方法来获得用户的位置，getCurrentPosition() 方法的第二个参数用于处理错误。它规定当获取用户位置失败时运行的函数
如需在地图中显示结果，您需要访问可使用经纬度的地图服务，比如谷歌地图或百度地图
watchPosition() - 返回用户的当前位置，并继续返回用户移动时的更新位置，clearWatch() - 停止 watchPosition() 方法
（8）Web存储：在客户端存储数据的新方法
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
（9）应用缓存：创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本；
如需启用应用程序缓存，请在文档的 标签中包含 manifest 属性，请注意，manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web
服务器上进行配置
CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面
（10）web workers是运行在后台的 JavaScript，不会影响页面的性能；
在创建 web worker 之前，请检测用户的浏览器是否支持它
创建 web worker 文件
创建一个新的 web worker 对象，然后运行 "demo_workers.js" 中的代码
向 web worker 添加一个 "onmessage" 事件监听器，event.data 中存有来自 event.data 的数据
终止 Web Worker，terminate() 方法
8.css3
（1）边框：border-radius、box-shadow、border-image
（2）背景：background-size、background-origin
（3）文字效果：text-shadow、word-wrap允许对长的不可分割的单词进行分割并换行到下一行；
（4）字体：@font-face；
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */
}
（5）转换：对元素进行移动、缩放、转动、拉长或拉伸；translate()、rotate()、scale()、skew()
div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
}
（6）过渡：当元素从一种样式变换为另一种样式时为元素添加效果
div
{
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}
CSS 属性改变的典型时间是鼠标指针位于元素上时
如需向多个样式添加过渡效果，请添加多个属性，由逗号隔开
（7）动画：@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果
@keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果
animation: myfirst 5s linear 2s infinite alternate;
（8）box-sizing:属性允许您以确切的方式定义适应某个区域的具体内容。
vuejs:
（1）Vue.js是JavaScript MVVM（Model-View-ViewModel）库，十分简洁，Vue核心只关注视图层，相对AngularJS提供更加简洁、易于理解的API。Vue尽可能通过简单的API实现响应
的数据绑定和组合的视图组件
（2）特点：数据驱动、组件化、轻量、模板友好（可通过npm安装）
（3）声明式渲染：HTML模板（View）+Json数据（Model）+Vue实例（ViewModel）组成。创建Vue的实例，需传入一个选项对象，如：数据、挂载元素、方法、模生命周期钩子等。
（4）双向绑定：在Vue中使用v-model在表单元素上实现双向绑定。当在输入框输入的信息发生变化，
...
中的信息随之变化；当通过控制台中的Console，修改
exampleData.message的值，输入框中的信息也随之变化。
（5）常用指令：v-if、v-show、v-for、v-bind、v-on、
9.webpack:
（1）webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应
用程序需要的每个模块，然后将所有这些模块打包成少量的 bundle - 通常只有一个，由浏览器加载。
（2）它是高度可配置的，但是，在开始前你需要先理解四个核心概念：入口(entry)、输出(output)、loader、插件(plugins)。
（3）webpack 创建应用程序所有依赖的关系图(dependency graph)。图的起点被称之为入口起点(entry point)。入口起点高速 webpack 从哪里开始，并根据依赖关系图确定需要打
包的内容。可以将应用程序的入口起点认为是根上下文(contextual root) 或 app 第一个启动文件。
（4）将所有的资源(assets)归拢在一起后，还需要告诉 webpack 在哪里打包应用程序。webpack 的 output 属性描述了如何处理归拢在一起的代码(bundled code)
（5）webpack 把每个文件(.css, .html, .scss, .jpg, etc.) 都作为模块处理
在更高层面，在 webpack 的配置中 loader 有两个目标。
识别出(identify)应该被对应的 loader 进行转换(transform)的那些文件。(test 属性)
转换这些文件，从而使其能够被添加到依赖图中（并且最终添加到 bundle 中）(use 属性)
（6）然而由于 loader 仅在每个文件的基础上执行转换，而 插件(plugins) 更常用于（但不限于）在打包模块的 “compilation” 和 “chunk” 生命周期执行操作和自定义功能
；
想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用
同一个插件，这时需要通过使用 new 来创建它的一个实例。
10.ES6：
（1）在使用时仍然需要经过babel编译。
（2）一、新的变量声明方式 let/const；使用let来声明一个值会被改变的变量，而使用const来声明一个值不会被改变的变量，也可以称之为常量。
（3）二、 箭头函数的使用
// es5
var fn = function(a, b) {
return a + b;
}
// es6 箭头函数写法，当函数直接被return时，可以省略函数体的括号
const fn = (a, b) => a + b;
箭头函数可以替换函数表达式，但是不能替换函数声明
箭头函数中，没有this。如果你在箭头函数中使用了this，那么该this一定就是外层的this。
也正是因为箭头函数中没有this，因此我们也就无从谈起用call/apply/bind来改变this指向。
（4）模板字符串是为了解决使用+号拼接字符串的不便利而出现的。
// es6
const a = 20;
const b = 30;
const string = `${a}+${b}=${a+b}`;
// es5
var a = 20;
var b = 30;
var string = a + "+" + b + "=" + (a + b);
使用 `` 将整个字符串包裹起来，而在其中使用 ${} 来包裹一个变量或者一个表达式
（5）解析结构：
数组与序列号一一对应，这是一个有序的对应关系。
而对象根据属性名一一对应，这是一个无序的对应关系。
根据这个特性，使用解析结构从对象中获取属性值更加具有可用性。
（6）函数默认参数：
function add(x = 20, y = 30) {
return x + y;
}
console.log(add());（7）展开运算符：
（8）对象字面量 与 class
当属性与值的变量同名时
const name = 'Jane';
const age = 20
// es6
const person = {
name,
age
}
// es5
var person = {
name: name,
age: age
};在一个模块对外提供接口时
（9）Promise
const getName = () => person.name;
const getAge = () => person.age;
// commonJS的方式
module.exports = { getName, getAge }
// ES6 modules的方式
export default { getName, getAge }
ES6为我们创建对象提供了新的语法糖，这就是Class语法。
// ES5
// 构造函数
function Person(name, age) {
this.name = name;
this.age = age;
}
// 原型方法
Person.prototype.getName = function() {
return this.name
}
// ES6
class Person {
constructor(name, age) { // 构造函数
this.name = name;
this.age = age;
}
getName() { // 原型方法
return this.name
}
}11.组件和模块划分：组件强调复用，模块强调职责(内聚、分离)，或者说组件是达到可复用要求的模块；
12.性能优化：（1）html结构语义化；（2）css，js文件数量及大小的优化；（3）背景图片数量及大小的优化；（4）把样式表置于顶部，把脚本置于页面底部，避免使用 CSS 表达式（Expression），使用外部 JavaScript 和 CSS，削减 JavaScript 和 CSS，用 代替 @import，避免使用滤镜，剔除重复脚本，减少DOM访问；
13.表现和数据分离：表现和数据分离就是javascript中的MVC，将数据的获取与数据的显示分离，表现和数据分离就是javascript控制数据填充，html负责表现；
14.web语义化：Web语义化是指使用语义恰当的标签，使页面有良好的结构，页面元素有含义，能够让任何搜索引擎都容易理解。
15.面相对性编程思想： 采用封装、继承、抽象等设计方法，用this给对象添加属性，prototype添加方法；
16.浏览器的渲染机制：
（1、浏览器请求到HTML代码后，在生成DOM的最开始阶段并行发起css、图片、js的请求，无论他们是否在HEAD里。
2、CSS文件下载完成，开始构建CSSOM
3、所有CSS文件下载完成，CSSOM构建结束后，和 DOM 一起生成 Render Tree。
4、下一步操作称之为Layout，顾名思义就是计算出每个节点在屏幕中的位置。
5、就进入了最后一步：Painting，按照算出来的规则，通过显卡，把内容画到屏幕上。
Layout 和 Painting 也会被重复执行，除了DOM、CSSOM更新的原因外，图片下载完成后也需要调用Layout 和 Painting来更新网页。）
17、微信小程序开发
（1）最关键也是必不可少的，是 app.js、app.json、app.wxss 这三个。其中，.js后缀的是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件
（2）app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API，如本例的同步存储及同步读取本地数据。
（3）app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口背景色，配置导航条样式，配置默认标题。注意该文件不可添加任何注释。
（4）app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。
18.微信小程序框架
（1）框架提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统
（2）响应的数据绑定：框架的核心是一个响应的数据绑定系统。
整个系统分为两块视图层（View）和逻辑层（App Service）。框架可以让数据与视图非常简单地保持同步。当做数据修改的时候，只需要在逻辑层修改数据，视图层就会做相应的更新
（3）页面管理：框架 管理了整个小程序的页面路由，可以做到页面间的无缝切换，并给予页面完整的生命周期。开发者需要做的只是将页面的数据，方法，生命周期函数注册进 框架 中，其他的一切复杂的操作都交由 框架 处理。
（4）基础组件：一套基础的组件，这些组件自带微信风格的样式以及特殊的逻辑，开发者可以通过组合基础组件，创建出强大的微信小程序 。
（5）丰富的API：提供丰富的微信原生 API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。
19.微信小程序文件结构
（1）小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。
（2）一个小程序主体部分由三个文件组成，必须放在项目的根目录，是 app.js、app.json、app.wxss 这三个；
（3）一个小程序页面由四个文件组成js、wxml、wxss、josn（页面配置）；（注意：为了方便开发者减少配置项，我们规定描述页面的这四个文件必须具有相同的路径与文件名。）
20.微信小程序配置
（1）使用app.json文件来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
（2）pages：接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。文件名不需要写文件后缀，因为框架会自动去寻找路径.json,.js,.wxml,.wxss的四个文件进行整合。
