理论整理（三）

1.HTML5提出了两大离线存储技术：localstorage与Application Cache，传统还有离线存储技术为Cookie。Application Cache的优势？

a.离线浏览——用户在不能联网的时候依然能浏览整个站点

b.高速——缓存资源是存储在本地的，因此能更快加载。

c.更小的服务器负载——浏览器只需要从服务器端下载有改变的资源即可，相同资源不需要重复下载。

*从可用性与易用性来说，Application Cache是值得使用的，但是最好是做静态资源的缓存，真正要实现离线应用还得花更多的功夫呢！

2.cookies，sessionStorage和localStorage的区别

共同点 都是保存在浏览器端，且同源的。

不同点

存储大小

cookie数据大小不能超过4k。

sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

有效时间

localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；

sessionStorage 数据在当前浏览器窗口关闭后自动删除。

cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

数据与服务器之间的交互方式

cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端

sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

3.Css3+html5新特性

html5

用于绘画的 canvas 元素

用于媒介回放的 video 和 audio 元素

对本地离线存储的更好的支持

新的特殊内容元素，比如 article、footer、header、nav、section

新的表单控件，比如 calendar、date、time、email、url、search

css3

实现圆角（border-radius），阴影（box-shadow），

对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）

transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜

增加了更多的CSS选择器  多背景 rgba 

在CSS3中唯一引入的伪元素是 ::selection.

 媒体查询，多栏布局

border-image

4.页面性能优化的方法？

 1.减少HTTP请求

 2.减少重绘和重排

3.减少DOM操作

4.使用JSON格式来进行数据交换

5.高效使用HTML标签和CSS样式

6.使用CDN加速（内容分发网络）

7.精简CSS和JS文件 

8.把CSS放到顶部，把JS放到底部

9.压缩图片和使用图片Sprite技术

10.注意控制Cookie大小和污染

5.jQuerytouch、jquerymobile

6.Js性能优化

a. 函数中读写局部变量总是最快的，而全局变量的读取则是最慢的；
     b.尽可能地少用with 语句，因为它会增加with 语句以外的数据的访问代价；
     c.闭包尽管强大，但不可滥用，否则会影响到执行速度以及内存；
     d.嵌套的对象成员会明显影响性能，尽量少用；
    e.避免多次访问对象成员或函数中的全局变量，尽量将它们赋值给局部变量以缓存。

7.什么是跨域请求？请求如何解决跨域问题？

跨域请求 基于JavaScript的安全，JavaScript同源策略要求一个网站不能调用其它网站的js对象。构成跨域的条件就是一个页面的URL协议、域名、端口与另一个页面的URL只要有一个不同就构成了跨域请求。

解决跨域问题 jsonp、 iframe、window.name、window.postMessage、服务器上设置代理页面 

8.Apicolud、dcloud、appcan

跨平台app开发工具

9.什么是闭包？作用和好处是什么？与普通函数的区别?
闭包 由外部定义的内部函数，有权访问另一个函数作用域中的变量。闭包就是函数中的函数，里面的函数可以访问外面函数的变量，外面的变量的是这个内部函数的一部分。
闭包的作用和好处

a.闭包给访问外部函数定义的内部变量创造了条件。将关于函数的一切封闭到了函数内部，减少了全局变量。

b.可以使变量长期保存在内存中，生命周期比较长。

c.闭包不能滥用，否则会导致内存泄露，影响网页的性能。闭包使用完了后，要立即使用资源，将引用变量指向null。
与普通函数的区别

普通函数也能曝光内部的值，但是占用的内存无法释放且函数使用的变量定义到了函数外部不便于理解和管理。
b.函数每次执行时都会且只会初始化其内部变量，导致了闭包与普通函数的最大区别。
c.每次调用普通函数时他内部都会被初始化成一致状态，导致执行结果是一致的。
闭包不同，它的本质是内部函数，调用闭包只会初始化内部函数变量，外部函数的变量没有初始化，实现了变量值得传递。外部函数只在定义闭包时被初始化，闭包消亡时内存被收回。
10.正则

 .：匹配任何单个字符。

 [ ] ：匹配括号中的任何一个字符。

 ( ) ：将()之间括起来的表达式定义为“组”(group)，并且将匹配这个表达式的字符保存到一个临时区域,这个元字符在字符串提取的时候非常有用。

 | ：将两个匹配条件进行逻辑“或”运算。

 *：匹配0至多个在它之前的子表达式，和通配符*没关系。

 + ：匹配前面的子表达式一次或多次，和*对比（0到多次）。

 {n} ：匹配确定的n次。

 {n,} :至少匹配n次。

 {n,m}：最少匹配n次且最多匹配m次。

 ^另外一种意思：非！（暂时不用理解）

 $ ：匹配行结束符。

