MySQL入门完全指南及Linux系统下基本的安装教程_MySQL
1.内部构件和可移植性
2.列类型
众多列类型： 带符号/无符号整数，1、2、3、4、8字节长，FLOAT，DOUBLE，CHAR，VARCHAR，TEXT，BLOB，DATE，TIME，DATETIME，TIMESTAMP，YEAR，SET，ENUM，以及OpenGIS空间类型。请参见第11章：列类型。
定长和可变长度记录。
3.语句和函数
在SELECT和查询的WHERE子句中，提供完整的操作符和函数支持。例如：
对SQL GROUP BY和ORDER BY子句的全面支持。支持聚合函数(COUNT(), COUNT(DISTINCT ...)，AVG()，STD()，SUM()，MAX()，MIN()和GROUP_CONCAT())。
支持LEFT OUTER JOIN和RIGHT OUTER JOIN，采用标准的SQL和ODBC语法。
按照标准SQL的要求，支持表别名和列别名。
DELETE、INSERT、REPLACE和UPDATE返回更改（影响）的行数。连接到服务器时，可通过设置标志返回匹配的行数。
MySQL的SHOW命令可用于检索关于数据库、数据库引擎、表和索引的信息。EXPLAIN命令可用于确定优化器处理查询的方式。
函数名与表名或列名不冲突。例如，ABS是有效的列名。唯一的限制在于，调用函数时，函数名和随后的符号“(”之间不得有空格。请参见9.6 “MySQL中保留字的处理”。
可以将不同数据库的表混合在相同的查询中（就像MySQL 3.22中那样）。
4.安全
十分灵活和安全的权限和密码系统，允许基于主机的验证。连接到服务器时，所有的密码传输均采用加密形式，从而保证了密码安全。
5.可伸缩性和限制
处理大型数据库： 我们使用了MySQL服务器和含5千万条记录的数据库。我们还听说，有些用户将MySQL用于含60000个表和约50亿行的数据库。
每个表可支持高达64条索引（在MySQL 4.1.2之前为32条）。每条索引可由1～16个列或列元素组成。最大索引宽度为1000字节（在MySQL 4.1.2之前为500）。索引可使用具备CHAR、VARCHAR、BLOB或TEXT列类型的列前缀。
6.连接性
在任何平台上，客户端可使用TCP/IP协议连接到MySQL服务器。在Windows系统的NT系列中（NT、2000、XP或2003），客户端可使用命名管道进行连接。在Unix系统中，客户端可使用Unix域套接字文件建立连接。
在MySQL 4.1和更高的版本中，如果是以“--shared-memory”选项开始，Windows服务器还支持共享内存连接。客户端可使用“--protocol=memory”选项，通过共享内存建立连接。
Connector/ODBC (MyODBC)接口为使用ODBC（开放式数据库连接性）连接的客户端程序提供了MySQL支持。例如，可以使用MS Access连接到你的MySQL服务器。客户端可运行在Windows或Unix平台上。提供了MyODBC源。支持所有的ODBC 2.5函数，以及众多其他函数。
Connector/J接口为使用JDBC连接的Java客户端程序提供了MySQL支持。客户端可运行在Windows或Unix平台上。提供了Connector/J源码。
7.本地化
服务器可使用多种语言向客户端提供错误消息。请参见5.10.2节，“设置错误消息语言”。
对数种不同字符集的全面支持，包括latin1 (cp1252)、german、big5、ujis等。例如，在表名和列名中允许使用斯堪的纳维亚字符‘å'、‘ä'和‘ö'。从MySQL 4.1开始，提供了Unicode支持。
所有数据均以所选的字符集保存。正常字符串列的比较不区分大小写。
分类是根据所选的字符集（默认情况下，使用瑞典校对）进行的。启动MySQL服务器时，可更改该项设置。要想查看高级分类的示例，请参见Czech分类代码。MySQL服务器支持众多不同的字符集，这类字符集可在编译时和运行时指定。
8.客户端和工具
MySQL服务器提供了对SQL语句的内部支持，可用于检查、优化和修复表。通过mysqlcheck客户端，可在命令行上使用这类语句。MySQL还包括myisamchk，这是一种很快的命令行实用工具，可用于在MyISAM表上执行这类操作。请参见第5章：数据库管理。
对于所有MySQL程序，均能通过“-help”或“-?”选项调用，以获取联机帮助信息。
MySQL在Linux上的安装：
1，rpm包形式 (1) 操作系统发行商提供的 (2) MySQL官方提供的（版本更新，修复了更多常见BUG）www.mysql.com/downloads 关于MySQL中rpm包类型的介绍： MySQL-client 客户端组件 MySQL-debuginfo 调试MySQL的组件 MySQL-devel 想针对于MySQL编译安装PHP等依赖于MySQL的组件包 MySQL-embedded MySQL的嵌入式版本 MySQL-server 共享库 MySQL-shared 共享库 MySQL-shared-dompat 为了兼容老版本的共享库 MySQL-test MySQL的测试组件（在线处理功能） 安装方法： 首先可以从安装光盘中或者到mysql的网站上下载对应版本的rpm包如下：
接着我们可以使用rpm命令进行安装：
补充一点： -h 使用符号＃显示安装进度 -v 报告每一步操作的情况
2，通用二进制包 (1)新建用户以安全方式运行进程：
(2)安装并初始化mysql-5.5.28 首先下载平台对应的mysql版本至本地，这里是32位平台，因此，选择的为mysql-5.5.28-linux2.6-i686.tar.gz #
(3)为mysql提供主配置文件：
(4)修改配置文件： 修改此文件中thread_concurrency的值为你的CPU个数乘以2，比如这里使用如下行：
另外还需要添加如下行指定mysql数据文件的存放位置：
(5)为mysql提供sysv服务脚本：
(6)添加至服务列表：
(7)而后就可以启动服务测试使用了。
3，源码编译 （安装编译方式有点改变，配置过程无太大变动，所以后面不详细介绍各个步骤了） 若想在5.0系列的红帽系统上进行源码编译安装MySQL必须借助一个跨平台编译器cmake 所以： (1)首先安装cmake 安装cmake需要用make
使用此脚本来检测编译环境
(2)编译安装mysql-5.5.28 使用cmake编译mysql-5.5.28,选项的方式有所改变简单介绍一下。。 cmake指定编译选项的方式不同于make，其实现方式如下： cmake . cmake . -LH 或 ccmake . 查找可以使用的相关选项 指定安装文件的安装路径时常用的选项： -DCMAKE_INSTALL_PREFIX=/usr/local/mysql 指定安装路径 -DMYSQL_DATADIR=/data/mysql 数据安装路径 -DSYSCONFDIR=/etc 配置文件的安装路径 由于MySQL支持很多的存储引擎而默认编译的存储引擎包括：csv、myisam、myisammrg和heap。若要安装其它存储引擎，可以使用类似如下编译选项： -DWITH_INNOBASE_STORAGE_ENGINE=1 安装INNOBASE存储引擎 -DWITH_ARCHIVE_STORAGE_ENGINE=1 安装ARCHIVE存储引擎 -DWITH_BLACKHOLE_STORAGE_ENGINE=1 安装BLACKHOLE存储引擎 -DWITH_FEDERATED_STORAGE_ENGINE=1 安装FEDERATED存储引擎 若要明确指定不编译某存储引擎，可以使用类似如下的选项： -DWITHOUT__STORAGE_ENGINE=1 比如： -DWITHOUT_EXAMPLE_STORAGE_ENGINE=1 不启用或不编译EXAMPLE存储引擎 -DWITHOUT_FEDERATED_STORAGE_ENGINE=1 -DWITHOUT_PARTITION_STORAGE_ENGINE=1 如若要编译进其它功能，如SSL等，则可使用类似如下选项来实现编译时使用某库或不使用某库： -DWITH_READLINE=1 -DWITH_SSL=system 表示使用系统上的自带的SSL库 -DWITH_ZLIB=system -DWITH_LIBWRAP=0 其它常用的选项： -DMYSQL_TCP_PORT=3306 设置默认端口的 -DMYSQL_UNIX_ADDR=/tmp/mysql.sock MySQL进程间通信的套接字的位置 -DENABLED_LOCAL_INFILE=1 是否启动本地的LOCAL_INFILE -DEXTRA_CHARSETS=all 支持哪些额外的字符集 -DDEFAULT_CHARSET=utf8 默认字符集 -DDEFAULT_COLLATION=utf8_general_ci 默认的字符集排序规则 -DWITH_DEBUG=0 是否启动DEBUG功能 -DENABLE_PROFILING=1 是否启用性能分析功能 如果想清理此前的编译所生成的文件，则需要使用如下命令：
编译安装
更改属组
指定数据存放位置
创建配置文件 编辑配置文件
添加如下行指定mysql数据文件的存放位置：
创建执行脚本和启动服务
复制脚本
执行权限
添加到服务列表中
启动服务
启动mysql

Flexbox完全指南_html/css
我不是这篇文章的原创作者，我只是好文章的搬运工。原文地址 A Complete Guide to Flexbox
display该属性定义一个 flex container，根据不同取值定义为 inline 或 block 的 flex container。应用了该属性的元素为它的所有子元素创建了一个 flex context。
注意，CSS3 的多列布局对 flex 容器没有任何影响。
flex-direction
该属性建立主轴，规定了 flex container 中的 flex item 的排布方向。Flexbox 是一种单向布局概念，可以认为 flex item 都优先沿着水平行或竖直列布局。
flex-wrap
默认情况下，所有的 flex item 都将尽量保持在一个 line （行或者列，下同）之内。可以通过这个属性让 flex item 在需要的情况下换行或者换列。这里，新行或新列从哪里开始由 flex-direction 决定。
flex-flow该属性为 flex-direction 和 flex-wrap 的简写属性，同时定义了 flex container 的主轴和交叉轴。默认值为 row nowrap。
justify-content
该属性定义了沿着主轴的对齐方式。它被用来处理当所有 flex item 都已经放置完毕后的剩余空白空间。
align-items
该属性定义了在当前 line 中 flex item 沿着交叉轴布局的默认行为。可以认为它是针对交叉轴的 justify-content。
align-content
该属性用来在交叉轴还有空白空间的情况下控制 flex container 内的所有 line 的对齐方式。与 justify-content 控制 flex item 如何沿着主轴方向对齐的方式类似。注意： 单 line 情况下，该属性不生效。
order
在默认情况下，所有的 flex items 按照源代码中定义的顺序布局。但是， order 属性控制了 flex item 在 flex container 中显示的优先级。
flex-grow
该属性赋予 flex item 生长（grow）的能力。它接受一个无单位的值，并将其作为比例值，表示在 flex container 中，这个 flex item 能够占有多大比例的可用空间。如果所有的 flex item 的 flex-grow 属性都设置为1，那么 container 的剩余空间将被均匀的分配给所有 flex item。如果当中有一个 item 的 flex-grow 属性设置为2，那么 这个 item 将占有2倍于其他 item 占有的可用空间。
负值是非法取值。
flex-shrink该属性赋予 flex item 在必要的情况下收缩的能力。
负值是非法取值。
flex-basis该属性用于在分配剩余空间之前定义 flex item 的默认尺寸大小。它的取值可以为一个绝对长度值（比如 20%，5rem，等）或者是一个关键字。auto 关键字表示根据 flex item 自身的 width 和 height 属性取值确定。 content 关键字表示根据 flex item 的 content 来确定，但是目前并没有得到很好的支持。
如果该属性取值为0，那么在该 flex item 的 content 周围的额外空间将不被计算在内。如果取值为 auto，那么 flex item 的大小将根据 flex-grow 的取值来确定。可以参考这张图。
flex该属性为 flex-grow, flex-shrink 和 flex-basis 的混合简写方式。 其中第二个和第三个参数（flex-shrink 和 flex-basis）为可选参数。该属性的默认值为 0 1 auto。
align-self
该属性可以为每个 flex item 指定对齐方式。我们可以通过该属性修改 flex item 默认的或者由 align-items 指定的对齐方式。它的取值说明参考 align-items 的取值说明。
注意，float，clear 和 vertical-align 对 flex item 无任何影响。
更多实例请参考原文例子。

前端优化不完全指南|Aotuio「凹凸实验室」_html/css
历时144000000毫秒出山的前端优化篇，若你问我有什么感悟？
那我告诉你，看到毫秒啊，火箭啊，这些与优化相关的词，都有莫名的亲切感。
本文主要从 工作效率 、 速度性能 、 稳定性 、 响应式 、 兼容性 、 搜索SEO 、 信息无障碍 等方面进行讲解。
前端优化是一个让人技术提升的point，希望你也能从这里学到一些东西。
你是否经常处于这样的场景：从早上忙到晚上八九点，一会与产品经理沟通，一会在部门群聊一下新奇的东西，一会被设计美眉纠缠住拖不了身，有时还开不了部门的会议因为页面急着上线，然后继续加班~~~
怎么提高我们的工作效率？下面从四个方面讲解：
凡是时间管理，都会联想到计划这个词。我们先看看别人家的月计划表和周计划表，之所以周计划表为空，是希望你能把它下载并打印出来，行动从计划开始：
月计划表：
周计划表：
当然计划不要做得过于琐碎，且不要占用自己太多时间。做好计划之余，在执行过程中需要注意几点：
第一样工具，比如程序员杯子：
利用工具有什么好处呢？
选择好一个前端编辑器是比较重要的。目前sublime、webstorm和vim是比较常见的，建议不使用Dreamweaver。
sublime目前还是不错的选择，可以安装插件，比如BracketHighlighter 高亮显示、JsFormat、Emmet html/CSS快速编辑以及DocBlockr插件，快速输入jsDoc注释等，还可以自定义代码段snippets。
无论你使用哪种编辑器，你需要的是 熟悉这个编辑器并熟练它的快捷键 。
作为前端人员，首选的浏览器当然是chrome。推荐阅读 Chrome开发者工具不完全指南 一系列文章，它从一些基础的功能开始到它的一些高级性能分析器（Timeline、Profiles），熟悉chrome对我们的开发工作有很大的作用。
切图工具： photoshop cc切图之智能切图 、 cutterman
量色、测距工具：FastStone Capture、 马克鳗 - 设计稿标注
图片压缩： tinypng 、 智图
生成雪碧图： spritebox 、 CSS Sprite Generator 、cssgaga
调试工具：Fiddler 、weinre 、微信调试工具；
凡是重复的，必须使用工具自动完成。
工具众多，我们就有一种想法，能不能有一种工具能帮我们自动生成雪碧图、 css压缩、图片压缩等等，然后就出现了前端工程化。前端工程化一般可分为五个步骤：
（1） 初始，生成基础目录结构和样式库。
（2） 开发，实时预览、预编译。
（3） 构建，预编译、合并、压缩。
（4） 发布，将构建后静态文件发布上线。
（5） 打包，资源路径转换，源码打包 。
这里推荐一个工具 fis ，解决前端开发中自动化工具、性能优化、模块化框架、开发规范、代码部署、开发流程等问题。还有凹凸实验室研发的athena，O2Team构建项目流程工具，可以生成相应目录和代码，同时对项目进行编译， 一次安装，到处运行。
我所理解的程序员兼并聪明以及“懒惰”精神，推崇懒惰式开发，即把问题理解清楚，确保将要写的代码能真正的解决问题，这将会避免之后写出大量无用的代码，正所谓“懒”出效率。
我们的阅历和经验可以大大提高开发效率，思考代码的时间增加从而选出最优方案，因此写代码速度更快以及代码长度更短，对问题的透彻理解使调试代码的速度也更快。
根据阅历和经验，或借助其他人的，我们进行整理从而形成自己或团队的规范，这可大大提高我们的写码速度。
使用新技术如何提高我们的工作效率。一贯我们都使用我们熟悉的技术去开发一个技术处理方案，毕竟学习新技术的时间成本还是存在的。但是还是不能忽略一些新技术的存在，一般新技术包含了一些很棒的新特性，可以更加方便的实现很多复杂的操作，提高开发人员的效率，比如ES6。 用你的慧眼去积累新技术，会派上用场的 。
为什么需要前端性能优化？性能优化可以从哪几个方面入手？
遇到一个页面，5秒还没加载完成，那个菊花转啊转，或者页面完全白屏，那简直把人逼疯了。从用户体验的角度看，前端性能优化是非常有必要的。网页最长加载时间一般不能超过3秒。
首先我们需要确定网页的性能指标，可量化的目标以及可持续跟踪的优化数据是性能优化工作得以持续进行的保障，同时也是源动力！比如：
我们一般通过三种方式来检验我们的网页性能：
可喜可贺，W3C推出了一套 性能API标准 ，目的是简化开发者对网站性能进行精确分析与控制的过程，最终实现性能的提高。比如通过Navigation Timing记录的关键时间点来统计页面完成所用的时间，部分使用方法：
持续追踪性能数据，要选择合适的页面性能测量工具或API，一旦选定后，不再更换，以保证历史数据的可参照性。我们还要形成一种意识，达成性能联盟小组，对于重要的业务或者页面，一定要从性能的角度考虑问题，有理有据地拒绝有损于前端性能的业务需求或改动。
人人都知道雅虎军规，那我就来个截图吧！
以下，我们从服务端、网络、客户端三个方面来一一突破速度性能的提升。
通过在现有的Internet中增加一层新的网络架构，将网站的内容发布到最接近用户的 cache服务器内，通过DNS负载均衡的技术， 判断用户来源就近访问cache服务器取得所需的内容 。深圳用户访问遥远的美国服务器，当然不理想了。把静态内容分布到CDN可以减少用户响应时间20%或更多。
如果可以减少服务端的负担，在应用离线时可使用资源或加载资源更快，岂不乐哉？缓存利用可包括：添加 Expires 头，配置 ETag，使 Ajax 可缓存等。其实，恰当的缓存设置可以大大的减少 HTTP请求，也可以节省带宽 。
AppCache：
AppCache主要利用manifest 文本文件，告知浏览器被缓存的内容以及不缓存的内容。
manifest 文件可分为三个部分：
（1） CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存，等价于CACHE
（2） NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
（3） FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面
使用AppCache方案的步骤：
（1） 整理出需要缓存的静态文件列表，如juqery.js和gb.css。
（2） 配置服务器支持。
（3） 确定内容更新机制和浏览器兼容方案。
可通过以下方式减少请求数：
减少请求数对于速度优化来说最重要最有效的，特别是网络差的用户。一个完整的请求需要经过域名解析以及DNS寻址、与服务器建立连接、发送数据、等待服务器响应、接收数据的过程；每个请求都需要携带数据，因此每个请求都需要占用带宽；浏览器进行并发请求的请求数是有上限的。请求多了的情况，明显增加了网页的响应时间。一个页面由多个模块拼接而成，几个模块中请求了同样的资源时，就会导致资源的重复请求。
域名的要求是短小且独立。
短小可以减少头部开销，因为域名越短请求头起始行的 URI 就越短。之所以要求独立，因为独立域名不会共享主域的 Cookie，可以有效减小请求头大小，这个策略一般称之为 Cookie-Free Domain；另外一个原因是浏览器对相同域名的并发连接数限制，一般允许同域名并发 6~8 个连接，域名不是越多越好，每个域名的第一个连接都要经历 DNS 查询（DNS Lookup），导致会耗费一定的时间，控制域名使用在2-4个之间。另外注意：同一静态资源在不同页面被散列到不同子域下，会导致无法利用 HTTP 缓存。
HTTP 2 相比 HTTP 1.1 的更新大部分集中于：
稳定性的第一要求是可用。最起码的要求是页面得出来，要不然没法用了。
其次讲究的是页面的可维护性，假如页面挂了，多久可以恢复过来，另外考虑页面挂的期间是否可以采取静态页面处理等方式。
页面的稳定性其实和前端安全挂钩，即使页面可以出来了，但是不能保证不会被黑掉，下文从前端安全的方面讲解。
XSS (Cross Site Script) ，跨站脚本攻击，往Web页面里插入恶意html代码。特点是攻击者的代码必须能获取用户浏览器端的执行权限，要杜绝此类攻击出现可以在入口和出口进行严格的过滤。
三种类型：
（1） 反射型XSS：一次性；将包含注入脚本的恶意链接发送给受害者。
（2） 持久型XSS：用户输入的数据“存储”在服务器端，比如一条包含XSS代码的留言。
（3） DOM XSS：使用一些eval等有输出的语句意味着多了一份被XSS的风险。
应对策略：
CSRF(Cross Site Request Forgery)，跨站点伪造请求，通过伪造连接请求在用户不知情的情况下，让用户以自己的身份来完成攻击者需要达到的一些目的。
cookie劫持，通过获取页面的权限，在页面中写一个简单的到恶意站点的请求，并获取用户的cookie登录某些站点。
对于crsf 和cookie 劫持的策略：
国内的众多网站都没有实现全站HTTPS。这是目前为止最重要的一步，所有的数据在发送之前就会被加密，攻击者无法查看或篡改数据包的内容。HTTPS可以理解为HTTP+SSL/TLS，通过数据加密、校验数据完整性和身份认证三种机制来保障安全。HTTPS的缺点是网站在加上TLS证书时，可能导致RTT往返时延增加，并且 HTTPS通信过程的非对称和对称加解密计算会产生更多的服务器性能和时间上的消耗，但是这是可以优化的，这里就不细说了。
首先了解一下同源策略：
不建议使用JSONP，因为JSONP通常在脚本中写一个回调函数，然后把回调函数的名字写在请求的URL中，因此如果请求数据的服务器被黑了，那么黑客就能在返回的数据中植入恶意代码，从而窃取用户的隐私信息。
跨域资源共享CORS允许资源提供方在响应头中加入一个特殊的标记，使你能通过XHR来获取、解析并验证数据。这样就能避免恶意代码在你的应用中执行。在响应头中加入的标记如下：
如果对Access–Control-Allow-Origin设置为*其实是比较危险的，如果没有携带会话认证意味着信息被公开在全网，建议设置具体的域名，而且跨域的时候记得带上session id；严格审查请求信息，比如请求参数，还有http头信息，因为 http头可以伪造。
CSP指定网站上所有脚本和图片等资源的源站点，也能阻止所有内联（inline）的脚本和样式。即使有人在页面评论或者留言中嵌入了脚本标签，这些脚本代码也不会被执行。可通过两种方式设置，如果 HTTP 头与 Meta 定义同时存在，则优先采用 HTTP 头中的定义：
通过HTML的Meta标签，比如只允许脚本从本源加载：
其他策略：
缺点：
默认情况下，所有的内联JavaScript脚本都不会被执行，因为浏览器无法区分自己的内联脚本和黑客注入的脚本。
CSP还会默认阻止所有eval()风格的代码的执行，包括setInterval/setTimeout中的字符串和类似于new Function(‘return false’)之类的代码。
利用iframe进行跨源：HTML5为iframe提供了安全属性 sandbox，iframe的能力将会被限制。
Secure能确保cookie的内容只能通过SSL连接进行传输。Secure和HttpOnly属性告诉浏览器cookie的内容只能分别通过HTTP(S)协议进行访问，从而避免了被轻易窃取，比如禁止从JavaScript中的document.cookie访问，因此cookie在浏览器document中不可见了。如果单独使用的话，无法全面抵御跨站点脚本攻击，通常和其他技术组合使用。使用方法如下：
X-Content-Type-Options 告诉浏览器相信此服务器下发的资源的类型，防止类型嗅探攻击。
HPKP(Public Key Pinning) Public Key Pinning 是一个response 头，用来检测一个证书的公钥是否发生了改变，防止中间人攻击。
HSTS (HTTP Strict-Transport-Security) 强制使用TSL作为数据通道。
html5有很多新的特性能力，然而能力越大，被攻破后的危险就越大。HTML5 对xss的影响主要体现在:
比如localstorage只能通过js设置和获取，导致的结果是不能像cookie一样设置httponly等属性，所以localstorage中不能存放敏感信息，最好能够在服务端进行加密，可以配合CORS来获取网站的localstorage的信息。
响应式布局简而言之，就是一个网站能够兼容多个终端，可以为不同终端的用户提供更加舒适的界面和更好的用户体验。
比如凹凸实验室博客页面在PC端、iPad、手机端的排版：
PC端：
iPad：
手机端：
估计很多人对这句话都有体会：IE虐我千百遍，我待IE如初恋。当然，除了 IE 上有兼容性问题，其他浏览器比如 Android 上的低版本浏览器也有较多问题。是否继续保持对低端浏览器的兼容性，我们可以用数据跟产品经理或者老板说话，减少我们的工作量，最好在项目之前就定下来支持最低支持的版本是什么，然后设计一个对应兼容方案。以下是百度统计的2015年的浏览器市场份额数据：
兼容性的原则： 渐进增强与平稳退化 。就是说，在低级浏览器能够保证其可用性和可访问性；渐进增强，在保证代码、页面在低级浏览器中的可用性及可访问性的基础上，逐步增加功能及用户体验。
如果出现兼容性问题了，怎么处理：
淘宝首页在兼容性上做了一个小创新：Html钩子在html上加上操作系统、浏览器内核、浏览器类型、CSS3动画支持、IE各版本类，好处在于：
淘宝首页html钩子：
兼容性问题是老生常谈的问题了，团队之间共同努力形成一个bug兼容性积累文档，是最好不过的了。
网站需要有一个良好的导航，控制根目录和各子目录的关键，通过sitemap可以帮助网站主了解网站结构，也方便搜索引擎收录整个站点。
信息无障碍一般可以从以下几点入手：
具体可参考 无障碍阅读
通过前端动画技术给页面进行优化，比如：
requireJs框架特性：
场景如下：
页面一：去一个网站买东西，未登录状态下，进入首页；
页面二：然后新窗口打开任意页面，登录并成功返回。
再次访问页面一，发现页面还是未登录状态，实际上用户已经登录了，这种体验是很差的。我们是不是有什么办法可以实现多标签状态同步呢？有的，利用Page Visibility：