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