等价：
　　?,*,+,\d,\w 都是等价字符
　　？等价于匹配长度{0,1}
　　*等价于匹配长度{0,} 
　　+等价于匹配长度{1,}
　　\d等价于[0-9]
　　\w等价于[A-Za-z_0-9]。

常用运算符与表达式：
　　^ 开始
　　（） 域段
　　[] 包含,默认是一个字符长度
　　[^] 不包含,默认是一个字符长度
　　{n,m} 匹配长度 
　　. 任何单个字符(\. 字符点)
　　| 或
　　\ 转义
　　$ 结尾
　　[A-Z] 26个大写字母
　　[a-z] 26个小写字母
　　[0-9] 0至9数字

[A-Za-z0-9] 26个大写字母、26个小写字母和0至9数字
　　， 分割　
分割语法：
[A,H,T,W] 包含A或H或T或W字母
[a,h,t,w] 包含a或h或t或w字母
[0,3,6,8] 包含0或3或6或8数字
语法与释义：

基础语法 "^([]{})([]{})([]{})$"
正则字符串 = "开始（[包含内容]{长度}）（[包含内容]{长度}）（[包含内容]{长度}）结束" 
11.在移动端制作WEBapp优化页面的方案？

加载优化
(1)减少HTTP请求：合并CSS、JavaScript；合并小图片，使用雪碧图
(2)缓存：缓存一切可缓存的资源；使用长Cache（使用时间戳更新Cache）；使用外联式引用CSS、JavaScript
(3)压缩HTML、CSS、JavaScript：压缩（例如，多余的空格、换行符和缩进）；启用GZip
(4)无阻塞:CSS放在页面头部并使用Link方式引入;JavaScript放在页面尾部或使用异步方式加载
(5)使用首屏加载:首屏的快速显示，可以大大提升用户对页面速度的感知，因此应尽量针对首屏的快速显示做优化。
(6)按需加载:LazyLoad;滚屏加载;通过Media Query加载
(7)预加载:可感知Loading(如进入空间游戏的Loading);不可感知的Loading（如提前加载下一页）;对用户行为分析，可以在当前页加载下一页资源，提升速度。
(8)压缩图片:使用其它方式代替图片（使用CSS3；使用SVG；使用IconFont）;使用script;选择合适的图片（webP优于JPG；PNG8优于GIF）;选择合适的大小（首次加载不大于1014KB；基于手机屏幕一般宽度不宽于640）
提醒：过度压缩图片大小影响图片显示效果。
(9)减少Cookie:Cookie会影响加载速度，所以静态资源域名不使用Cookie。
(10)避免重定向:重定向会影响加载速度，所以在服务器正确设置避免重定向。
(11)异步加载第三方资源:第三方资源不可控会影响页面的加载和显示，因此要异步加载第三方资源。
脚本执行优化
(1)CSS写在头部，JavaScript写在尾部或异步。
(2)避免图片和iFrame等的空Src，空Src会重新加载当前页面，影响速度和效率。
(3)尽量避免重设图片大小，重设图片大小是指在页面、CSS、JavaScript等中多次重置图片大小，多次重设图片大小会引发图片的多次重绘，影响性能。
(4)图片尽量避免使用DataURL，DataURL图片没有使用图片的压缩算法文件会变大，并且要解码后再渲染，加载慢耗时长。　

12.响应式开发需要用到的技术？

(1) Media Query（媒体查询）：用于查询设备是否符合某一特定条件，这些特定条件包括屏幕尺寸，是否可触摸，屏幕精度，横屏竖屏等信息。

(2)使用em或rem做尺寸单位：用于文字大小的响应和弹性布局。

(3) 禁止页面缩放：<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no" />

(4) 屏幕尺寸响应

a) 固定布局：页面居中，两边留白，他能适应大于某个值一定范围的宽度，但是如果太宽就会有很多留白，太窄会出现滚动条，在PC页面上很常见。

b) 流动布局：屏幕尺寸在一定范围内变化时，不改变模块布局，只改变模块尺寸比例。比固定布局更具响应能力，两边不留白，但是也只能适应有限的宽度变化范围，否则模块会被挤（拉）得不成样子。

c) 自定义布局：上面几种布局方式都无法跨域大尺寸变化，所以适当时候我们需要改变模块的位置排列或者隐藏一些次要元素。

d) 栅格布局：这种布局方式使得模块之间非常容易对齐，易于模块位置的改变用于辅助自定义布局。

(5)宽度不固定，可以使用百分比

(6) 图片处理：图片的宽度和高度设置等比缩放，可以设置图片的width为百分比，height:auto;背景图片可以使用background-size 指定背景图片的大小。