├── .DS_Store ├── .desktop ├── 2015-7_share.md ├── FE-mind.png ├── README.md ├── Web+组前端入门方法.html ├── blog ├── Front-End Performance Checklist 2017_CN .md ├── Task, mictask, queues and schedules(翻译).md └── 对区块链的一些思考.md ├── frontend-compare-score-2016.jpg ├── gulpfile.js ├── log.txt ├── module.md ├── webpack.config.js ├── 代码规范.html ├── 作用域.png ├── 回调地狱.jpg ├── 基于大数据的音乐推荐及展示云平台-陈威特.doc ├── 基本类型转化.png ├── 大一暑假计划方案一.md ├── 技术社区需求.md ├── 软件备忘.md └── 闭包的解释.png /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mrwaite/Share/e0cbf85a1790eb396f09cc735c262c22037303e9/.DS_Store -------------------------------------------------------------------------------- /.desktop: -------------------------------------------------------------------------------- 1 | [Desktop Entry] 2 | Encoding=UTF-8 3 | Name=到 的链接 4 | Type=Link 5 | URL=file:///home/mrwaite/FE/gulp/gulpfile.js 6 | Icon=application-javascript 7 | -------------------------------------------------------------------------------- /2015-7_share.md: -------------------------------------------------------------------------------- 1 | # Share 2 | Share 3 | 4 | ## 框架&插件： 5 | 6 | [layer： web弹窗/层解决方案](http://layer.layui.com/) 7 | 8 | [响应式用户交互组件库](https://github.com/bh-lay/UI) 9 | 10 | [Bootshrap&Bootstrap相关优质项目推荐](http://www.bootcss.com/) 11 | 12 | [jQuery API 中文文档](http://www.css88.com/jqapi-1.9/) 13 | 14 | [dropzone.js 拖拽文件上传js插件 ](https://www.renfei.org/blog/dropzone-js-introduction.html) 这是我找的，应该还有其他的 15 | 16 | [dropzone.js官网](http://www.dropzonejs.com/) 17 | 18 | ## 小工具： 19 | 20 | [在线小工具](http://tool.lu/) 21 | 22 | [Font Awesome](https://fortawesome.github.io/Font-Awesome/) 23 | 24 | [css特效图标CreativeLinkEffects](http://tympanus.net/Development/CreativeLinkEffects/) 25 | 26 | [前端导航](http://fenav.com/#/index) 27 | 28 | 29 | ## 设计&照片： 30 | [设计达人](http://www.shejidaren.com/) 31 | 32 | [优设](http://www.uisdc.com/) 33 | 34 | [Web Design Freebies](http://webdesign-freebies.tumblr.com/) 35 | 36 | [Flickr yahoo旗下的photo sharing](https://www.flickr.com/) 37 | 38 | [500px 摄影社区](https://500px.com/) 39 | 40 | 41 | ## 杂物： 42 | 43 | [GitHub上整理的一些工具](http://webres.wang/useful-tools-from-github/) 别人整理的。。好多资源。 44 | 45 | 46 | ## 分享会相关： 47 | 48 | [浏览器的工作原理：新式网络浏览器幕后揭秘](http://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/#The_browsers_we_will_talk_about) 49 | 50 | [css规范总结](https://segmentfault.com/a/1190000004496741) 51 | 52 | [回流与重绘：CSS性能让JavaScript变慢？](http://www.zhangxinxu.com/wordpress/2010/01/%E5%9B%9E%E6%B5%81%E4%B8%8E%E9%87%8D%E7%BB%98%EF%BC%9Acss%E6%80%A7%E8%83%BD%E8%AE%A9javascript%E5%8F%98%E6%85%A2%EF%BC%9F/) 53 | 54 | [6种清理浮动的方法](http://lightcss.com/all-about-clear-float/) 55 | 56 | [CSS border三角、圆角图形生成技术简介](http://www.zhangxinxu.com/wordpress/2010/05/css-border%E4%B8%89%E8%A7%92%E3%80%81%E5%9C%86%E8%A7%92%E5%9B%BE%E5%BD%A2%E7%94%9F%E6%88%90%E6%8A%80%E6%9C%AF%E7%AE%80%E4%BB%8B/) 57 | 这个我记得上次去360招聘会的时候月影有问到这个问题。 58 | 59 | 60 | [HTML的解析和css的回流与重绘的自己初略理解](http://my.oschina.net/Lonniecode/blog/134968?fromerr=b2ZoCeys) 61 | 62 | ## 资源： 63 | 64 | [高质量前端资源汇聚div.io](http://div.io/#/welcome) 65 | 66 | [reveal.js: css3幻灯片效果](http://lab.hakim.se/reveal-js/#/20) 67 | 68 | [百度静态资源公共库](http://cdn.code.baidu.com/) 69 | 70 | [cdnjs.com:We host all the popular libraries - JavaScript, CSS, SWF, images, etc! ](https://cdnjs.com/about) 71 | 72 | 73 | ## 网上课程： 74 | 75 | [udacity](https://www.udacity.com/nanodegree) 76 | 77 | [MDN JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) 78 | 79 | [segmentfault:专注于程序员开发者的社区平台](https://segmentfault.com/) 80 | 81 | [MOOC.](http://mooc.guokr.com/) 82 | 83 | 84 | 85 | **下面的这些网上课程的平台，我就不上链接了** 86 | 87 | edx 88 | 89 | codecademy 90 | 91 | Udacity 92 | 93 | FreeCodeCamp 94 | -------------------------------------------------------------------------------- /FE-mind.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mrwaite/Share/e0cbf85a1790eb396f09cc735c262c22037303e9/FE-mind.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## share 2 | 3 | 自己平时积累的资料 4 | 5 | ## blog 6 | 7 | 详见 issue 8 | 9 | 10 | -------------------------------------------------------------------------------- /Web+组前端入门方法.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Web 组前端入门方法 6 | 440 | 441 | 442 |

Web 组前端入门方法

web 组

注:本文由 leozhang2018 整理，集结于网络上多方资源,不可公开传播，仅限于网协 web 组内部参阅，已经加入数字指纹，如有外泄，一律严惩不贷。

Front-End

结合个人经历总结的前端入门方法，总结从零基础到具备前端基本技能的道路、学习方法、资料。由于能力有限，不能保证面面俱到，只是作为入门参考，面向初学者，让初学者少走弯路。

互联网的快速发展和激烈竞争，用户体验成为一个重要的关注点，导致专业前端工程师成为热门职业，各大公司对前端工程师的需求量都很大，要求也越来越高，优秀的前端工程师更是稀缺。个人感觉前端入门相对容易，但是也需要系统地认真学习，在打好基础后坚持学习，成为优秀前端工程师也只是时间问题。

学习任何知识最重要的都是兴趣，如果经过一段时间的学习感觉不喜欢，那可能强迫自己学习是很痛苦的，效果也不会好，毕竟这很可能就是以后很多年生存的技能。不过随着互联网行业的发展，前端必然是Web开发人员需要学习的知识，有时候是没有专业前端工程师一起合作的，所以即使不做专门的前端工程师，掌握基本的前端技能为工作带来方便。

必备基础技能

前端技能汇总
482 | 该项目详细记录了前端工程师牵涉到的各方面知识。在具备基本技能之后可以在里面找到学习
483 | 的方向，完善技能和知识面。

以下是个人觉得入门阶段应该熟练掌握的基础技能：

在掌握以上基础技能之后，工作中遇到需要的技术也能快速学习。

基本开发工具

恰当的工具能有效提高学习效率，将重点放在知识本身，在出现问题时能快速定位并
491 | 解决问题，以下是个人觉得必备的前端开发工具：

文本编辑器：

浏览器：

调试工具：
499 | - 推荐 Chrome 自带的 Chrome develop tools，可以轻松查看 DOM 结构、样式，通过控制台输出调试信息，调试 JavaScript，查看网络请求等。
500 | - Firebug Firefox 浏览器御用调试工具。

辅助工具：

科学上网(翻墙)工具：
506 | 实验室自带科学上网和国外站点加速,旨为提高大家效率。遇到问题，中文搜索不到的可以英文搜索 Google，尽情的浏览 stackoverflow 环境已经完备，就看你来不来了。

学习方法和学习目标

方法：

    507 |
  1. 入门阶段反复阅读经典书籍的中文版，书籍中的每一个例子都动手实现并在浏览器中查看效果
    2. 508 |
  2. 在具备一定基础之后可以上网搜各种教程、demo，了解各种功能的实际用法和常见功能的实现方法
    3. 509 |
  3. 阅读HTML，CSS，Javascript标准全面完善知识点
    4. 510 |
  4. 阅读前端牛人的博客、文章提升对知识的理解
    5. 511 |
  5. 善用搜索引擎
    6. 512 |

目标：

    513 |
  1. 熟记前面知识点部分的重要概念，结合学习经历得到自己的理解
    2. 514 |
  2. 熟悉常见功能的实现方法，如常见CSS布局，Tab控件等。
    3. 515 |

入门之路

以下是入门阶段不错的书籍和资料，列表后面有一些电子版下载链接

    516 |
  1. HTML 先看《HTML & CSS: Design and Build Websites》1-9章，然后《HTML5: The Missing Manual》1-4章。
    2. 517 |
  2. CSS 先看《CSS: The Missing Manual》，然后[《CSS 权威指南》],之后《精通 CSS》
    3. 518 |
  3. Javascript 先看《Javascript高级程序设计》，然后《JavaScript权威指南》
    4. 519 |
  4. HTTP 看《HTTP 权威指南》
    5. 520 |
  5. 在整个学习过程中 HTML,CSS 以及 JavaScript会有很多地方需要互相结合，实际工作中也是这样，一个简单的功能模块都需要三者结合才能实现。
    6. 521 |
  6. 动手是学习的重要组成部分，书籍重点讲解知识点，例子可能不是很充足，这就需要利用搜索引擎寻找一些简单教程，照着教程实现功能。以下是一些比较好的教程网址:
    522 |
    7. 529 |
  7. 原生 Javascript 是需要重点掌握的技能，在掌握原生 Javascript 的基础上推荐熟练掌握 jQuery，在实际工作中用处很大，这方面的书籍有《Learning jQuery》前往 jQuery 官网看官方文档
    8. 530 |
  8. 建一个https://github.com/账号，保存平时学习中的各种代码和项目。
    9. 531 |
  9. 有了一定基础之后可以搭建个人博客，记录学习过程中遇到的问题和解决方法，方便自己随时查阅也为其他人提供了帮助。
    10. 532 |
  10. 经常使用 Google 搜索英文资料应该经常参阅来自 Stackoverflow 的高质量答案，国内的可以参考Segmentfault,遇到问题可以直接在这里搜索，如果有精力，注册一个账号为别人解答问题也能极大提高个人能力。注意平时也要提高英语能力。
    11. 533 |
  11. 经典书籍熟读之后，可以打开前面必备基础技能部分的链接。认真读对应标准，全面掌握知识结构。
    12. 534 |

检验成果

亲自实现下面的例子，能兼容 IE6+ 就最好了

继续提高

有了前面的基础之后，前端基本算是入门了，这时候可能每个人心中都有了一些学习方向，如果还是没有。
540 | 可以参考前面必备技能部分提到的那个项目，从里面选一些进行发展学习。以下是一些不错的方面：
541 | - Gulp：前端自动化工具，提高工作效率
542 | - Grunt：前端自动化工具，提高工作效率
543 | - Less：优秀的 CSS 预处理器
544 | - Sass：优秀的 CSS 预处理器
545 | - Bootstrap：优秀的 CSS 框架，对没有设计师的团队很不错，与 Less 结合使用效果完美
546 | - Requirejs：AMD规范的模块加载器，前端模块化趋势的必备工具
547 | - Node.js：JavaScript 也可以做后台写服务端，前端工程师地位更上一步
548 | - AngularJS：做 SPA--Single Page Application （单页应用）的好工具
549 | - 移动端 WEB 开发：智能手机的普及让移动端的流量正在逐步赶超 PC 端
550 | - Javascript 内存管理：SPA 长期运行需要注意内存泄露的问题
551 | - High Performance JavaScript(Build Faster Web Application Interfaces) 高性能 JavaScript
552 | - Best Practices for Speeding Up Your Web Site：重要技能之一————加速你的网页，前端性能实践
553 | - 读 jQuery 源码

书籍推荐

以下是一些不错的书籍、网站、教程推荐。

技能

前端的技能其实除了 JavaScript（包括NodeJS）、HTML、CSS 以外，还有很多。其实前端的技能树很大，这里只能列一些开发中见到的说一说

语言基础

JavaScript：
566 | * 作用域链、闭包、运行时上下文、this
567 | * 原型链、继承
568 | * NodeJS 基础和常用API

CSS：
569 | * 选择器
570 | * 浏览器兼容性及常见的hack处理
571 | * CSS 布局的方式和原理（盒子模型、BFC、IFC等等）
572 | * CSS 3，如 Animation、Gradient、等等

HTML：
573 | * 语义化标签

进阶

JavaScript:
574 | * 异步控制（Promise、ES6 generator、Async）
575 | * 模块化的开发方式（AMD、CMD、KMD等等）
576 | * JavaScript 解释器的一些相关知识
577 | - 异步 IO 实现
578 | - 垃圾回收
579 | - 事件队列
580 | * 常用框架使用及其原理
581 | - jQuery：基于选择器的框架，但个人认为不能叫框架，应该算工具库，因为不具备模块加载机制，其中源码很适合阅读钻研
582 | - AngularJS/Avalon等 MVVM 框架：着重理解 MVVM 模式本身的理念和双向绑定的实现，如何解耦
583 | - underscore：优秀的工具库，方便的理解常用工具代码片段的实现
584 | - polymer/React: 组件化开发，面向未来，理解组件化开发的原理

CSS和HTML：主要是CSS3的特性和HTML5的特性，以及浏览器处理的流程和绘制原理
585 | * DOM树、CSSOM树、渲染树的构建流程及页面渲染的过程
586 | * 解析HTML、CSS、JavaScript时造成的阻塞
587 | * HTML5相关
588 | - SVG及矢量图原理
589 | - Canvas开发及动画原理（帧动画）
590 | - Video和Audio
591 | * flex box布局方式
592 | * icon fonts的使用

常用NodeJs的package：
593 | * koa
594 | * express
595 | * underscore
596 | * async
597 | * gulp
598 | * grunt
599 | * connect
600 | * request

一些理念：
601 | * 响应式Web
602 | * 优雅降级、渐进增强
603 | * don`t make me think
604 | * 网页可用性、可访问性、其中的意义
605 | * SEO搜索引擎优化，了解搜索引擎的原理
606 | * SPA的好处和问题

性能优化：
607 | * 减少请求数量（sprite、combo）
608 | * 善用缓存（application cache、http缓存、CDN、localstorage、sessionstorage，备忘录模式）
609 | * 减少选择器消耗（从右到左），减少DOM操作（DOM和JavaScript解释器的分离）
610 | * CSS的回流与重绘

项目
未来
其他

有些东西不是考敲码就能弄好的，我参与实习的时候感受到了很多，这些是我遇到的也是我感觉自己做的不好的地方
642 | * 对于业务的思考：我个人这方面非常欠缺，所以放在最前面，在敲码前要多思考业务
643 | * 交流和沟通能力：这个非常重要，前端同时需要与项目经理、产品、交互、后台打交道，沟通不善会导致很多无用功，延缓项目
644 | * 知识管理、时间管理：input和output的平衡，output是最好的input。如何做好分享，参与社区，做好交流，作好记录
645 | * 对新技术的渴望，以及敢于尝试

入门书

入门可以通过啃书，但书本上的东西很多都已经过时了，在啃书的同时，也要持续关注技术的新动态。这里推几本我觉着不错的书：

一些不错的网站

历程

以前是做Java SSH的，半路出家做的前端，所以水平比较弱，遇到问题也比较多。基本上入门靠看书和W3C School上的教程，以及一些前端博客，如汤姆大叔的博客。以前也只是使用jQuery，原生js也没有太多的钻研，后来逐渐看了很多本动物书，比如老道的语言精粹等等。从这些书中学到了很多语言层面的知识。但这显然是不够的，所以我经常会去社区上看看大家在谈论什么，然后去看看相关的资料，感兴趣就会多找些资料看看，或者写一写demo。学CSS主要就是通过这种方式。后来开始更多的关注各路大牛的博客和一些比较深的书籍，以及关注一些新的知识和框架，并且不断地练手提交代码到github，这样也学到了很多知识。在实习的过程中，切身参与到实际项目开发之中，能学到很多在学校学不到的理念和思维，这点也有很大的帮助。不说了，我要去搬砖求offer了...

zwl4488的学习经历

MrRaindrop的学习经历

应qiu神的邀请分享一下前端学习经验，这里对前端知识体系架构就不做总结了，各位大神们的总结已经相当到位了，我就贡献几个个人认为还比较有用的链接大家研究研究就好，然后主要分享一下我在前端学习过程中遇到的问题和总结的经验教训吧，如果能帮到想要入门的FE初学者（我就姑且假定为本文的读者受众类型了），让他们少走点弯路，每走一步都知道自己下一步的方向，这是最好了。各位大神的总结和分享详见qiu神整理的FE-learning。

先说下，前端这个东西每个人都可以有适合自己的学习方法，这篇仅作参考，写的有点乱，各位凑合看。

缘起

我是属于误打误撞进了前端，之前一直往做游戏的方向去来着，搞过游戏网站，玩过游戏引擎，比如unity，unreal这种商业引擎，捣鼓了几个游戏原型，不过自打研一进了实验室，直接就被导师派去写了js，导师给了我半个月时间让我写个基于百度地图api的数据展示页面，虽然这个时间还是相当宽裕的，不过之前没怎么写过js，也不会用地图api，于是我就一边啃着《Javascript权威指南》（犀牛书）一边参考实验室前人留下的“代码”，总算是把功能都写出来了。那个页面算我的js入门作了，也是我前端学习路线的开始。

681 |

现在想来，虽然指派了去做前端，但是一直做下去并做好还是得靠兴趣维持，当然前端是一个趣味性十足的技术领域，而且社区每天都很“热闹”。

682 |

项目，下一个项目

我个人认为前端的学习，初学阶段你可以完全脱离开书本，以项目驱动。虽然我个人是从犀牛书开始啃的，不过如果你没有充足的时间，或者觉得啃大部头乏而无味的话，还是别像我这样。当然了如果决定啃书最好是把书里的例子都跟着敲一遍的。我上研之前没接触过js，4月份还没开学呢就被直接被导师甩了个百度地图api的项目到脸上，接着就是各种ERP，地图数据展示，虽然换着花样来一点不重样，不过基本上都是前端的活，SSH和android开发也打过酱油，整个实验室就我一个人写前端敢信？富客户端SPA时代的后端就是一个restful接口，代码量基本都在前端啊，写的我一个人怎一个爽字了得...期间跟着导师感受了一把创业，每天从7点搞到晚上10点，也算是经历了一段快速成长期。

683 |

掌握一门技术先掌握它的大体框架，想一个能实现的点子，做一个能跑就行的demo，再去完善它的细节，等到demo完成了，对这门技术有了一个感性的认识，再去啃书，收获会大很多。我从开始原生js写到jquery，再到extjs，再到angularjs，从导师指定技术，到自己做技术选型，一个项目接着一个项目的练，就跟打怪升级似的。当然没有项目就去自己创造项目，动手实现自己的想法是件有乐趣和成就感的事。

684 |

收集癖和知识管理

前端学习有个特点，很多东西都很零碎，分散，需要你自己去整理、归纳和总结。在微博、知乎上follow了众多的大神，你不仅仅是为了听八卦，大神们的只言片语有时候留下的是无尽的余味，很有可能一个不经意提到的一个词就成为你下一个学习的目标。收集这些信息，善用google，提问，思考。就像游戏里的收集要素，前端学习也是充满搜集要素的一个“游戏”，只不过你需要一个知识管理工具来充当物品栏和仓库，我所知道的大牛们无一不是知识管理工具的重度使用者。以前用的oneNote，那时候还没绑定到云存储，现在基本上用evernote，笔记已经累计到1200+篇。书签一直打算用delicious，因为它是基于tag管理的，但一直没用起来。当然重点不在于这些工具，但是趁手的工具可以提高你的学习效率。最关键当然是随时保持旺盛的学习欲望，你的目标是了解有关前端的一切（当然不是所有都要掌握，因为毕竟你的精力有限，而且现实的说这也不太可能）。

跟对神

这个可控性貌似不大...跟对老大这个就不多说了，一定程度要看造化。不过话说回来，多跟身边的高手交流是王道，这个高手不一定要多高，但是一定要对技术有热情。研一的时候热情高涨，每天7点进实验室门，然后发现有个家伙居然比我还早到。后来发现这家伙上午就走了，下午又来了，而且导师对此习以为常，原来这家伙晚上不睡觉通宵写代码，上午才跑回去睡。后来经常和这位神讨论问题，每次感觉经验值蹭蹭蹭的往上涨。然后实验室还有一位神，被前面这位通宵神形容为“只能望其项背，一直在追赶，从来没赶上”，两位神的特点都是什么都了解一点，所以什么都能跟你讨论得起来，我有段时间做了个读书计划，从c/c++到vc/mfc再到unix网络编程，最后一路看到java核心技术和MSDN上的C#编程指南，和神们也能扯得很high了。

685 |

总之就是这两位神把我拉进了坑，或者说从一个坑跳进另一坑，虽然两位神都不是搞前端的，不过技术之间总有相通之处。

686 |

读书

读书，多读书，读好书。在刘未鹏的博客里看到过一个公式，你第一个月的工资等于之前买过（读过）的技术书价格总和（这里说的技术书指那些经典的公认的好书）。讨论这个公式的正确性似乎没什么意义，然而它的合理性是毋庸置疑的，那就是多读经典技术书。最极端的一个例子，google的徐宥在我的大学里面说他扫荡了图书馆的整个TP312书架...对于前端的经典书籍，后面列了一个我收集的前端书列（如果有遗漏的前端经典好书，还请留言告诉我），有条件可以尝试刷一遍这些书，我也是在找完整的时间去啃完它们。之前说的，前端知识点松散，收集零散的知识点，从博客里快速学习等，这些只是前端学习的一个方面，如果你要想深入理解一个知识体系，了解它的来龙去脉，对它建立系统认识，读经典书还是必不可少的。

我从最开始啃完犀牛书，然后接着去看了其他一些和前端干系不大的经典技术书，再后来通过实验室的项目和自己弄的一些小项目逐渐对前端领域比较上路以后，又看了《Javascript模式》、《Javascript设计模式》、《编写可维护的Javascript》，后来了解到node并开始用node搞点小玩意儿，又看了本《NodeJS up and run》和《Mongodb权威指南》，不过感觉前者略坑。那会儿朴灵那本深入浅出（晒书么么哒）还没出，后来出了就去图书馆借来看完，这么看下来感觉还不错，不过感觉看的还是偏少了，还需要继续刷（参照上面的书列）。

前端的定位

前端的定位关乎到你需要吸收什么样的知识和技能，决定在技术世界里你对什么需要格外敏感。如果你认为前端仅仅停留在切页面，实现交互和视觉的要求，那你对前端的认识还停留在初级阶段。阿里终面的时候我问了考官这么个问题：前端技术日新月异，范围越扩越宽，标准越来越丰富，似乎任何一个触角都能伸出很远。怎么给前端一个合适的定位？考官给我分析了半天，然后总结成一句话，就是用户和网站的联结者，用户体验的创造者（原话不是这样，但大体是这个意思）。也就是说前端的终极目标其实就是创造用户体验，提升用户体验，以用户体验为中心。不管你是从交互设计上下手，还是从性能优化出发，或者改进工作流提升工作流效率，最终都是为了创造和提升用户体验，最终都要体现到用户体验这一点上来。我认为这个总结非常有道理（当然“用户体验”这个词太宽泛了，并且不仅仅是前端工程师的范畴，比如开发后台的时候对一个数据处理过程进行优化，提升了整体性能，这也是对用户体验的一个提升）。

现在的前端工程师做到一定阶段不可避免会接触到很多比切页面、实现视觉要求、实现交互等更深入的问题，比如前端自动化、图像编程、性能优化等等，再往后推一点就是PHP/JSP/ASP/nodeJs，过去后端模板一般属于后端的范畴，现在随着前端架构的演进，可能会让你去写后端模板的代码，需要用到后端语言（PHP/Java/C#等），这就是所谓大前端（然而这与前端的定位并不是相背离的，大前端处理的依然是与用户接触的部分，仍然是对用户体验的优化）。可能最常见或者被谈论最多的就是node，其实这几种技术选型都可以，bat三家据说百度用PHP比较多，阿里用node比较多。

玉伯在他的博客里提过所谓全端是横向的，全栈是纵向的。全端即所有的终端说白了都是前端，因为都关乎到用户体验，直接和用户接触。适应多终端的开发，要求你在web前端的基础上，可能还要去扩展android开发和ios开发的知识，好在由于hybrid开发方式的流行，对使用native语言开发的技能会要求的不那么深入。

全栈可以说是最适合初创公司的一种发展类型，广义上认为是从前端干到后端，从开发干到运维，这种就不说了，一般人应该不会想要去往这个方向发展，想要成为这种意义上的full-stack dev的，可能用不着来看我这篇文章了；而狭义上的全栈特指使用js语言从前端写到架设在nodeJs上的后端，前后端统一语言，统一编程模型，甚至公用同一套代码。更多了解全栈开发可以看看玉伯这篇说说全栈工程师。

以上是我对前端以及衍生出来的技术路线的一些浅薄理解，学习一个领域掌握它的整体上的走向和趋势还是挺重要的。另外如果想要对前端学习方向、职业成长路径有一个整体的认识，推荐看看拔赤总结的这篇前端开发十日谈。

最后

贡献几个对前端学习、面试有帮助的链接：

zyr2014的学习经历

zhangtaibai的学习经历

byr论坛yiyizym的建议

与grunt相比，学习gulp会比较简单

做SPA的话，推荐backbone.js和 backbone.marionette.js

翻墙不用折腾，花十块钱买一个月的 红杏。

把基础打扎实了再学这些都没问题。

html 没什么好说的，有空学学html5。

css 尽量看文档 ，因为很多中文资料都各执一辞，看多了反而会糊涂。

有个网站可以查找html/css标签、属性在各个浏览器中的支持情况，挺好用的。

javascript 就看 javascript高级程序设计 。不过这么厚的书看过就会忘。对javascript核心概念的讲解：对象/原型链/ 构造函数/执行上下文/作用域链/闭包/this，这里有篇不错的文章。

有闲情可以看看 ecmascript 6，计划明年6月就发布啦。阮一峰的网站有入门资料。

jquery 有很多 API,这个网站可以方便查到。有时间弄清楚jquery deferred 的用法。

多给 sublimetext 装插件，比如说检查代码错误的，新建目录文件的，整理代码的。

692 | 693 | 694 | -------------------------------------------------------------------------------- /blog/Front-End Performance Checklist 2017_CN .md: -------------------------------------------------------------------------------- 1 | # 前端性能清单 2017 2 | 3 | @(By Vitaly Friedman 译 Mrwaite)[前端, 性能] 4 | 5 | [原文](https://www.smashingmagazine.com/2016/12/front-end-performance-checklist-2017-pdf-pages/) 6 | 7 | 你已经在使用渐进式启动了吗？那么React 和 Angular中的`tree-shaking`和`code-splitting`呢？你是否设置了 [Brotli](https://zh.wikipedia.org/wiki/Brotli) 或 [Zopfli](https://zh.wikipedia.org/wiki/Zopfli) 压缩, [OCSP](https://zh.wikipedia.org/wiki/OCSP%E8%A3%85%E8%AE%A2) stapling, [HPACK](https://http2.github.io/http2-spec/compression.html) 压缩呢？ 那么 [Resource Hints](https://www.keycdn.com/blog/resource-hints/), [Client Hints](http://httpwg.org/http-extensions/client-hints.html) 和 [CSS Containment ](https://developers.google.com/web/updates/2016/06/css-containment) 呢？就更不用说 IPV6, HTTP/2, [Server Workers](https://developer.mozilla.org/zh-CN/docs/Web/API/Service_Worker_API) 了。 8 | 9 | 早些时候，性能问题往往都是项目完成之后考虑的。经常被推迟到项目末期，它将会被归结为压缩， 合并， 资源优化以及对服务器的一些配置文件做细微的调整。 10 | 现在回头想想， 事情似乎已经发生了很大的变化。 11 | 12 | 性能并不只是技术上的考量，重要的是，当其融入到工作流当中时，设计理念往往通过性能的优劣来更好的展现。性能必须持续的测试，监控，优化。日益复杂的 Web 环境给我们带来了新的挑战，我们非常困难去检测具体的性能指标，因为性能指标的检测是非常依赖于终端设备， 浏览器，协议，网络类型以及潜在的一些东西（CDNs， ISPs， 缓存， 代理，防火墙，负载均衡和服务器，它们都在性能问题上扮演非常重要的角色）。 13 | 14 | 所以，如果我们实际环境中已经涉及到了上述的东西，那么从开始到网站最终的发布提升性能时这些的东西都应该考虑进去。这篇性能清单看上去如何？下面你将会得到一份（希望是公正的客观的）前端2017性能清单——上述问题你可能需要去考虑，以便确保网页响应时间够快，够流畅。 15 | 16 | 17 | ---------------- 18 | [TOC] 19 | 20 | 微优化对于让性能保持正常状态是很有效的，但是关键是有清晰的目标——可行的目标将影响整个过程中做的任何决定。下面有一些不同的模型，每一个谈论的都是比较之后评价——确保早点设置自己的优先级。 21 | 22 | 文章提到一些性能指标名词： 23 | 1. start rendering time ：用户在页面上看到的第一个内容的时间 24 | 2. first meaningful paint：页面展示其主要内容所需的时间 25 | 3. time to interactive： 一个页面——主要是单页面应用，加载充分，用户可以与其互动的时间线 26 | 27 | 28 | ### 准备和设置目标 29 | 30 | #### 1. 比你的最快的竞争对手快 20% 。 31 | 根据[心理研究](https://www.smashingmagazine.com/2015/09/why-performance-matters-the-perception-of-time/#the-need-for-performance-optimization-the-20-rule)，如果你想要用户感觉你的网站比其他的网站快，你至少需要快 **20%**。 32 | 整页加载时间与像是` start rendering time`( 用户在页面上看到的第一个内容的时间 )等指标不相关，而与[ first meaningful paint](https://developers.google.com/web/tools/lighthouse/audits/first-meaningful-paint)（即页面展示其主要内容所需的时间）和 [time to interactive](https://developers.google.com/web/tools/lighthouse/audits/time-to-interactive) (即 一个页面——主要是单页面应用，加载充分，用户可以与其互动的时间线) 有关。 33 | 34 | 在 一部 Moto G ，一部中档三星设备和一部像是 Nexus 4 这样的比较好的中档设备，优先在开放设备实验室（常规的 3G， 4G 和 WIFI）中，测试` start rendering time`（使用 [WebPagetest](http://www.webpagetest.org/)） 和 `first meaningful paint times` （使用 [Lighthouse](https://github.com/GoogleChrome/lighthouse)）。 35 | ![enter image description here](https://www.smashingmagazine.com/wp-content/uploads/2016/12/lighthouse_ykpzcd_c_scalew_546-opt.png) 36 | 37 | *Lighthouse, a new performance auditing tool by Google.* 38 | 39 | 查看你的分析数据，了解你的用户的所处的位置，之后你可以测试模拟 90% 的情况。 收集数据，建立一个[spreadsheet](http://danielmall.com/articles/how-to-make-a-performance-budget/), 剔除 20% ，通过这样的方法设定你的目标（即 性能预算）。 现在你有些可以测试的东西。如果你保持预算，尝试压缩脚本，去得到一个比较快的`time-to-interactive` 值，那你就在一个合理的优化路径上。 40 | 41 | ![Performance budget builder by Brad Frost.](https://www.smashingmagazine.com/wp-content/uploads/2016/12/performance-budget_lbp9l7_c_scalew_1241-opt.png) 42 | 43 | *[Performance budget](http://bradfrost.com/blog/post/performance-budget-builder/) builder by Brad Frost.* 44 | 45 | 与你的同事分享这份清单。确保你的团队的每一位成员都熟悉它，以免带来不必要的误解。如果项目的每一个决策都有性能的考量，那概念，UX和视觉设计方案决定时，项目将会从积极参与的前端开发者上收获巨大。所以，对每一个设计决策，都要考虑性能预算和其在清单中定义的优先级。 46 | 47 | #### 2. 100毫秒的响应时间，每秒60帧。 48 | [RAIL performance model](https://www.smashingmagazine.com/2015/10/rail-user-centric-model-performance/)给我们一些合理的目标：在初始输入之后，反馈时间应尽量少于100毫秒。为了实现小于100毫秒的响应时间，页面必须在50毫秒的时间内让主线程得到控制权。对于像动画一样需要频繁点击的，对于做不到小于100毫秒相应时间的地方，要做绝对的压缩！ 49 | 50 | 而且，动画的每一帧应该在小于16毫秒的时间内完成，从而实现每秒60帧（1 秒 / 60 = 16.6 毫秒），最好小于10毫秒。因为在到达下一个16.6毫秒时间点之前你的代码应该被执行，这样浏览器才有时间去渲染新的帧。客户端应[Be optimistic](http://info.meteor.com/blog/optimistic-ui-with-meteor-latency-compensation)( 个人理解：客户端直接响应用户的交互,在客户端离线对用户行为进行推测 ) 以及聪明的利用空闲的时间。显而易见，这些目标适用于运行性能优化，对于加载性能优化不那么适用。 51 | 52 | #### 3. `First meaningful paint`时间小于1.25秒， SpeedIndex 小于 1000 53 | 虽然上面的要求可能很难实现，你的最终目标应该是在良好的网络连接状况下，` start rendering time`小于1秒以及[SpeedIndex](https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index)(显示页面的可见部分的平均时间)值应该小于1000。 54 | 对于移动端，在3G网络下，一个小于3秒的` start rendering time`才是可以被接受的。稍高于上面指标也是可以的，但是应当尽可能的低。 55 | 56 | ### 明确环境 57 | 58 | #### 4. 选择和设置构建工具 59 | 不要太过于关注这段时间感觉很酷的构建工具。构建工具依照于你当前的环境，选择 Grunt, Gulp, Webpack, PostCSS或者是一个组合工具。当你在上面选择中得出结果足够快，在维护构建过程中也没有出现问题的时候，那么这方面就做的不错了。 60 | 61 | #### 5. 渐进增强 62 | 保持渐进增强作为你前端体系结构的指导原则，那部署就是一个安全的赌注。首先设计和制定核心体验是什么，然后通过一些高级特性为功能强大的浏览器增强用户体验，创造弹性体验感。如果你的网站在比较差的屏幕，浏览器，网络和设备上运行的十分流畅，那在比较好的环境中只会运行更加流畅！ 63 | 64 | #### 6. Angular， React， Ember 等 65 | 喜欢能支持服务器端渲染的框架。在选择框架之前，确保测试服务器端渲染和客户端渲染在移动端的启动时间（因为改变框架之后， 测试性能问题将是比较困难的一件事）。如果你将要使用一个JavaScript框架，确保你的选择是经过[比较](https://www.youtube.com/watch?v=6I_GwgoGm1w)的和[深思熟虑](https://medium.com/@ZombieCodeKill/choosing-a-javascript-framework-535745d0ab90#.h0r9v08lr)。不同的框架在性能上将会有不同的效果，当然会要求不同的优化策略，所以你必须清楚你将会依赖的框架的所有的细节组成。当构建一个web app， 可以看看 [ PRPL pattern ](https://developers.google.com/web/fundamentals/performance/prpl-pattern/) 和   [application shell architecture](https://developers.google.com/web/updates/2015/11/app-shell). 66 | 67 | ![PRPL](https://www.smashingmagazine.com/wp-content/uploads/2016/12/app-build-components_dibweb_c_scalew_1408-opt.png) 68 | 69 | *PRPL 表示推送关键资源， 渲染初始路由， 预缓存剩余路由 和 按需懒加载剩余路由.* 70 | 71 | ![ application shell ](https://www.smashingmagazine.com/wp-content/uploads/2016/12/appshell-1_o0t8qd_c_scalew_1249-opt.jpg) 72 | 73 | *一个应用程序shell，是用最小的HTML， CSS， JavaScript提供一个用户界面* 74 | 75 | #### 7. AMP or Instant Articles 76 | 77 | 取决于你团体的优先级和战略，你或许想要使用 Google 的 [AMP](https://www.ampproject.org/) 或者 Facebook 的 [Instant Articles](https://instantarticles.fb.com/)。没有它们，你也可以实现良好的性能展现。但是 `AMP` 通过免费的 `CDN` ，确实提供稳定的性能方案，而 `Instant Articles` 将会提高在Facebook上的性能表现。当然你也可以构建 [progressive web AMPs](https://www.smashingmagazine.com/2016/12/progressive-web-amps/) 。 78 | 79 | #### 8. 选择CDN 80 | 81 | 根据你拥有多少动态数据，你可以将内容的一部分放到一个[ static site generator](https://www.smashingmagazine.com/2015/11/static-website-generators-jekyll-middleman-roots-hugo-review/)上, 推送到CDN上，生成一个静态的资源版本，来减少数据库的请求。你甚至可以选择一个基于CDN的 [static-hosting platform](https://www.smashingmagazine.com/2015/11/modern-static-website-generators-next-big-thing/) ， 使用交互式组件增强你的页面（[JAMStack](https://jamstack.org/)）. 82 | 83 | ### 构建优化 84 | #### 9. 设置资源优先级 85 | 这是一个好的方法让你知道你首先需要解决的是什么。盘点你全部的资源（JavaScript, images, fonts, 第三方脚本和页面中“昂贵”的模块，像是轮播，复杂的信息图表，多媒体内容），并给它们分组。 86 | 87 | 建立一个电子表格。对旧版的浏览器定义最基本的核心体验（即 完全可以访问的核心内容），增强哪些功能更强大的浏览器的体验（即 更加丰富的体验）还有 额外的（资源并不需要第一时间全部加载，可以懒加载，像是web fonts，不必要的样式，轮播脚本，媒体播放器， 社交媒体按钮相关的， 大图片）。我们发布过一篇文章 " [Improving Smashing Magazine’s Performance](https://www.smashingmagazine.com/2014/09/improving-smashing-magazine-performance-case-study/) ", 里面讨论了这个优化方法的一些细节。 88 | 89 | #### 10. 使用 “`cutting-the-mustard`” 技术 90 | 91 | 使用 [cutting-the-mustard technique](http://responsivenews.co.uk/post/18948466399/cutting-the-mustard) 向旧版浏览器传递核心体验，向现代浏览器传递增强之后的体验方案。严格加载你的资源： 立即加载核心体验的代码，把增强部分加入到 `DomContentLoaded` 事件中，把 附加部分加入到 `load` 事件中。 92 | 93 | 值得注意的是该技术可以从浏览器版本推断设备能力的强弱，但是现在我们不能再这么干了。举个例子，廉价的安卓手机在发展中国家主要运行Chrome，虽然这些设备只拥有有限的内存和 CPU 能力，但也会使用 `cut the mustard` 技术。注意，当我们有没有别的选择时，使用该技术的局限性会越来越大。 94 | 95 | #### 11. 考虑微优化和渐进式启动 96 | 97 | 有些app在开始渲染页面之前需要先初始化app，可以渲染[ skeleton screens](https://twitter.com/lukew/status/665288063195594752)去代替加载指示器。因为大多数的性能问题源于启动app的初始解析时间，所以需要找到一些模块和技术去加速初始渲染的时间（ex：[tree-shaking](https://medium.com/@richavyas/aha-moments-from-ngconf-2016-part-1-angular-2-0-compile-cycle-6f462f68632e#.8b9afnsub) and [code-splitting](https://webpack.github.io/docs/code-splitting.html)）。也可以，使用[ahead-of-time compiler ](https://www.lucidchart.com/techblog/2016/09/26/improving-angular-2-load-times/)将客户端渲染的负担分担到服务端，快速产生解析结果。最后，使用 [ Optimize.js](https://github.com/nolanlawson/optimize-js)包装急需调用的函数来加快初始加载（虽然，现在这点 [不再是必须](https://twitter.com/tverwaes/status/809788255243739136) 的了）。 98 | 99 | ![Progressive booting](https://www.smashingmagazine.com/wp-content/uploads/2016/12/fmp-and-tti-opt.jpeg) 100 | 101 | *[Progressive booting](https://aerotwist.com/blog/when-everything-is-important-nothing-is/)指的是使用服务器端渲染去得到一个快速的 `first meaningful paint` ,也包括使用一些最小的JavaScript脚本去让 ` time-to-interactive` 时间接近 ` first meaningful paint` 时间。* 102 | 103 | 客户端渲染 or 服务器端渲染？不管什么场景，我么的目标都是建立[Progressive booting](https://aerotwist.com/blog/when-everything-is-important-nothing-is/)方案：使用服务器端渲染去得到一个理想的 ` first meaningful paint` 时间，也包括使用一些最小的JavaScript脚本去让 ` time-to-interactive` 时间接近 ` first meaningful paint` 时间。我们也可以在需求或者时间允许的情况下，启动一些app非必要的部分。不幸的是，正如[Paul Lewis 注意到的](https://aerotwist.com/blog/when-everything-is-important-nothing-is/#which-to-use-progressive-booting)，框架通常没有优化的概念，这些都抛给了开发者。因此渐进式启动对于大部分的库和框架来说是很难实行的。如果你有时间和资源，使用这个方案去促进性能优化。 104 | 105 | 106 | #### 12. 正确设置HTTP cache头部 107 | 再次检查一遍 `expires`, `cache-control`, `max-age` 和其他 HTTP cache 头部事都设置正确吗。通常，资源应该是可缓存的不管是短时间的（如果它们很可能改变），还是无限期的（如果它们是静态的）——你可以在需要更新的时候， 改变 URL 中它们的版本即可。 108 | 109 | 如果可能， 使用 `Cache-control: immutable`， 该头部为被打上指纹的静态资源设计，避免资源被重新验证（截至 2016年12月，只有 [FireFox 在 HTTPS 中支持](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control) ）。你也可以使用 [Heroku 的 HTTP 缓存头部](https://devcenter.heroku.com/articles/increasing-application-performance-with-http-cache-headers)，Jake Archibald 的 [ "Caching Best Practices" ](https://jakearchibald.com/2016/caching-best-practices/)，以及 Ilya Grigorik 的 [HTTP caching primer](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching?hl=en) 作为指导。 110 | 111 | #### 13. 限制第三方库和异步加载的JavaScript 112 | 113 | 当用户请求一个界面， 浏览器提取 HTML 文档创建 DOM 树，然后提取 CSS 样式表创建 CSSOM 树， 最后通过匹配 DOM 树上的节点和 CSSOM 树上对应的节点合并生成一棵渲染树。如果途中有任何的 JavaScript 需要执行， 浏览器会停止渲染直到该 JavaScript 执行完毕， 因此延缓页面的渲染（阻塞 DOM 构建）。作为开发者，我们必须明确的告诉浏览器不要再等待了，应当抓紧渲染页面。解决方案就是设置为 scripts 设置 `defer` 和 `async` 属性。 114 | 115 | #### 14. 正确的图片优化 116 | 尽可能的使用 `srcset`， `sizes` 和 `` 标签来实现 [ responsive images](https://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/)。你也可以在 `` 标签和 一张JPEG图片作为后备（ Andreas Bovens的 [ code snippet](https://dev.opera.com/articles/responsive-images/#different-image-types-use-case)）来加载[ WebP 格式](https://www.smashingmagazine.com/2015/10/webp-images-and-performance/)图片。 117 | 或者使用 `Accrpt` 头部来和服务器交流。`Sketch ` 支持 WebP格式， WebP图片在Photoshop中可以使用 [ WebP plugin for Photoshop](http://telegraphics.com.au/sw/product/WebPFormat#webpformat) 来导出。[Other options are available](https://developers.google.com/speed/webp/docs/using) 118 | 119 | ![](https://www.smashingmagazine.com/wp-content/uploads/2016/12/responsive-image-breakpoints-generator-750w-opt.jpeg) 120 | 121 | *[Responsive Image Breakpoints Generator ](http://www.responsivebreakpoints.com/) 可以自动化图像和标记的生成* 122 | 123 | 你也可以使用 [client hints](https://www.smashingmagazine.com/2016/01/leaner-responsive-images-client-hints/) , 目前还在获得 [浏览器的支持](http://caniuse.com/#search=client-hints) 。没有足够的资源来支持响应式图片的复杂标记？使用 [ Responsive Image Breakpoints Generator ](http://www.responsivebreakpoints.com/) 或者像是[Cloudinary](http://cloudinary.com/documentation/api_and_access_identifiers)这样的服务来自动化图片的优化。此外，在许多情况下，单独使用 `srcset` 或 `sizes` 将会收获显著。 在Smashing杂志中，我们使用 后缀`-opt` 作为图像名称 - 例如， `brotli-compression-opt.png`, 这样只要图像包含这样的后缀，团队中的每个人都知道该图像被优化过了。 124 | 125 | 126 | #### 15. 让图像优化提高到下一个水平 127 | 当在你着手的一个登录页面中，非常紧急的需要一个特定的图像加载的足够的快，这时候你需要确保 JPEGs 通过 [ mozJPEG](https://github.com/mozilla/mozjpeg) （mozJPEG可以提高图片的初始渲染时间，通过操纵扫描级别）来优化 和 压缩，PNG 使用 [Pingo](http://css-ig.net/pingo) , GIF 使用 [ Lossy GIF](https://kornel.ski/lossygif), SVG 使用 [SVGOMG](https://jakearchibald.github.io/svgomg/)。模糊图片不必要的部分（通过应用高斯模糊过滤它们）来减少文件的体积，最终你甚至可以通过着手删除颜色或用黑白呈现图片进一步减少体积。对于背景图片，从Photoshop导出时候减少 0 ~ 10% 的质量也是完全可以接受的。 128 | 129 | 还不够？那好，也可以通过[multiple](http://csswizardry.com/2016/10/improving-perceived-performance-with-multiple-background-images/) [background](https://jmperezperez.com/medium-image-progressive-loading-placeholder/) [images](https://manu.ninja/dominant-colors-for-lazy-loading-images#tiny-thumbnails) [technique](https://css-tricks.com/the-blur-up-technique-for-loading-background-images/)（这里面每个单词都是一个链接）来提高图像的感觉性能。 130 | 131 | 132 | #### 16. web fonts 优化 133 | 134 | 你是用的web fonts很可能包含未使用的字形和额外的功能。如果你用的是 open-source fonts ，你可以向你的类型产生工厂要求一个web fonts子集或者自己[产生一个](https://www.fontsquirrel.com/tools/webfont-generator)来减少文件的体积。能支持WOFF2最好，对不支持的浏览器你也可以使用 WOFF 和OTF 作为降级处理的方案。另外，从Zach Leatherman’s [Comprehensive Guide to Font-Loading Strategies](https://www.zachleat.com/web/comprehensive-webfonts/) 方案 和 [service worker](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&ved=0ahUKEwjB26L3i4jRAhVnxFQKHQ1RAB4QFggcMAA&url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FAPI%2FService_Worker_API&usg=AFQjCNGcFYqcUoZIpTlw41JzGxE8aGJntw&sig2=HCdwMGD6vwAe8s0o2SAzFw)来永久缓存字体，来选择一种方案。需要快速的效果？Pixel Ambacht 有一个[快速的教程和案例分析](https://pixelambacht.nl/2016/font-awesome-fixed/)去获取指定的字体。 135 | 136 | ![](https://www.smashingmagazine.com/wp-content/uploads/2016/12/zach-web-fonts_c8nq74_c_scalew_1528-opt.png) 137 | 138 | *Zach Leatherman’s Comprehensive Guide to Font-Loading Strategies 为web fonts交付提供了十几个的选项* 139 | 140 | 如果你不能从自己的服务上使用字体，而是依赖第三方，那就确保使用[ Web Font Loader](https://github.com/typekit/webfontloader)。 [FOUT 比 FOIT 好](https://www.filamentgroup.com/lab/font-events.html); 降级处理中，首先渲染文本，后异步加载字体——你也可以使用 [loadCSS](https://github.com/filamentgroup/loadCSS)。 141 | 你也应该[远离本地安装的系统字体](https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/)。 142 | 143 | 144 | #### 17. 快速推送 critical CSS 样式 145 | 146 | 为了确保浏览器尽可能快的渲染你的页面，收集渲染页面第一个可见部分需的CSS（“critical CSS” or “above-the-fold CSS”）以及把他添加到 `` 标签的中来减少请求往返 ，已经变成通常做法。因为在 TCP 慢启动阶段交换的数据包大小有限制，所以你对于 critical CSS 大小的预算是 大约 14 KB。如果超过了这个预算，浏览器需要额外的 HTTP 往返去获取 critical CSS 样式。[CriticalCSS](https://github.com/filamentgroup/criticalCSS) 和 [Critical](https://github.com/addyosmani/critical) 可以确保你在预算之内。在每一个你使用的模版当中你都应该去做这件事。如果可能， 考虑使用 [conditional inlining approach](https://www.filamentgroup.com/lab/performance-rwd.html) ，其已被 the Filament Group 使用。 147 | 148 | 在 HTTP/2中，为了避免一个产生臃肿的HTML文件, critical CSS应该被存储在一个分离的CSS 文件中并通过服务器推送。但是服务器端推送支持并不一致，而且还有一些还存放方面的问题（查看 [Hooman Beheshti’s presentation](http://www.slideshare.net/Fastly/http2-what-no-one-is-telling-you)）。事实上，这影响是负面的，会膨胀网络的缓冲区，导致文档当中真正的帧无法被递送。因为 TCP 的慢启动，服务器端推送 [在热连接上更加高效](https://docs.google.com/document/d/1K0NykTXBbbbTlv60t5MyJvXjqKGsCVNYHyLEXIxYMv0/edit)。 记住，`cache-digest` 这个高速缓存的新规范将会否定手动创建 `"cache-aware"` 服务的需求。 149 | 150 | #### 18. 使用 tree-shaking 和 code-splitting 减少有效负载 151 | [tree-shaking](https://medium.com/@roman01la/dead-code-elimination-and-tree-shaking-in-javascript-build-systems-fb8512c86edf) 是一种，通过只加载生产中确实被使用的代码，来整理你构建过程的方法。你可以使用 [Webpack2中清除未使用的部分](http://www.2ality.com/2015/12/webpack-tree-shaking.html), 也可以使用[UnCSS](https://github.com/giakki/uncss) 或者 [Helium](https://github.com/geuis/helium-css) 去删除未使用CSS样式。另外， 你可能会考虑怎么去 书写 [高效的 CSS 选择器](http://csswizardry.com/2011/09/writing-efficient-css-selectors/) 或是怎么[避免 冗长 低效的样式](https://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/)。 152 | 153 | [Code-splitting ](https://webpack.github.io/docs/code-splitting.html) 是另一种Webpack特性，可以基于“chunks”分割你的代码然后按需加载这些代码块。一旦你在你的代码中确定了分割点，Webpack会全全负责这些依赖关系和输出文件。在应用发送请求的时候，这样基本上确保初始的下载足够小并且实现按需加载。 154 | 155 | 值得注意的是相比于 Browserify 输出结果 [ Rollup](http://rollupjs.org/)展现的更加优秀。当使用 Rollup时，我们会想要查看 [ Rollupify](https://github.com/nolanlawson/rollupify)，它可以转化 ECMAScript 2015 modules 为一个大的 CommonJS module——因为取决于打包工具和模块加载系统的选择，小的模块会有[令人惊讶的高性能开销](https://nolanlawson.com/2016/08/15/the-cost-of-small-modules/)。 156 | 157 | #### 19. 提高渲染性能 158 | 使用[ CSS containment](http://caniuse.com/#search=contain) 隔离高代价的组件,比如限制一些画布外导航的布局 绘制的样式 或者第三方窗口小部件的样式的范围。确保在页面滚动或元素执行动画效果的时候，页面是没有滞后的，这样你就可以让页面每秒60帧一直保持一致。如果上面实现还是很困难，但至少让每秒的帧数保持在60 ~ 15的混合范围内。 159 | 使用 CSS 的 [will-change](http://caniuse.com/#feat=will-change) 去通知浏览器哪个元素或属性将要改变。 160 | 161 | 另外， 测试 [运行渲染性能](https://aerotwist.com/blog/my-performance-audit-workflow/#runtime-performance) （例如， [in DevTools](https://developers.google.com/web/tools/chrome-devtools/rendering-tools/)）。在开始之前，请浏览 Paul Lewis 免费的 [ Udacity 课程对于浏览器渲染优化](https://www.udacity.com/course/browser-rendering-optimization--ud860) 的建议。我们还有一篇由 Sergey Chikuyonok 撰写的关于 如何[正确获取 GPU 动画](https://www.smashingmagazine.com/2016/12/gpu-animation-doing-it-right/)的文章。 162 | 163 | #### 20. 通过预热连接加速传输 164 | 使用 `skeleton screens`， 懒加载所有的高代价的组件，像是字体， JavaScript， 轮播， 媒体和 iframes。使用 [ resource hints](https://w3c.github.io/resource-hints) 中一些方法节约加载时间： [dns-prefetch ](http://caniuse.com/#search=dns-prefetch)（在后台执行 DNS 查找） ,[preconnect](http://www.caniuse.com/#search=preconnect) (告知浏览器在后台开始一些握手协议（DNS， TCP， TLS）的连接)， [prefetch](http://caniuse.com/#search=prefetch) （要求浏览器去预取指定资源，是资源加载更快速）， [ prerender](http://caniuse.com/#search=prerender) （告知浏览器在后台渲染特定的页面）和 [preload](https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/) （预取一些尚未开始执行的资源，包括一些其他东西）。值得注意的是实践当中，因为取决于浏览器的支持情况， 推荐 `dns-prefetch` 而不是 `preconnect`，而且应当谨慎的使用 `prefetch` 和 `prerender` ——后者只能在你对用户下一步将会浏览什么很自信时候才去使用（例如，在一个购买流程当中的时候）。 165 | 166 | ### HTTP/2 167 | #### 21. 准备好迎接 HTTP/2 168 | 随着 Google 一直向着[更加安全的 web](https://security.googleblog.com/2016/09/moving-towards-more-secure-web.html) 发展 ，最终在 Chrome 中所有的 HTTP 网页将会被认为是“不安全”的，你将会需要去衡量是否继续在 HTTP/1.1 上做赌注，还是建立 [HTTP/2 环境](https://http2.github.io/faq/) 。 HTTP/2 已经被[很好的支持](http://caniuse.com/#search=http2)了。在大多数情况下，你最好使用它，这将是意义重大的，你迟早会把方向转移到 HTTP/2 的。最重要的是，通过 `service workers` 和 `server push` （至少长期）[性能将会有巨大的的飞跃](https://www.youtube.com/watch?v=RWLzUnESylc&t=1s&list=PLNYkxOF6rcIBTs2KPy1E6tIYaWoFcG3uj&index=25)。 169 | 170 | ![](https://www.smashingmagazine.com/wp-content/uploads/2016/12/http-pages-chrome-opt.png) 171 | 172 | *最终， Google 计划标记所有的 HTTP 页面为不安全的，改变 HTTP 网页原有的安全标志为红色的警告，示意为损坏的 HTTPS。* 173 | 174 | 缺点就是你需要去迁移到 HTTP/2 ，取决于使用 HTTP/1.1 用户数量有多大（就是使用旧版操作体统或使用旧版浏览器的用户），需要你发送不同的构建文件，这将要求你适应[不同的构建流程](https://rmurphey.com/blog/2015/11/25/building-for-http2) 。注意： 迁移和建立新的构建流程将会是棘手和费时的。文章剩余的部分，我将会假设你是正在切换或已经切换到 HTTP/2 了。 175 | 176 | #### 22. 正确部署 HTTP/2 177 | 其次，通过 [HTTP/2 提供资源](https://www.youtube.com/watch?v=yURLTwZ3ehk) 178 | 将是一次巨大的翻新，与以往获取资源的方式相去胜远。你需要在模块打包和并行加载好多小模块中做出比较好的权衡。 179 | 180 | 一方面，你也许想要避免一次获取全部的资源，而是将整个界面拆分成好多小模块，把他们作为构建过程的一部分压缩，可以参考 [ “scout” approach](https://rmurphey.com/blog/2015/11/25/building-for-http2) 和 并行加载。其中一个文件有改动的时候不用重新下载整个样式表或者JavaScript文件。 181 | 182 | 另一方面，打包依旧很重要，因为向浏览器发送很多小 JavaScript 文件将会存在很多问题。首先，压缩是受损的。使用 字符重用 （相关：LZW压缩算法）有利于 大 包 的压缩。而不利于分离的小 包 的压缩。这方面的标准也有一些标准，但现在离我们还是太远了。其次，浏览器并未对这方面的工作流进行优化。举个例子，Chrome 将会根据资源数触发相应数量的[inter-process communications](https://www.chromium.org/developers/design-documents/inter-process-communication)(IPCs) ,， 所以包含数百个资源将会有浏览器的运行成本。 183 | 184 | ![](https://www.smashingmagazine.com/wp-content/uploads/2016/12/progressive-css-loading-opt.png) 185 | 186 | *为了使用 HTTP/2 实现最佳效果， 参考 Chrome’s Jake Archibald 的建议，[逐步加载css](https://jakearchibald.com/2016/link-in-body/) * 187 | 188 | 你也可以尝试 [逐步加载css](https://jakearchibald.com/2016/link-in-body/)。明显的，你这样做对于 HTTP/1.1 用户是不友好的， 所以作为你部署流程的一部分，你需要对不同的浏览器产生不同的构建方式，当然事情也会变得略显复杂。你也可以放弃 [ HTTP/2 connection coalescing](https://daniel.haxx.se/blog/2016/08/18/http2-connection-coalescing/)， 得益于 HTTP/2 ，允许你使用域分片，但是这个具体实现还是有点难度的。 189 | 190 | 怎么去做？如果你已运行在 HTTP/2， 作为妥协（对于旧版浏览器来说不算很坏），可以发送了大约10个包。当然对于自己的网站，还是需要实验和测试出合适的值是多少。 191 | 192 | 193 | #### 23. 确保服务的安全性 194 | 所有浏览器的都是依赖 TLS 实现 HTTP/2 的 ，所以你可能想要避免安全性警告或有些网页无法工作。再次检查你的 [正确设置安全性头部](https://securityheaders.io/) ，[消除已知漏洞](https://www.smashingmagazine.com/2016/01/eliminating-known-security-vulnerabilities-with-snyk/) ， [检查你的证书](https://www.ssllabs.com/ssltest/)。 195 | 196 | 已经迁移到 HTTPS了吗？查阅 [The HTTPS-Only Standard](https://https.cio.gov/faq/) ，以获取完整的指南。另外，确保所有的外部插件和跟踪脚本通过 HTTPS 加载，跨域脚本是不被允许的，[HTTP Strict Transport Security headers](https://www.owasp.org/index.php/HTTP_Strict_Transport_Security_Cheat_Sheet) 和 [ Content Security Policy headers](https://content-security-policy.com/) 被正确设置。 197 | 198 | #### 24. 服务和 CNDs 支持 HTTP/2 ? 199 | 不同的服务和 CDNs 支持 HTTP/2 的程度是不一样的。使用 [ Is TLS Fast Yet?](https://istlsfastyet.com/)去查看符合你的选项，快速查看你服务的性能如何，支持哪些特性。 200 | 201 | ![](https://www.smashingmagazine.com/wp-content/uploads/2016/12/isitfastyet_doieve_c_scalew_1393-opt.png) 202 | 203 | *[ Is TLS Fast Yet?](https://istlsfastyet.com/) 允许你查看当你切换到 HTTP/2 时 你的服务和CDNs支持的选项。* 204 | 205 | #### 25. Brotli or Zopfli compression 206 | 去年，Google [介绍](https://opensource.googleblog.com/2015/09/introducing-brotli-new-compression.html)了 [Brotli](https://github.com/google/brotli)， 一个新的开源无损数据格式，已被Chrome， FireFox，Opera [广泛支持](http://caniuse.com/#search=brotli)。 实践中，Brotli 相比于 Gzip 和 Defalte 表现[更加有效](https://samsaffron.com/archive/2016/06/15/the-current-state-of-brotli-compression)。取决于设置，它可能会缓慢压缩，但是缓慢压缩最终导致高压缩率。而且，Brotli 解压是非常迅速的。因为是来源于Google的算法，那么对于浏览器只对用户浏览的HTTPS网页支持Brotli也就不奇怪了——好吧，其实里面也有一些技术上的原因。。。现今 Brotli 不是预先安装在大部分服务器上的，而且没有自编译的 NGINX 或 Ubuntu也不是那么容易安装 Brotli。然而，你甚至可以 [在不支持 Brotli 的CDNs上启用它](http://calendar.perfplanet.com/2016/enabling-brotli-even-on-cdns-that-dont-support-it-yet/)（使用的是 service worker 技术）。 207 | 208 | 209 | 或者，你可以去瞧瞧[ Zopfli 压缩算法](https://blog.codinghorror.com/zopfli-optimization-literally-free-bandwidth/)，它可以把数据编码成 Deflate， Gzip，Zlib格式。任何传统的 Gzip压缩资源，将会从 Zopfli 改进的 Deflate 编码方式中受益，因为文件将会比以 Zlib 最大的压缩方式压缩的文件小 3% ~ 8%。值得一提的是，文件将花费80倍的时间来压缩。这就是为什么推荐对那些不是经常改动的文件使用 Zopfli 压缩。 210 | 211 | #### 26. 启用了 OCSP stapling 吗？ 212 | 通过在你的服务器上[启用 OCSP stapling](https://www.digicert.com/enabling-ocsp-stapling.htm)， 你可以加速 TLS 握手。`The Online Certificate Status Protocol` (OCSP)被 创建为替代 ` the Certificate Revocation List` (CRL) 的方案。这两个协议被用作检查 SSL 证书是否被撤销。然而，`the OCSP protocol` 不要求浏览器下载，而是在列表中搜索证书的相关信息，因此减少了握手中的请求时间。 213 | 214 | #### 27. 你已经采用 IPv6 了？ 215 | 因为我们正在[耗尽 IPv4 空间](https://en.wikipedia.org/wiki/IPv4_address_exhaustion) ，主要的移动网络正在迅速的支持 IPv6（美国已经有 [50%](https://www.google.com/intl/en/ipv6/statistics.html#tab=ipv6-adoption&tab=ipv6-adoption) 的采用了 IPv6）。建议更新你的 DNS 到 IPv6，紧跟时代趋势。只需要确保网络提供 `dual-stack` 支持 —— 它允许 IPv6 和 IPv4 同时互不干涉的运行。但是终究，IPv6是不向后兼容的。而且，[研究显示](https://www.cloudflare.com/ipv6/) IPv6 凭借 neighbor discovery (NDP) 和 路由优化 让网站运行块 10% ~ 15%。 216 | 217 | #### 28. 启用了 HPACK 压缩？ 218 | 如果你正在使用 HTTP/2 ， 为了减少不必要的开销，再次检查是否启用了 HPACK 压缩 HTTP 响应头部。因为 HTTP/2 服务还是相对来说比较新的，他们不一定完全支持规范，使用 HPACK 就是一个例子。 [H2spec ](https://github.com/summerwind/h2spec) 是一个检查上述支持情况的比较好的工具。 [ HPACK works](https://www.keycdn.com/blog/http2-hpack-compression/). 219 | 220 | ![](https://www.smashingmagazine.com/wp-content/uploads/2016/12/h2spec-example-750w-opt.png) 221 | 222 | 223 | *H2spec（[View large version](https://www.smashingmagazine.com/wp-content/uploads/2016/12/h2spec-example-large-opt.png)）* 224 | 225 | #### 29. 为缓存和网络降级启用 service workers 了？ 226 | 227 | 任何对于网络的性能优化都不可能比用户机器上本地存储缓存来的快。如果你的网站启用了 HTTPS， 使用 [Pragmatist’s Guide to Service Workers](https://github.com/lyzadanger/pragmatist-service-worker)在 `service worker cache` 和 离线存储（甚至完全离线的页面） 中 缓存静态资源，这样可以从用户本机上检索资源，而不是去网络上请求。参考：Jake’s [Offline Cookbook](https://jakearchibald.com/2014/offline-cookbook/) 和 the free Udacity course [Offline Web Applications](https://www.udacity.com/course/offline-web-applications--ud899) 。浏览器支持吗？看[这里](http://caniuse.com/#search=serviceworker), 不管网络状况如何，这样的后备方案都是适用的。 228 | 229 | 230 | ### 测试和监控 231 | #### 30. 监控混合内容的警告 232 | 如果你最近已经从 HTTP 迁移到了HTTPS， 请务必使用工具[Report-URI.io.](https://report-uri.io/)监控主动的和被动的混合内容警告。你也可以为混合内容，使用 [ Mixed Content Scan](https://github.com/bramus/mixed-content-scan) 去扫描支持 HTTPS 的站点。 233 | 234 | #### 31. 在 DevTools 中优化了你的开发工作流吗？ 235 | 挑选一个调试工具，然后点击每一个简单的按钮。请确保自己能理解怎么去分析渲染性能和 console 输出，还有怎么去调试 JavaScript 和编辑 CSS 样式。Umar Hansa 最近准备了一个（很大的）[slidedeck](https://umaar.github.io/devtools-optimise-your-web-development-workflow-2016/#/) 和 [talk](https://www.youtube.com/watch?v=N33lYfsAsoU) 覆盖了几十个隐藏的提示和技术，能帮助我们更好的在 DevTools 中调试和测试。 236 | 237 | #### 32. 你在代理浏览器和旧版浏览器中测试过吗？ 238 | 在 Chrome 和 FireFox 中测试是不够的。研究你的网站是怎么在代理浏览器和旧版浏览器中工作的。例如， UC 浏览器 和 Opera Mini ，在亚洲占着[一定的市场份额](http://gs.statcounter.com/#mobile_browser-as-monthly-201511-201611)（高达 35%），测试你感兴趣的国家[网速的平均值](https://www.webworldwide.io/)， 避免以后听说的时候被惊讶到。使用网络节流调节测试，来模仿高DPI的设备。[ BrowserStack](https://www.browserstack.com/)，就是一个非常棒的工具，也可以在真实设备商测试。 239 | 240 | #### 33. 建立了持续的监控？ 241 | 有一个有用的私有地实例 [WebPagetest](http://www.webpagetest.org/)可以快速无限制的被测试。建立一个可以自动报警的持续性能预算监控。设置你自己的用户时间标记去测试 监控业务特定的指标。查看使用 [SpeedCurve](https://speedcurve.com/) 监控随着时间推移的性能的改变，使用 [New Relic](https://newrelic.com/browser-monitoring) 得到 `WebPagetest `不能提供的数据。还有一些工具：[SpeedTracker](https://speedtracker.org/) ，[Lighthouse](https://github.com/GoogleChrome/lighthouse) ， [Calibre](https://calibreapp.com/)。 242 | 243 | ### 快速获取： 244 | 这份清单还是相当全面的，完成所有的优化手段会需要相当一段时间的。所以，你只有1小时的时间，想去取得性能上显著的提升，应该怎么做？我们把它们合到 10 个 比较容易的方案上。当然，在你开始之前和完成之后，需要在 3G网络 和 有线网络中，分别测试 `start rendering time` 和 ` SpeedIndex ` 两个指标的值。 245 | 246 | 1. 你的目标是 `start rendering time` 在有线网络中小于 1 秒，在 3G 网络中小于 3 秒，和 ` SpeedIndex ` 值低于1000。然后优化 `start rendering time` 和 `time-to-interactive` 两个值。 247 | 2. 为你的模版准备 `critical CSS` ，将其包含在页面 ``标签内。（你的关键CSS大小预算是 14KB）。 248 | 3. 尽可能延迟和懒加载尽量多的 scripts ，以及你的和第三方的 scripts —— 特别是社交媒体按钮相关的，视频播放相关的和高代价的JavaScript。 249 | 4. 添加资源提示加速传输：`dns-lookup`, `preconnect`, `prefetch`, `preload` 和 `prerender`。 250 | 5. 添加 web fonts 子集以及异步加载它们（或只切换到系统字体）。 251 | 6. 优化图片，对关键页面图片使用 WebP 格式（像是登录页面）。 252 | 7. 检查是否正确设置 HTTP 缓存头部和安全性头部。 253 | 8. 在服务上启用 Brotli 或 Zopfli 压缩。（如果这不现实，也不要忘记 Gzip 压缩） 254 | 9. 如果 HTTP/2 可用，启用 HPACK 压缩 和 监控混合内容的警告。如果你运行了 LTS， 别忘了启用 OCSP stapling。 255 | 10. 如果可能，在 service worker 缓存中，缓存像是字体，样式，JavaScript，图片这样的资源——其实是，缓存越多越好！。 256 | 257 | 258 | ### Off We Go！ 259 | 有些优化手段可能超出了你工作的范围，预算或是你负责的被遗弃的遗留代码范畴。没关系！把这份清单作为一般（希望是全面的）的指南，根据你实际的情况，列出你自己的问题列表。但是最最重要的是，在优化之前测试和监控你的项目，发现性能问题所在。最后希望大家，2017年有一个快乐的性能体验！ 260 | -------------------------------------------------------------------------------- /blog/Task, mictask, queues and schedules(翻译).md: -------------------------------------------------------------------------------- 1 | ## Task, mictask, queues and schedules(翻译) 2 | 作者: jake 3 | 原文链接: https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/ 4 | 翻译: Mrwaite 5 | 6 | 当我告诉我同事 [Matt Gaunt](https://twitter.com/gauntface) ,我正在考虑写一篇关于 microtask queueing和浏览器 event loop 的执行, 他说他不会去读这篇文章...但,我还是会写,希望大家有所收获! 7 | 8 | 事实上,你首先可以了解 [Philip Roberts](https://twitter.com/philip_roberts) 在 [JSConf 上关于 event loop的演讲](https://www.youtube.com/watch?v=8aGhZQkoFbQ) - microtasks 并没有涉及, 除此之外它仍是非常好的介绍. 9 | 10 | 先看下面这段 JavaScript : 11 | ```javascript 12 | console.log('script start'); 13 | 14 | setTimeout(function() { 15 | console.log('setTimeout'); 16 | }, 0); 17 | 18 | Promise.resolve().then(function() { 19 | console.log('promise1'); 20 | }).then(function() { 21 | console.log('promise2'); 22 | }); 23 | 24 | console.log('script end'); 25 | ``` 26 | 27 | 正确的结果是:`script start`, `script end`, `promise1`, `promise2`, `setTimeout`, 但浏览器支持不同还是会有所不同的! 28 | 29 | Microsoft Edge, Firefox 40, iOS Safari 和 desktop Safari8.0.8会在 `promise1` 和 `promise2` 之前打印 `setTimeout`. 怪异的是, Firefox 39 和 Safari 8.0.7 却始终保持正确. 30 | 31 | #### 解释 32 | 33 | 为了理解, 首先你需要知道 event loop 是怎么处理 tasks 和 microtasks.这样当你接触这方面问题的时候,脑子里将会有很多思路.深呼吸... 34 | 35 | 36 | 每个'线程'都会有自己的 event loop ,所以每个 web worker 都会得到自己的, 所以它们可以独立执行, 而所有同源的窗口共享一个 event loop他们可以同步通讯. event loop不断执行任何已排队的 tasks.一个 event loop 有很多的 task 源,并确保该源的执行顺序(例如 indexedDB), 但是浏览器可以在每一轮的循环中挑选哪个源任务去执行.这样允许浏览器优先去执行性能敏感的任务,像是用户输入.ok, stay with me... 37 | 38 | Tasks需要被计划好, 这样浏览器深入到 JavaScript/DOM land, 确保这些 tasks 依次执行.两个 task 之间, 浏览器也许会渲染更新.从鼠标点击到事件回调需要安排一个 task ,解析HTML也是如此,在上面的例子中, `setTimeout`. 39 | 40 | `setTimeout`等待一个给定的延迟时间, 然后为它的回调安排一个新的 task .这就是为什么`setTimeout`在`script end`之前打印, 打印`script end`是第一个 task 的一部分, `setTimeout` 是在另一个 task 中打印的.好, 我们大都能理解这个, 但是我需要你坚持看下去... 41 | 42 | `Microtask` 通常是为那些在脚本执行完之后需要直接发生的任务而被安排的, 像是对一批任务做出反应, 或者在没有副作用的新 task 中做一些异步的事.只要没有其他 JavaScript 中间执行, 并且在每个任务结束之后, `Microtask` 队列将会在回调后执行.任何额外的 microtasks 将会被安排到队列的末尾, 依旧执行. `Microtask` 包括突发的观察者回调, 像上面的例子 promise 回调. 43 | 44 | 45 | 一旦 promise 状态保持不变, 它将会为其后面的回调函数在队列中加入一个 microtask. 这样就确保 promise 回调函数是异步的, 甚至 promise 已经变为 不可变状态(rejected or reslove, 就是即使临时加入一个promise回调也是会加入当前microtask的). 所以 `.tnen(yey, nay)`会立刻排入一个 microtask. 因为在 microtask 执行之前 当前的 running script(就是普通的执行脚本, 普通的script语句)必须执行完毕,所以 `promise1` 和 `promise2` 在 `script end` 之后打印.因为 microtask 总是在下一个 task 之前被执行, 所以 `promise1` 和 `promise2` 在 `setTimeout` 之前打印. 46 | 47 | (当前script就是第一个task, 然后执行第一个microtask也就是`promise1`和`promise2`, 之后执行下一个task也就是`setTimeout`) 48 | 49 | 再看看一步一步来是怎么回事: 50 | [原文有一个很好的一步一步查看task和microtask的示意图](https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/#try-it/) 51 | 52 | 是的, 我搞了一个动画的分布示意图. 你是怎么度过你的周六的?和你的小伙伴出去溜溜?但是,我不是.若是因我惊人的UI设计中还是不明白, 点击上面的箭头一步一步前进. 53 | 54 | #### 浏览器的兼容性 55 | 56 | 有些浏览器打印出来的结果是 `script start`, `script end`, `setTimeout`, `promise1`, `promise2`. 他们是在 `setTimeout`之后执行 promise 的.这就像是他们把 promise 回调当做是新的 task 的一部分,而不是作为一个 microtask. 57 | 58 | 这也是有点情有可原的, promises 是来自 ECMAScript 而不是 HTML的. ECMAScript有'jobs'这个概念, 和microtask有点类似,但是他们的关系是不明确的,就像[ES DISCUSS中争论的那样](https://esdiscuss.org/topic/the-initialization-steps-for-web-browsers#content-16), 然而普遍的共识是 promises 应该属于 microtask queue 中的一部分, 并有很好的解释. 59 | 60 | 把 promises 作为 tasks 对待会导致性能问题, 回调将会因为像渲染这样的任务相关的东西导致不必要的延迟执行.它还会因为其他任务源的影响而导致不确定性. 61 | 62 | 这里有个[Promise callbacks don't run as microtasksEdge](https://connect.microsoft.com/IE/feedback/details/1658365) 的 Edge 反馈, WebKit 连夜修正了, 所以我保证 Safari 最终也会修正, 它可能会在 FireFox 46 修复. 63 | 64 | 非常有意思的是, 自从被修复, Safari 和 FireFox 都遭遇了一次回退, 我想这应该是一个巧合. 65 | 66 | #### 怎么去判断使用是 tasks 还是 microtask 67 | 测试是一个方法, 看log何时打印出来. 68 | 69 | 正确的方式是查看规范, 例如, [setTimeout 的第14步](https://html.spec.whatwg.org/multipage/webappapis.html#timer-initialisation-steps)中有关于如何对一个 task 进行排列, 而 [queuing a mutation record 的 第5步](https://dom.spec.whatwg.org/#queue-a-mutation-record) 是如何对 microtask 进行排列. 70 | 71 | 顺便提到, 在 ECMAScript 中, 他们称 microtask 为 'jobs'. 在 [ step 8.a of PerformPromiseThen](http://www.ecma-international.org/ecma-262/6.0/#sec-performpromisethen), `EnqueueJob` 被称为 `排列 microtask`. 72 | 73 | 现在, 让我看看更多的复杂的例子. 74 | 75 | #### Level 1 Boss战 76 | 在写这篇文章之前, 我已经犯过错了. 这里是一段 html: 77 | ``` 78 |
79 |
80 |
81 | ``` 82 | 83 | 给它加上下面的 JS, 如果我点击 `div.inner` 会打印什么? 84 | ```javascript 85 | // Let's get hold of those elements 86 | var outer = document.querySelector('.outer'); 87 | var inner = document.querySelector('.inner'); 88 | 89 | // Let's listen for attribute changes on the 90 | // outer element 91 | new MutationObserver(function() { 92 | console.log('mutate'); 93 | }).observe(outer, { 94 | attributes: true 95 | }); 96 | 97 | // Here's a click listener… 98 | function onClick() { 99 | console.log('click'); 100 | 101 | setTimeout(function() { 102 | console.log('timeout'); 103 | }, 0); 104 | 105 | Promise.resolve().then(function() { 106 | console.log('promise'); 107 | }); 108 | 109 | outer.setAttribute('data-random', Math.random()); 110 | } 111 | 112 | // …which we'll attach to both elements 113 | inner.addEventListener('click', onClick); 114 | outer.addEventListener('click', onClick); 115 | ``` 116 | 117 | 在偷看答案之前自己运行一遍, 提示: 不止打印一次. 118 | 119 | #### 验证 120 | 121 | 点击里面的块, 触发点击事件: 122 | [原文章有一个可操作的小demo](https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/) 123 | 124 | 和你猜的一样吗? 如果是, 你或许是正确的. 不幸的是, 不同浏览器会不太一致: 125 | ``` 126 | Chrome: click |promise | mutate | click | promise | mutate | timeout | timeout 127 | 128 | FireFox: click | mutate | click | mutate | timeout | promise | promise | timeout 129 | 130 | Safari: | click | mutate | clic | mutate| promise | promise | timeout| timeout 131 | 132 | IE:|click|click|mutate|timeout|promise|timeout|promise 133 | ``` 134 | 135 | #### 谁是正确的? 136 | 137 | 调度 'click' 事件的是一个 task. ` Mutation observer ` 和 `promise callbacks ` 是属于 microtask的. `setTimeout` 回调是作为一个task的.所以这里就是它们是如何运行的: 138 | 139 | [查看原文章demo](https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/) 140 | 141 | 如果是 Chrome , 它将会这样运行.其中对我来说新奇的是 microtask 是在 callbacks 之后处理的(只要没有其他的 JavaScript 中间执行).我认为它会被 `end-of-task` 限制.这个规则是来自 HTML 中的调用回调的规范: 142 | 143 | > 如果[脚本设置的对象栈](https://html.spec.whatwg.org/multipage/webappapis.html#stack-of-script-settings-objects)是空的, 就[执行一次 microtask 检查](https://html.spec.whatwg.org/multipage/webappapis.html#perform-a-microtask-checkpoint) 144 | > -- [HTML: 回调之后的清理 步骤3](https://html.spec.whatwg.org/multipage/webappapis.html#clean-up-after-running-a-callback) 145 | 146 | microtask 检查点将会遍及整个 microtask 队列, 直到处理了整个 microtask 队列. 相似的是, ECMAScript 是这么描述 `jobs` 的: 147 | 148 | > 只有在 没有正在运行的上下文 和 执行上下文栈是空的 这样的情况下, 才回去执行 `job`. 149 | > -- [ECMAScript: Job and Job queues](http://www.ecma-international.org/ecma-262/6.0/#sec-jobs-and-job-queues) 150 | 151 | 虽然在 HTML 上下文中 `can be` 会变成 `must be`~~~ 152 | 153 | #### 浏览器出错了? 154 | 155 | `FireFox` 和 `Safari` 是在 click 监听者之间耗尽了 microtask 队列, 就像 mutation 回调所示, 但是 promises 似乎不太一样. 情有可原的是关联 `jobs` 和 `microtasks`是模糊的, 但我还是希望它们在监听者回调中调用.[Firefox ticket](https://bugzilla.mozilla.org/show_bug.cgi?id=1193394). [Safari ticket](https://bugs.webkit.org/show_bug.cgi?id=147933). 156 | 157 | 至于 Edge 我们已经看到排列 promise 是正确的,但是它在click 监听者之间处理 microtask 还是失败的, 取而代之的是会在所有监听者之后处理.这就能解释 `mutate` 会在所有 `click` 之后打印.[Bug ticket](https://connect.microsoft.com/IE/feedbackdetail/view/1658386/microtasks-queues-should-be-processed-following-event-listeners) 158 | 159 | #### Level 1 boss暴躁的老大哥 160 | 使用上面例子, 如果我们执行 `inner.click()` 会怎么样? 161 | 162 | 它将会像前面一样开始时间调度, 但是使用的是 script 而不是 真正的交互. 163 | 164 | #### try it 165 | [原文demo](https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/) 166 | 167 | 浏览器的执行结果是: 168 | ``` 169 | chrome: click | click | promise | mutate | promise | timeout | timeout 170 | FireFox: click | click | mutate | timeout | promise | promise | timeout 171 | Safari: click | click | mutate | promise | promise | timeout | timeout 172 | IE: click | click | mutate | timeout | promise | timeout | promise 173 | ``` 174 | 175 | 我发誓在 chrome 上还是会显示不同的结果, 如果你在chrome中得到不同的结果, 欢迎在评论中告诉我其版本号. 176 | 177 | #### 为什么会不同 178 | 这就是它如何执行的: 179 | ```javascript 180 | // Let's get hold of those elements 181 | var outer = document.querySelector('.outer'); 182 | var inner = document.querySelector('.inner'); 183 | 184 | // Let's listen for attribute changes on the 185 | // outer element 186 | new MutationObserver(function() { 187 | console.log('mutate'); 188 | }).observe(outer, { 189 | attributes: true 190 | }); 191 | ``` 192 | 193 | [原文demo](https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/) 194 | 195 | 所以正确的是: click, click, promise, mutate, promise, timeout, timeout, chrome 上好像是正确的. 196 | 197 | 当所有的 监听者 回调都被调用之后... 198 | > 如果[脚本设置的对象栈](https://html.spec.whatwg.org/multipage/webappapis.html#stack-of-script-settings-objects)是空的, 就[执行一次 microtask 检查](https://html.spec.whatwg.org/multipage/webappapis.html#perform-a-microtask-checkpoint) 199 | > -- [HTML: 回调之后的清理 步骤3](https://html.spec.whatwg.org/multipage/webappapis.html#clean-up-after-running-a-callback) 200 | 201 | 原先, 这表明 microtask 是在 监听者回调之间 运行的, 但是 `.click()`导致事件同步调用, 所以在回调中 调用`.click()的script`依旧在栈中的. 以上的规则确保 microtask 不会中断 中间执行的 JavaScript.这意味着我们在监听者回调中是不会处理 microtask 的, 他们会在所有的监听者时候被处理. 202 | 203 | #### 这有什么关系吗? 204 | 205 | 好吧, 这还是讲的比较晦涩.我在尝试为 [`indexedDB` 创建一个简单的包装库过程中](https://github.com/jakearchibald/indexeddb-promised/blob/master/lib/idb.js), 使用了 promise 而不是 `IDBRequest` 对象, 遇到了这个问题.这使IDB很有趣的被使用. 206 | 207 | 当 IDB 触发了一个成功的事件, [涉及到交易的对象在调度完之后就变成停滞状态](http://w3c.github.io/IndexedDB/#fire-a-success-event)(步骤4),如果我创建一个 promise 会在 当事件 fire 时变为 resolve 状态, 当交易还是活跃的时候该回调应该在步骤4之前运行, 但是除了chrome在其他浏览器上预期的并未发生. 208 | 209 | 你可以在FireFox上试试触发这个问题, 因为像 [es6-promise](https://github.com/jakearchibald/es6-promise) 使用 `mutation observer` 作为回调, es6 polyfills使用的是 microtask. Safari好像因为其 fix 也会有些问题, 这就是他们的 [ broken implementation of IDB](http://www.raymondcamden.com/2014/09/25/IndexedDB-on-iOS-8-Broken-Bad),不幸的是, 在 IE/ 210 | IE/Edge 上有些东西会反复的失败, 像是在回调之后 `mutation 事件` 并未被执行. 211 | 212 | 但愿我们将会在不久之后见到他们之间的一些互通性. 213 | 214 | #### 你做到了! 215 | 216 | 总结: 217 | + Task会顺序执行, 浏览器可能会在他们之间 发生渲染. 218 | + Microtask也是顺序执行, 他们会在下面两种情况下被执行: 219 | + 在每一个回调之后, 只要没有其他的中间执行的javascript 220 | + 在每一个 task 结束之后 221 | 但愿你现在可以理解事件循环. 222 | 223 | 所以, 现在有人还在看吗?hello?hello> 224 | 225 | 226 | #### 其他参考 227 | 228 | [JS基础 Promise](https://github.com/BlackGanglion/My-Reading-List/issues/4) 229 | [Difference between microtask and macrotask within an event loop context](https://stackoverflow.com/questions/25915634/difference-between-microtask-and-macrotask-within-an-event-loop-context) 230 | [非同步程式碼之霧：Node.js 的事件迴圈與 EventEmitter](https://medium.com/sivann-com-tw/%E9%9D%9E%E5%90%8C%E6%AD%A5%E7%A8%8B%E5%BC%8F%E7%A2%BC%E4%B9%8B%E9%9C%A7-node-js-%E7%9A%84%E4%BA%8B%E4%BB%B6%E8%BF%B4%E5%9C%88%E8%88%87-eventemitter-809432976c1b) 231 | [javascript线程解释（setTimeout,setInterval你不知道的事）](http://www.cnblogs.com/youxin/p/3354924.html) 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | -------------------------------------------------------------------------------- /blog/对区块链的一些思考.md: -------------------------------------------------------------------------------- 1 | ## 对区块链的一些思考 2 | 3 | 参考链接： 4 | [区块链技术指南](https://yeasy.gitbooks.io/blockchain_guide/content/) 5 | [TED最火演讲: 区块链将如何改变世界](https://mp.weixin.qq.com/s/pMQ4G5DbWwBmFuvVAhRN2g) 6 | [Page seven胡先笙](https://music.163.com/#/djradio?id=4387004) 7 | [PluralSight](https://app.pluralsight.com/library/courses/bitcoin-decentralized-technology) 8 | [比特币白皮书](https://bitcoin.org/bitcoin.pdf) 9 | [ Introduction to Bitcoin - Andreas Antonopoulus](https://www.youtube.com/channel/UCJWCJCWOxBYSi5DhCieLOLQ) 10 | [Mastering Bitcoin](https://github.com/bitcoinbook/bitcoinbook) 11 | [Revealing Ethereum at Bitcoin Miami 2014 - Vitalik](https://www.youtube.com/watch?v=l9dpjN3Mwps) 12 | -------------------------------------------------------------------------------- /frontend-compare-score-2016.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mrwaite/Share/e0cbf85a1790eb396f09cc735c262c22037303e9/frontend-compare-score-2016.jpg -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'), 2 | sass = require('gulp-ruby-sass'), 3 | autoprefixer = require('gulp-autoprefixer'), 4 | minifycss = require('gulp-minify-css'), 5 | jshint = require('gulp-jshint'), 6 | uglify = require('gulp-uglify'), 7 | imagemin = require('gulp-imagemin'), 8 | rename = require('gulp-rename'), 9 | concat = require('gulp-concat'), 10 | notify = require('gulp-notify'), 11 | cache = require('gulp-cache'), 12 | livereload = require('gulp-livereload'), 13 | del = require('del'); 14 | 15 | gulp.task('styles' , function () { 16 | return sass('src/styles/main.scss', { style : 'expanded' }) 17 | .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'andriod 4')) 18 | .pipe(gulp.dest('dist/assets/css')) 19 | .pipe(rename({suffix : '.min'})) 20 | .pipe(minifycss()) 21 | .pipe(gulp.dest('dist/assets/css')) 22 | .pipe(notify({ message : 'Style Task Complete'})); 23 | }); 24 | 25 | gulp.task('scripts', function () { 26 | return gulp.src('src/scripts/**/*.js') 27 | .pipe(jshint('.jshintrc')) 28 | .pipe(jshint.reporter('default')) 29 | .pipe(concat('main.js')) 30 | .pipe(gulp.dest('dist/assets/js')) 31 | .pipe(rename({ suffix : '.min' })) 32 | .pipe(uglify()) 33 | .pipe(gulp.dest('dist/assets/js')) 34 | .pipe(notify({ message : 'scripts task complete' })); 35 | }); 36 | gulp.task('images', function () { 37 | return gulp.src('src/images/**/*') 38 | .pipe(cache(imagemin({ optimizationLevel : 5, progressive : true, interlaced : true}))) 39 | .pipe(gulp.dest('dist/assets/img')) 40 | .pipe(notify({ message : 'Image task complete' })); 41 | }); 42 | 43 | gulp.task('clean', function (cb) { 44 | del(['dist/assets/css', 'dist/assets/js', 'dist/assets/img'], cb); 45 | }); 46 | 47 | gulp.task('default', ['clean','styles', 'scripts', 'images']); 48 | 49 | gulp.task('watch', function () { 50 | //watch scss files 51 | //gulp.watch('src/styles/**/*.scss', ['styles']); 52 | 53 | //watch .js files 54 | //gulp.watch('src/scripts/**/*.js', ['scripts']); 55 | 56 | //watch image files 57 | //gulp.watch('src/image/**/*', ['images']); 58 | 59 | //create livereload server 60 | livereload.listen(); 61 | 62 | //watch any files in dist/, reload on change 63 | gulp.watch(['dist/**']).on('change', livereload.changed()); 64 | }); 65 | 66 | 67 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /log.txt: -------------------------------------------------------------------------------- 1 | INFO: loading config from /home/mrwaite/shadowsocks.json 2 | 2017-03-09 08:00:52 INFO starting local at 127.0.0.1:1080 3 | 2017-03-09 08:01:01 INFO connecting clients4.google.com:443 4 | 2017-03-09 08:01:01 INFO connecting clients4.google.com:443 5 | 2017-03-09 08:01:05 INFO connecting www.googleapis.com:443 6 | 2017-03-09 08:01:05 INFO connecting www.googleapis.com:443 7 | 2017-03-09 10:39:58 INFO connecting marketplace.visualstudio.com:443 8 | 2017-03-09 10:40:00 INFO connecting marketplace.visualstudio.com:443 9 | 2017-03-09 10:40:00 INFO connecting marketplace.visualstudio.com:443 10 | 2017-03-09 10:40:00 INFO connecting marketplace.visualstudio.com:443 11 | 2017-03-09 10:40:02 INFO connecting api.digitalparticle.com:80 12 | 2017-03-09 10:40:19 INFO connecting marketplace.visualstudio.com:443 13 | 2017-03-09 10:40:20 INFO connecting vscode-update.azurewebsites.net:443 14 | 2017-03-09 10:40:20 INFO connecting api.digitalparticle.com:80 15 | 2017-03-09 10:40:20 INFO connecting marketplace.visualstudio.com:443 16 | 2017-03-09 10:40:20 INFO connecting marketplace.visualstudio.com:443 17 | 2017-03-09 10:40:20 INFO connecting marketplace.visualstudio.com:443 18 | 2017-03-09 16:52:38 ERROR poll:[Errno 4] Interrupted system call 19 | Traceback (most recent call last): 20 | File "/usr/lib/python2.7/dist-packages/shadowsocks/eventloop.py", line 198, in run 21 | events = self.poll(1) 22 | File "/usr/lib/python2.7/dist-packages/shadowsocks/eventloop.py", line 175, in poll 23 | events = self._impl.poll(timeout) 24 | File "/usr/lib/python2.7/dist-packages/shadowsocks/eventloop.py", line 63, in poll 25 | return self._epoll.poll(timeout) 26 | IOError: [Errno 4] Interrupted system call 27 | 2017-03-09 19:12:03 ERROR poll:[Errno 4] Interrupted system call 28 | Traceback (most recent call last): 29 | File "/usr/lib/python2.7/dist-packages/shadowsocks/eventloop.py", line 198, in run 30 | events = self.poll(1) 31 | File "/usr/lib/python2.7/dist-packages/shadowsocks/eventloop.py", line 175, in poll 32 | events = self._impl.poll(timeout) 33 | File "/usr/lib/python2.7/dist-packages/shadowsocks/eventloop.py", line 63, in poll 34 | return self._epoll.poll(timeout) 35 | IOError: [Errno 4] Interrupted system call 36 | 2017-03-09 19:27:07 INFO connecting clients1.google.com:443 37 | 2017-03-09 19:27:07 INFO connecting clients1.google.com:443 38 | 2017-03-09 19:27:11 INFO connecting raw.githubusercontent.com:443 39 | 2017-03-09 19:27:11 INFO connecting pbs.twimg.com:443 40 | 2017-03-09 19:27:11 INFO connecting pbs.twimg.com:443 41 | 2017-03-09 19:27:11 INFO connecting pbs.twimg.com:443 42 | 2017-03-09 19:27:14 INFO connecting www.google.com.hk:443 43 | 2017-03-09 19:27:14 INFO connecting www.google.com.hk:443 44 | 2017-03-09 19:27:14 INFO connecting www.google.com.hk:443 45 | 2017-03-09 19:27:14 INFO connecting www.google.com.hk:443 46 | 2017-03-09 19:27:15 INFO connecting www.google.com.hk:443 47 | 2017-03-09 19:27:16 INFO connecting www.google.com:443 48 | 2017-03-09 19:27:18 ERROR [Errno 104] Connection reset by peer 49 | 2017-03-09 19:27:18 INFO connecting lh3.googleusercontent.com:443 50 | 2017-03-09 19:27:19 INFO connecting www.gstatic.com:443 51 | 2017-03-09 19:27:20 INFO connecting clients5.google.com:443 52 | 2017-03-09 19:27:20 INFO connecting apis.google.com:443 53 | 2017-03-09 19:27:20 INFO connecting ogs.google.com:443 54 | 2017-03-09 19:27:25 ERROR [Errno 104] Connection reset by peer 55 | 2017-03-09 19:27:25 ERROR [Errno 104] Connection reset by peer 56 | 2017-03-09 19:27:25 INFO connecting notifications.google.com:443 57 | 2017-03-09 19:27:26 ERROR [Errno 104] Connection reset by peer 58 | 2017-03-09 19:27:26 ERROR [Errno 104] Connection reset by peer 59 | 2017-03-09 19:27:26 ERROR [Errno 104] Connection reset by peer 60 | 2017-03-09 19:27:26 ERROR [Errno 104] Connection reset by peer 61 | 2017-03-09 19:27:26 INFO connecting fonts.gstatic.com:443 62 | 2017-03-09 19:27:27 INFO connecting beacons3.gvt2.com:443 63 | 2017-03-09 19:27:27 INFO connecting beacons3.gvt2.com:443 64 | 2017-03-09 19:27:27 INFO connecting beacons3.gvt2.com:443 65 | 2017-03-09 19:27:27 INFO connecting xn--vue-wu9dj99s7gqg8g:80 66 | 2017-03-09 19:27:29 INFO connecting id.google.com.hk:443 67 | 2017-03-09 19:27:29 INFO connecting twitter.com:443 68 | 2017-03-09 19:27:39 ERROR [Errno 104] Connection reset by peer 69 | 2017-03-09 19:27:39 ERROR [Errno 104] Connection reset by peer 70 | 2017-03-09 19:27:39 INFO connecting beacons5.gvt2.com:443 71 | 2017-03-09 19:27:39 INFO connecting pbs.twimg.com:443 72 | 2017-03-09 19:27:39 INFO connecting pbs.twimg.com:443 73 | 2017-03-09 19:27:39 INFO connecting pbs.twimg.com:443 74 | 2017-03-09 19:27:39 INFO connecting ssl.gstatic.com:443 75 | 2017-03-09 19:27:41 INFO connecting github.com:443 76 | 2017-03-09 19:27:42 INFO connecting avatars1.githubusercontent.com:443 77 | 2017-03-09 19:27:43 INFO connecting avatars1.githubusercontent.com:443 78 | 2017-03-09 19:27:43 INFO connecting avatars2.githubusercontent.com:443 79 | 2017-03-09 19:27:43 INFO connecting avatars2.githubusercontent.com:443 80 | 2017-03-09 19:27:43 INFO connecting camo.githubusercontent.com:443 81 | 2017-03-09 19:27:43 INFO connecting camo.githubusercontent.com:443 82 | 2017-03-09 19:27:43 INFO connecting camo.githubusercontent.com:443 83 | 2017-03-09 19:27:43 INFO connecting camo.githubusercontent.com:443 84 | 2017-03-09 19:27:43 INFO connecting avatars1.githubusercontent.com:443 85 | 2017-03-09 19:27:43 INFO connecting avatars3.githubusercontent.com:443 86 | 2017-03-09 19:27:43 INFO connecting avatars3.githubusercontent.com:443 87 | 2017-03-09 19:27:44 INFO connecting github.algolia.com:443 88 | 2017-03-09 19:27:45 INFO connecting www.imooc.com:80 89 | 2017-03-09 19:27:45 INFO connecting collector.githubapp.com:443 90 | 2017-03-09 19:27:45 INFO connecting assets-cdn.github.com:443 91 | 2017-03-09 19:27:45 INFO connecting live.github.com:443 92 | 2017-03-09 19:27:45 INFO connecting api.github.com:443 93 | 2017-03-09 19:27:47 INFO connecting static.mukewang.com:80 94 | 2017-03-09 19:27:48 INFO connecting api.github.com:443 95 | 2017-03-09 19:27:48 INFO connecting www.imooc.com:80 96 | 2017-03-09 19:27:48 INFO connecting www.imooc.com:80 97 | 2017-03-09 19:27:48 INFO connecting www.imooc.com:80 98 | 2017-03-09 19:27:48 INFO connecting img.mukewang.com:80 99 | 2017-03-09 19:27:48 INFO connecting img.mukewang.com:80 100 | 2017-03-09 19:27:48 INFO connecting static.mukewang.com:80 101 | 2017-03-09 19:27:49 INFO connecting api.github.com:443 102 | 2017-03-09 19:27:49 INFO connecting api.github.com:443 103 | 2017-03-09 19:27:52 INFO connecting static.mukewang.com:80 104 | 2017-03-09 19:27:52 INFO connecting static.mukewang.com:80 105 | 2017-03-09 19:27:52 INFO connecting static.mukewang.com:80 106 | 2017-03-09 19:27:52 INFO connecting static.mukewang.com:80 107 | 2017-03-09 19:27:52 INFO connecting static.mukewang.com:80 108 | 2017-03-09 19:27:53 ERROR [Errno 104] Connection reset by peer 109 | 2017-03-09 19:27:53 ERROR [Errno 104] Connection reset by peer 110 | 2017-03-09 19:27:53 ERROR [Errno 104] Connection reset by peer 111 | 2017-03-09 19:27:53 ERROR [Errno 104] Connection reset by peer 112 | 2017-03-09 19:27:53 INFO connecting www.inoreader.com:443 113 | 2017-03-09 19:27:55 INFO connecting beacons.gvt2.com:443 114 | 2017-03-09 19:28:09 INFO connecting app.yinxiang.com:443 115 | 2017-03-09 19:28:14 INFO connecting mtalk.google.com:5228 116 | 2017-03-09 19:28:18 INFO connecting www.google.com.hk:443 117 | 2017-03-09 19:28:30 INFO connecting google.com:443 118 | 2017-03-09 19:29:12 INFO connecting beacons4.gvt2.com:443 119 | 2017-03-09 19:29:32 INFO connecting clients4.google.com:443 120 | 2017-03-09 19:29:53 INFO connecting www.imooc.com:80 121 | 2017-03-09 19:29:56 INFO connecting www.imooc.com:80 122 | 2017-03-09 19:29:56 INFO connecting www.imooc.com:80 123 | 2017-03-09 19:29:56 INFO connecting www.imooc.com:80 124 | 2017-03-09 19:29:56 INFO connecting www.imooc.com:80 125 | 2017-03-09 19:29:56 INFO connecting www.imooc.com:80 126 | 2017-03-09 19:30:00 INFO connecting img.mukewang.com:80 127 | 2017-03-09 19:30:00 INFO connecting img.mukewang.com:80 128 | 2017-03-09 19:30:00 INFO connecting img.mukewang.com:80 129 | 2017-03-09 19:30:00 INFO connecting img.mukewang.com:80 130 | 2017-03-09 19:30:00 INFO connecting img.mukewang.com:80 131 | 2017-03-09 19:30:00 INFO connecting img.mukewang.com:80 132 | 2017-03-09 19:30:19 INFO connecting mtalk.google.com:5228 133 | 2017-03-09 19:30:55 INFO connecting maxiang.io:443 134 | 2017-03-09 19:31:38 INFO connecting 113.142.84.117:80 135 | 2017-03-09 19:32:24 INFO connecting mtalk.google.com:5228 136 | 2017-03-09 19:32:24 INFO connecting maxiang.io:443 137 | 2017-03-09 19:32:44 INFO connecting github.com:443 138 | 2017-03-09 19:32:53 INFO connecting www.inoreader.com:443 139 | 2017-03-09 19:33:39 INFO connecting www.google.com.hk:443 140 | 2017-03-09 19:33:47 INFO connecting clients4.google.com:443 141 | 2017-03-09 19:34:29 INFO connecting mtalk.google.com:5228 142 | 2017-03-09 19:34:50 ERROR [Errno 104] Connection reset by peer 143 | 2017-03-09 19:34:50 INFO connecting www.google.com.hk:443 144 | 2017-03-09 19:34:54 INFO connecting maxiang.io:443 145 | 2017-03-09 19:35:24 INFO connecting maxiang.io:443 146 | 2017-03-09 19:35:53 INFO connecting 113.142.84.113:80 147 | 2017-03-09 19:35:56 INFO connecting 222.24.19.190:8080 148 | 2017-03-09 19:36:35 INFO connecting mtalk.google.com:5228 149 | 2017-03-09 19:36:44 INFO connecting 222.24.19.190:8080 150 | 2017-03-09 19:37:17 INFO connecting translate.googleapis.com:443 151 | 2017-03-09 19:37:44 INFO connecting github.com:443 152 | 2017-03-09 19:37:53 INFO connecting www.inoreader.com:443 153 | 2017-03-09 19:38:17 INFO connecting clients4.google.com:443 154 | 2017-03-09 19:38:41 INFO connecting mtalk.google.com:5228 155 | 2017-03-09 19:39:13 INFO connecting www.google.com.hk:443 156 | 2017-03-09 19:39:27 INFO connecting clients4.google.com:443 157 | 2017-03-09 19:39:56 INFO connecting sub.adtchrome.com:80 158 | 2017-03-09 19:39:56 INFO connecting sub.adtchrome.com:80 159 | 2017-03-09 19:39:56 INFO connecting sub.adtchrome.com:80 160 | 2017-03-09 19:40:30 INFO connecting www.google.com.hk:443 161 | 2017-03-09 19:40:38 INFO connecting clients1.google.com:443 162 | 2017-03-09 19:40:46 INFO connecting mtalk.google.com:5228 163 | 2017-03-09 19:40:59 INFO connecting vuex.vuejs.org:443 164 | 2017-03-09 19:41:01 INFO connecting fonts.gstatic.com:443 165 | 2017-03-09 19:41:06 INFO connecting maxiang.io:443 166 | 2017-03-09 19:42:44 ERROR [Errno 104] Connection reset by peer 167 | 2017-03-09 19:42:44 INFO connecting github.com:443 168 | 2017-03-09 19:42:51 INFO connecting mtalk.google.com:5228 169 | 2017-03-09 19:42:53 INFO connecting www.inoreader.com:443 170 | 2017-03-09 19:43:11 INFO connecting app.yinxiang.com:443 171 | 2017-03-09 19:44:29 INFO connecting api.xitu.io:80 172 | 2017-03-09 19:44:29 INFO connecting api.xitu.io:80 173 | 2017-03-09 19:44:29 INFO connecting api.xitu.io:80 174 | 2017-03-09 19:44:29 INFO connecting images.unsplash.com:443 175 | 2017-03-09 19:44:29 INFO connecting images.unsplash.com:443 176 | 2017-03-09 19:44:29 INFO connecting images.unsplash.com:443 177 | 2017-03-09 19:44:29 INFO connecting images.unsplash.com:443 178 | 2017-03-09 19:44:29 INFO connecting images.unsplash.com:443 179 | 2017-03-09 19:44:29 INFO connecting images.unsplash.com:443 180 | 2017-03-09 19:44:30 INFO connecting www.google.com.hk:443 181 | 2017-03-09 19:44:32 INFO connecting 115.29.201.173:80 182 | 2017-03-09 19:44:32 INFO connecting 115.29.201.173:80 183 | 2017-03-09 19:44:32 INFO connecting 115.29.201.173:80 184 | 2017-03-09 19:44:56 INFO connecting 115.29.201.173:80 185 | 2017-03-09 19:44:56 INFO connecting 115.29.201.173:80 186 | 2017-03-09 19:44:56 INFO connecting mtalk.google.com:5228 187 | 2017-03-09 19:44:57 INFO connecting 115.29.201.173:80 188 | 2017-03-09 19:44:57 INFO connecting 115.29.201.173:80 189 | 2017-03-09 19:44:57 INFO connecting 115.29.201.173:80 190 | 2017-03-09 19:44:57 INFO connecting 115.29.201.173:80 191 | 2017-03-09 19:45:07 INFO connecting 115.29.201.173:80 192 | 2017-03-09 19:45:08 INFO connecting 115.29.201.173:80 193 | 2017-03-09 19:45:10 INFO connecting 115.29.201.173:80 194 | 2017-03-09 19:45:17 INFO connecting 115.29.201.173:80 195 | 2017-03-09 19:45:17 INFO connecting 115.29.201.173:80 196 | 2017-03-09 19:45:17 INFO connecting 115.29.201.173:80 197 | 2017-03-09 19:45:17 INFO connecting 115.29.201.173:80 198 | 2017-03-09 19:45:17 INFO connecting 115.29.201.173:80 199 | 2017-03-09 19:45:18 INFO connecting 115.29.201.173:80 200 | 2017-03-09 19:45:24 INFO connecting 115.29.201.173:80 201 | 2017-03-09 19:45:38 ERROR [Errno 104] Connection reset by peer 202 | 2017-03-09 19:45:38 ERROR [Errno 104] Connection reset by peer 203 | 2017-03-09 19:45:38 ERROR [Errno 104] Connection reset by peer 204 | 2017-03-09 19:45:38 ERROR [Errno 104] Connection reset by peer 205 | 2017-03-09 19:45:38 ERROR [Errno 104] Connection reset by peer 206 | 2017-03-09 19:45:38 ERROR [Errno 104] Connection reset by peer 207 | 2017-03-09 19:45:38 INFO connecting beacons.gvt2.com:443 208 | 2017-03-09 19:45:45 INFO connecting 115.29.201.173:80 209 | 2017-03-09 19:45:56 INFO connecting 222.24.19.190:8080 210 | 2017-03-09 19:46:37 INFO connecting api.xitu.io:80 211 | 2017-03-09 19:46:37 INFO connecting api.xitu.io:80 212 | 2017-03-09 19:46:37 INFO connecting api.xitu.io:80 213 | 2017-03-09 19:46:37 INFO connecting images.unsplash.com:443 214 | 2017-03-09 19:46:37 INFO connecting images.unsplash.com:443 215 | 2017-03-09 19:46:37 INFO connecting images.unsplash.com:443 216 | 2017-03-09 19:46:37 INFO connecting images.unsplash.com:443 217 | 2017-03-09 19:46:39 INFO connecting clients4.google.com:443 218 | 2017-03-09 19:47:02 INFO connecting mtalk.google.com:5228 219 | 2017-03-09 19:47:38 ERROR [Errno 104] Connection reset by peer 220 | 2017-03-09 19:47:38 ERROR [Errno 104] Connection reset by peer 221 | 2017-03-09 19:47:38 ERROR [Errno 104] Connection reset by peer 222 | 2017-03-09 19:47:38 ERROR [Errno 104] Connection reset by peer 223 | 2017-03-09 19:47:38 INFO connecting www.google.com.hk:443 224 | 2017-03-09 19:47:44 INFO connecting github.com:443 225 | 2017-03-09 19:47:53 INFO connecting www.inoreader.com:443 226 | 2017-03-09 19:48:03 INFO connecting 115.29.201.173:80 227 | 2017-03-09 19:48:03 INFO connecting 115.29.201.173:80 228 | 2017-03-09 19:48:03 INFO connecting 115.29.201.173:80 229 | 2017-03-09 19:48:03 INFO connecting 115.29.201.173:80 230 | 2017-03-09 19:48:03 INFO connecting 115.29.201.173:80 231 | 2017-03-09 19:48:59 INFO connecting mmbiz.qpic.cn:80 232 | 2017-03-09 19:48:59 INFO connecting mmbiz.qpic.cn:80 233 | 2017-03-09 19:48:59 INFO connecting mmbiz.qpic.cn:80 234 | 2017-03-09 19:48:59 INFO connecting mmbiz.qpic.cn:80 235 | 2017-03-09 19:49:07 INFO connecting mtalk.google.com:5228 236 | 2017-03-09 19:51:05 INFO connecting api.xitu.io:80 237 | 2017-03-09 19:51:05 INFO connecting api.xitu.io:80 238 | 2017-03-09 19:51:05 INFO connecting api.xitu.io:80 239 | 2017-03-09 19:51:06 INFO connecting www.google.com.hk:443 240 | 2017-03-09 19:51:06 INFO connecting pbs.twimg.com:443 241 | 2017-03-09 19:51:06 INFO connecting id.google.com.hk:443 242 | 2017-03-09 19:51:06 INFO connecting ssl.gstatic.com:443 243 | 2017-03-09 19:51:06 INFO connecting www.google.com:443 244 | 2017-03-09 19:51:06 INFO connecting pbs.twimg.com:443 245 | 2017-03-09 19:51:06 INFO connecting www.gstatic.com:443 246 | 2017-03-09 19:51:06 INFO connecting images.unsplash.com:443 247 | 2017-03-09 19:51:06 INFO connecting images.unsplash.com:443 248 | 2017-03-09 19:51:06 INFO connecting images.unsplash.com:443 249 | 2017-03-09 19:51:06 INFO connecting images.unsplash.com:443 250 | 2017-03-09 19:51:06 INFO connecting images.unsplash.com:443 251 | 2017-03-09 19:51:06 INFO connecting images.unsplash.com:443 252 | 2017-03-09 19:51:06 INFO connecting www.google.com.hk:443 253 | 2017-03-09 19:51:06 INFO connecting www.google.com.hk:443 254 | 2017-03-09 19:51:06 INFO connecting www.google.com.hk:443 255 | 2017-03-09 19:51:06 INFO connecting www.google.com.hk:443 256 | 2017-03-09 19:51:07 INFO connecting code.mrwaite.cn:80 257 | 2017-03-09 19:51:07 INFO connecting cdn.bootcss.com:80 258 | 2017-03-09 19:51:07 INFO connecting cdn.bootcss.com:80 259 | 2017-03-09 19:51:07 INFO connecting code.mrwaite.cn:80 260 | 2017-03-09 19:51:07 INFO connecting code.mrwaite.cn:80 261 | 2017-03-09 19:51:07 INFO connecting code.mrwaite.cn:80 262 | 2017-03-09 19:51:07 INFO connecting ojr16of5n.bkt.clouddn.com:80 263 | 2017-03-09 19:51:07 INFO connecting ojr16of5n.bkt.clouddn.com:80 264 | 2017-03-09 19:51:09 INFO connecting stats.g.doubleclick.net:443 265 | 2017-03-09 19:51:12 INFO connecting mtalk.google.com:5228 266 | 2017-03-09 19:51:19 ERROR [Errno 104] Connection reset by peer 267 | 2017-03-09 19:51:19 ERROR [Errno 104] Connection reset by peer 268 | 2017-03-09 19:51:19 ERROR [Errno 104] Connection reset by peer 269 | 2017-03-09 19:51:19 ERROR [Errno 104] Connection reset by peer 270 | 2017-03-09 19:51:19 ERROR [Errno 104] Connection reset by peer 271 | 2017-03-09 19:51:19 ERROR [Errno 104] Connection reset by peer 272 | 2017-03-09 19:51:19 ERROR [Errno 104] Connection reset by peer 273 | 2017-03-09 19:51:19 ERROR [Errno 104] Connection reset by peer 274 | 2017-03-09 19:51:19 ERROR [Errno 104] Connection reset by peer 275 | 2017-03-09 19:51:19 ERROR [Errno 104] Connection reset by peer 276 | 2017-03-09 19:51:19 ERROR [Errno 104] Connection reset by peer 277 | 2017-03-09 19:51:19 ERROR [Errno 104] Connection reset by peer 278 | 2017-03-09 19:51:19 ERROR [Errno 104] Connection reset by peer 279 | 2017-03-09 19:51:19 ERROR [Errno 104] Connection reset by peer 280 | 2017-03-09 19:51:19 ERROR [Errno 104] Connection reset by peer 281 | 2017-03-09 19:51:19 INFO connecting clients4.google.com:443 282 | 2017-03-09 19:51:23 INFO connecting clients1.google.com:443 283 | 2017-03-09 19:52:07 INFO connecting www.google.com.hk:443 284 | 2017-03-09 19:52:07 INFO connecting beacons.gvt2.com:443 285 | 2017-03-09 19:52:07 INFO connecting beacons5.gvt3.com:443 286 | 2017-03-09 19:52:44 INFO connecting github.com:443 287 | 2017-03-09 19:52:44 INFO connecting www.googleapis.com:443 288 | 2017-03-09 19:52:53 INFO connecting www.inoreader.com:443 289 | 2017-03-09 19:53:18 INFO connecting mtalk.google.com:5228 290 | 2017-03-09 19:55:23 INFO connecting mtalk.google.com:5228 291 | 2017-03-09 19:55:35 INFO connecting maxiang.io:443 292 | 2017-03-09 19:55:56 INFO connecting 222.24.19.190:8080 293 | 2017-03-09 19:57:28 INFO connecting mtalk.google.com:5228 294 | 2017-03-09 19:57:44 INFO connecting github.com:443 295 | 2017-03-09 19:57:53 INFO connecting www.inoreader.com:443 296 | 2017-03-09 19:58:13 INFO connecting app.yinxiang.com:443 297 | 2017-03-09 19:59:33 INFO connecting mtalk.google.com:5228 298 | 2017-03-09 20:00:01 INFO connecting 61.134.46.28:80 299 | 2017-03-09 20:00:04 INFO connecting clients4.google.com:443 300 | 2017-03-09 20:00:33 INFO connecting maxiang.io:443 301 | 2017-03-09 20:00:36 INFO connecting www.google.com.hk:443 302 | 2017-03-09 20:00:41 INFO connecting id.google.com.hk:443 303 | 2017-03-09 20:00:51 INFO connecting clients4.google.com:443 304 | 2017-03-09 20:00:55 INFO connecting gold.xitu.io:443 305 | 2017-03-09 20:00:55 INFO connecting gold.xitu.io:443 306 | 2017-03-09 20:00:58 INFO connecting app-router.leancloud.cn:443 307 | 2017-03-09 20:00:58 INFO connecting app-router.leancloud.cn:443 308 | 2017-03-09 20:00:58 INFO connecting app-router.leancloud.cn:443 309 | 2017-03-09 20:00:58 INFO connecting avatars.githubusercontent.com:443 310 | 2017-03-09 20:00:58 INFO connecting avatars.githubusercontent.com:443 311 | 2017-03-09 20:00:58 INFO connecting avatars.githubusercontent.com:443 312 | 2017-03-09 20:00:58 INFO connecting avatars.githubusercontent.com:443 313 | 2017-03-09 20:00:58 INFO connecting avatars.githubusercontent.com:443 314 | 2017-03-09 20:00:58 INFO connecting gold-cdn.xitu.io:443 315 | 2017-03-09 20:00:58 INFO connecting gold-cdn.xitu.io:443 316 | 2017-03-09 20:00:58 INFO connecting gold-cdn.xitu.io:443 317 | 2017-03-09 20:00:58 INFO connecting gold-cdn.xitu.io:443 318 | 2017-03-09 20:00:58 INFO connecting gold-cdn.xitu.io:443 319 | 2017-03-09 20:00:58 INFO connecting gold-cdn.xitu.io:443 320 | 2017-03-09 20:00:58 INFO connecting pbs.twimg.com:443 321 | 2017-03-09 20:00:58 INFO connecting pbs.twimg.com:443 322 | 2017-03-09 20:00:58 INFO connecting pbs.twimg.com:443 323 | 2017-03-09 20:00:58 INFO connecting user-gold-cdn.xitu.io:443 324 | 2017-03-09 20:00:58 INFO connecting user-gold-cdn.xitu.io:443 325 | 2017-03-09 20:00:58 INFO connecting user-gold-cdn.xitu.io:443 326 | 2017-03-09 20:00:58 INFO connecting user-gold-cdn.xitu.io:443 327 | 2017-03-09 20:00:58 INFO connecting user-gold-cdn.xitu.io:443 328 | 2017-03-09 20:00:58 INFO connecting juejin.im:443 329 | 2017-03-09 20:01:08 INFO connecting user-notification-api-ms.juejin.im:443 330 | 2017-03-09 20:01:08 INFO connecting my-wallet-api-ms.juejin.im:443 331 | 2017-03-09 20:01:08 ERROR [Errno 104] Connection reset by peer 332 | 2017-03-09 20:01:08 ERROR [Errno 104] Connection reset by peer 333 | 2017-03-09 20:01:08 ERROR [Errno 104] Connection reset by peer 334 | 2017-03-09 20:01:08 ERROR [Errno 104] Connection reset by peer 335 | 2017-03-09 20:01:08 ERROR [Errno 104] Connection reset by peer 336 | 2017-03-09 20:01:08 ERROR [Errno 104] Connection reset by peer 337 | 2017-03-09 20:01:08 ERROR [Errno 104] Connection reset by peer 338 | 2017-03-09 20:01:08 INFO connecting app-router.leancloud.cn:443 339 | 2017-03-09 20:01:09 ERROR [Errno 104] Connection reset by peer 340 | 2017-03-09 20:01:09 INFO connecting ubc-api-ms.juejin.im:443 341 | 2017-03-09 20:01:10 INFO connecting stats.g.doubleclick.net:443 342 | 2017-03-09 20:01:11 INFO connecting api.leancloud.cn:443 343 | 2017-03-09 20:01:11 INFO connecting api.leancloud.cn:443 344 | 2017-03-09 20:01:11 INFO connecting api.leancloud.cn:443 345 | 2017-03-09 20:01:11 INFO connecting app-router.leancloud.cn:443 346 | 2017-03-09 20:01:11 INFO connecting avatars.githubusercontent.com:443 347 | 2017-03-09 20:01:11 INFO connecting avatars.githubusercontent.com:443 348 | 2017-03-09 20:01:11 INFO connecting avatars.githubusercontent.com:443 349 | 2017-03-09 20:01:11 INFO connecting avatars.githubusercontent.com:443 350 | 2017-03-09 20:01:11 INFO connecting pbs.twimg.com:443 351 | 2017-03-09 20:01:11 INFO connecting pbs.twimg.com:443 352 | 2017-03-09 20:01:11 INFO connecting user-gold-cdn.xitu.io:443 353 | 2017-03-09 20:01:13 INFO connecting api.leancloud.cn:443 354 | 2017-03-09 20:01:13 INFO connecting api.leancloud.cn:443 355 | 2017-03-09 20:01:14 INFO connecting api.leancloud.cn:443 356 | 2017-03-09 20:01:15 INFO connecting api.leancloud.cn:443 357 | 2017-03-09 20:01:16 INFO connecting api.leancloud.cn:443 358 | 2017-03-09 20:01:22 ERROR [Errno 104] Connection reset by peer 359 | 2017-03-09 20:01:22 ERROR [Errno 104] Connection reset by peer 360 | 2017-03-09 20:01:22 ERROR [Errno 104] Connection reset by peer 361 | 2017-03-09 20:01:22 ERROR [Errno 104] Connection reset by peer 362 | 2017-03-09 20:01:22 ERROR [Errno 104] Connection reset by peer 363 | 2017-03-09 20:01:22 ERROR [Errno 104] Connection reset by peer 364 | 2017-03-09 20:01:22 INFO connecting api.leancloud.cn:443 365 | 2017-03-09 20:01:22 INFO connecting api.leancloud.cn:443 366 | 2017-03-09 20:01:22 INFO connecting api.leancloud.cn:443 367 | 2017-03-09 20:01:22 INFO connecting api.leancloud.cn:443 368 | 2017-03-09 20:01:22 INFO connecting api.leancloud.cn:443 369 | 2017-03-09 20:01:22 INFO connecting gold-cdn.xitu.io:443 370 | 2017-03-09 20:01:22 INFO connecting gold-cdn.xitu.io:443 371 | 2017-03-09 20:01:22 INFO connecting gold-cdn.xitu.io:443 372 | 2017-03-09 20:01:22 INFO connecting my-wallet-api-ms.juejin.im:443 373 | 2017-03-09 20:01:22 INFO connecting my-wallet-api-ms.juejin.im:443 374 | 2017-03-09 20:01:22 INFO connecting my-wallet-api-ms.juejin.im:443 375 | 2017-03-09 20:01:22 INFO connecting pbs.twimg.com:443 376 | 2017-03-09 20:01:22 INFO connecting pbs.twimg.com:443 377 | 2017-03-09 20:01:22 INFO connecting ubc-api-ms.juejin.im:443 378 | 2017-03-09 20:01:22 INFO connecting ubc-api-ms.juejin.im:443 379 | 2017-03-09 20:01:22 INFO connecting ubc-api-ms.juejin.im:443 380 | 2017-03-09 20:01:22 INFO connecting user-gold-cdn.xitu.io:443 381 | 2017-03-09 20:01:22 INFO connecting user-gold-cdn.xitu.io:443 382 | 2017-03-09 20:01:22 INFO connecting user-notification-api-ms.juejin.im:443 383 | 2017-03-09 20:01:22 INFO connecting user-notification-api-ms.juejin.im:443 384 | 2017-03-09 20:01:22 INFO connecting user-notification-api-ms.juejin.im:443 385 | 2017-03-09 20:01:23 INFO connecting api.leancloud.cn:443 386 | 2017-03-09 20:01:23 INFO connecting api.leancloud.cn:443 387 | 2017-03-09 20:01:24 INFO connecting api.leancloud.cn:443 388 | 2017-03-09 20:01:27 INFO connecting api.leancloud.cn:443 389 | 2017-03-09 20:01:28 INFO connecting api.leancloud.cn:443 390 | 2017-03-09 20:01:29 INFO connecting ssl.gstatic.com:443 391 | 2017-03-09 20:01:30 INFO connecting collection-set-ms.juejin.im:443 392 | 2017-03-09 20:01:30 INFO connecting api.leancloud.cn:443 393 | 2017-03-09 20:01:33 ERROR [Errno 104] Connection reset by peer 394 | 2017-03-09 20:01:33 ERROR [Errno 104] Connection reset by peer 395 | 2017-03-09 20:01:33 INFO connecting collection-set-ms.juejin.im:443 396 | 2017-03-09 20:01:38 INFO connecting pbs.twimg.com:443 397 | 2017-03-09 20:01:38 INFO connecting pbs.twimg.com:443 398 | 2017-03-09 20:01:39 INFO connecting www.google.com.hk:443 399 | 2017-03-09 20:01:39 INFO connecting mtalk.google.com:5228 400 | 2017-03-09 20:01:40 ERROR [Errno 104] Connection reset by peer 401 | 2017-03-09 20:01:40 INFO connecting cookie.pingxx.com:443 402 | 2017-03-09 20:01:40 INFO connecting cookie.pingxx.com:443 403 | 2017-03-09 20:01:43 INFO connecting google.com.hk:443 404 | 2017-03-09 20:02:44 INFO connecting github.com:443 405 | 2017-03-09 20:02:53 INFO connecting www.inoreader.com:443 406 | 2017-03-09 20:03:13 INFO connecting clients1.google.com:443 407 | 2017-03-09 20:03:44 INFO connecting mtalk.google.com:5228 408 | 2017-03-09 20:03:52 INFO connecting 113.142.84.111:80 409 | 2017-03-09 20:05:38 INFO connecting maxiang.io:443 410 | 2017-03-09 20:05:41 INFO connecting maxiang.io:443 411 | 2017-03-09 20:05:49 INFO connecting mtalk.google.com:5228 412 | 2017-03-09 20:05:56 INFO connecting 222.24.19.190:8080 413 | 2017-03-09 20:06:17 INFO connecting www.google.com.hk:443 414 | 2017-03-09 20:06:28 INFO connecting clients4.google.com:443 415 | 2017-03-09 20:07:05 INFO connecting 115.29.201.173:80 416 | 2017-03-09 20:07:44 INFO connecting github.com:443 417 | 2017-03-09 20:07:53 INFO connecting www.inoreader.com:443 418 | 2017-03-09 20:07:54 INFO connecting mtalk.google.com:5228 419 | 2017-03-09 20:07:59 INFO connecting api.xitu.io:80 420 | 2017-03-09 20:07:59 INFO connecting api.xitu.io:80 421 | 2017-03-09 20:07:59 INFO connecting api.xitu.io:80 422 | 2017-03-09 20:08:00 INFO connecting www.google.com:443 423 | 2017-03-09 20:08:00 INFO connecting www.gstatic.com:443 424 | 2017-03-09 20:08:00 INFO connecting images.unsplash.com:443 425 | 2017-03-09 20:08:00 INFO connecting images.unsplash.com:443 426 | 2017-03-09 20:08:00 INFO connecting images.unsplash.com:443 427 | 2017-03-09 20:08:00 INFO connecting images.unsplash.com:443 428 | 2017-03-09 20:08:00 INFO connecting images.unsplash.com:443 429 | 2017-03-09 20:08:00 INFO connecting images.unsplash.com:443 430 | 2017-03-09 20:08:00 INFO connecting stats.g.doubleclick.net:443 431 | 2017-03-09 20:08:09 INFO connecting pbs.twimg.com:443 432 | 2017-03-09 20:08:09 INFO connecting pbs.twimg.com:443 433 | 2017-03-09 20:08:12 ERROR [Errno 104] Connection reset by peer 434 | 2017-03-09 20:08:12 ERROR [Errno 104] Connection reset by peer 435 | 2017-03-09 20:08:12 INFO connecting cookie.pingxx.com:443 436 | 2017-03-09 20:08:12 INFO connecting cookie.pingxx.com:443 437 | 2017-03-09 20:08:30 ERROR [Errno 104] Connection reset by peer 438 | 2017-03-09 20:08:30 ERROR [Errno 104] Connection reset by peer 439 | 2017-03-09 20:08:30 ERROR [Errno 104] Connection reset by peer 440 | 2017-03-09 20:08:33 INFO connecting mtalk.google.com:5228 441 | 2017-03-09 21:17:10 ERROR poll:[Errno 4] Interrupted system call 442 | Traceback (most recent call last): 443 | File "/usr/lib/python2.7/dist-packages/shadowsocks/eventloop.py", line 198, in run 444 | events = self.poll(1) 445 | File "/usr/lib/python2.7/dist-packages/shadowsocks/eventloop.py", line 175, in poll 446 | events = self._impl.poll(timeout) 447 | File "/usr/lib/python2.7/dist-packages/shadowsocks/eventloop.py", line 63, in poll 448 | return self._epoll.poll(timeout) 449 | IOError: [Errno 4] Interrupted system call 450 | 2017-03-09 21:17:11 WARNING timed out 451 | 2017-03-09 21:17:16 INFO connecting clients4.google.com:443 452 | 2017-03-09 21:17:16 INFO connecting mtalk.google.com:443 453 | 2017-03-09 21:17:16 INFO connecting github.com:443 454 | 2017-03-09 21:17:16 INFO connecting www.google.com:443 455 | 2017-03-09 21:17:16 INFO connecting clients4.google.com:443 456 | 2017-03-09 21:17:16 INFO connecting github.com:443 457 | 2017-03-09 21:17:16 INFO connecting www.google.com:443 458 | 2017-03-09 21:17:31 INFO connecting www.google.com.hk:443 459 | 2017-03-09 21:17:31 INFO connecting www.google.com.hk:443 460 | 2017-03-09 21:17:31 INFO connecting beacons.gvt2.com:443 461 | 2017-03-09 21:17:31 INFO connecting beacons.gvt2.com:443 462 | 2017-03-09 21:17:31 INFO connecting beacons2.gvt2.com:443 463 | 2017-03-09 21:17:31 INFO connecting beacons2.gvt2.com:443 464 | 2017-03-09 21:17:31 INFO connecting beacons3.gvt2.com:443 465 | 2017-03-09 21:17:31 INFO connecting beacons3.gvt2.com:443 466 | 2017-03-09 21:17:31 INFO connecting beacons4.gvt2.com:443 467 | 2017-03-09 21:17:31 INFO connecting beacons4.gvt2.com:443 468 | 2017-03-09 21:17:31 INFO connecting beacons5.gvt2.com:443 469 | 2017-03-09 21:17:31 INFO connecting beacons5.gvt2.com:443 470 | 2017-03-09 21:17:31 INFO connecting beacons5.gvt3.com:443 471 | 2017-03-09 21:17:31 INFO connecting beacons5.gvt3.com:443 472 | 2017-03-09 21:17:31 INFO connecting clients2.google.com:443 473 | 2017-03-09 21:17:31 INFO connecting clients2.google.com:443 474 | 2017-03-09 21:18:00 INFO connecting www.googleapis.com:443 475 | 2017-03-09 21:18:00 INFO connecting mtalk.google.com:5228 476 | 2017-03-09 21:18:00 INFO connecting www.googleapis.com:443 477 | 2017-03-09 21:18:02 INFO connecting mtalk.google.com:443 478 | 2017-03-09 21:18:02 INFO connecting www.google.com:443 479 | 2017-03-09 21:18:02 INFO connecting www.google.com:443 480 | 2017-03-09 21:18:17 INFO connecting beacons.gvt2.com:443 481 | 2017-03-09 21:18:17 INFO connecting google.com:443 482 | 2017-03-09 21:18:17 INFO connecting beacons.gvt2.com:443 483 | 2017-03-09 21:18:17 INFO connecting google.com:443 484 | 2017-03-09 21:18:17 INFO connecting beacons2.gvt2.com:443 485 | 2017-03-09 21:18:17 INFO connecting beacons2.gvt2.com:443 486 | 2017-03-09 21:18:17 INFO connecting beacons.gvt2.com:443 487 | 2017-03-09 21:18:17 INFO connecting beacons.gvt2.com:443 488 | 2017-03-09 21:18:17 INFO connecting beacons3.gvt2.com:443 489 | 2017-03-09 21:18:17 INFO connecting beacons3.gvt2.com:443 490 | 2017-03-09 21:18:17 INFO connecting beacons2.gvt2.com:443 491 | 2017-03-09 21:18:17 INFO connecting beacons2.gvt2.com:443 492 | 2017-03-09 21:18:17 INFO connecting beacons4.gvt2.com:443 493 | 2017-03-09 21:18:17 INFO connecting beacons4.gvt2.com:443 494 | 2017-03-09 21:18:17 INFO connecting beacons3.gvt2.com:443 495 | 2017-03-09 21:18:17 INFO connecting beacons3.gvt2.com:443 496 | 2017-03-09 21:18:17 INFO connecting beacons5.gvt2.com:443 497 | 2017-03-09 21:18:17 INFO connecting beacons5.gvt2.com:443 498 | 2017-03-09 21:18:17 INFO connecting beacons4.gvt2.com:443 499 | 2017-03-09 21:18:17 INFO connecting beacons4.gvt2.com:443 500 | 2017-03-09 21:18:17 INFO connecting beacons5.gvt3.com:443 501 | 2017-03-09 21:18:17 INFO connecting beacons5.gvt3.com:443 502 | 2017-03-09 21:18:17 INFO connecting beacons5.gvt2.com:443 503 | 2017-03-09 21:18:17 INFO connecting beacons5.gvt2.com:443 504 | 2017-03-09 21:18:17 INFO connecting clients2.google.com:443 505 | 2017-03-09 21:18:17 INFO connecting clients2.google.com:443 506 | 2017-03-09 21:18:17 INFO connecting beacons5.gvt3.com:443 507 | 2017-03-09 21:18:17 INFO connecting beacons5.gvt3.com:443 508 | 2017-03-09 21:18:41 INFO connecting clients2.google.com:443 509 | 2017-03-09 21:18:41 INFO connecting www.google.com.hk:443 510 | 2017-03-09 21:18:41 INFO connecting clients2.google.com:443 511 | 2017-03-09 21:18:41 INFO connecting www.google.com.hk:443 512 | 2017-03-09 21:18:46 INFO connecting www.googleapis.com:443 513 | 2017-03-09 21:18:46 INFO connecting mtalk.google.com:5228 514 | 2017-03-09 21:18:46 INFO connecting www.googleapis.com:443 515 | 2017-03-09 21:18:46 INFO connecting beacons5.gvt2.com:443 516 | 2017-03-09 21:18:46 INFO connecting beacons5.gvt2.com:443 517 | 2017-03-09 21:18:48 INFO connecting clients4.google.com:443 518 | 2017-03-09 21:18:48 INFO connecting www.google.com:443 519 | 2017-03-09 21:18:48 INFO connecting mtalk.google.com:443 520 | 2017-03-09 21:18:48 INFO connecting clients4.google.com:443 521 | 2017-03-09 21:18:48 INFO connecting www.google.com:443 522 | 2017-03-09 21:18:48 INFO connecting beacons5.gvt3.com:443 523 | 2017-03-09 21:18:48 INFO connecting beacons5.gvt3.com:443 524 | 2017-03-09 21:18:58 INFO connecting clients2.google.com:443 525 | 2017-03-09 21:18:58 INFO connecting clients2.google.com:443 526 | 2017-03-09 21:19:15 INFO connecting clients1.google.com:443 527 | 2017-03-09 21:19:15 INFO connecting clients1.google.com:443 528 | 2017-03-09 21:19:15 INFO connecting beacons.gvt2.com:443 529 | 2017-03-09 21:19:15 INFO connecting beacons.gvt2.com:443 530 | 2017-03-09 21:19:16 INFO connecting clients1.google.com:443 531 | 2017-03-09 21:19:16 INFO connecting clients1.google.com:443 532 | 2017-03-09 21:19:16 INFO connecting beacons2.gvt2.com:443 533 | 2017-03-09 21:19:16 INFO connecting beacons2.gvt2.com:443 534 | 2017-03-09 21:19:18 INFO connecting clients1.google.com:443 535 | 2017-03-09 21:19:18 INFO connecting clients1.google.com:443 536 | 2017-03-09 21:19:18 INFO connecting beacons3.gvt2.com:443 537 | 2017-03-09 21:19:18 INFO connecting beacons3.gvt2.com:443 538 | 2017-03-09 21:19:21 INFO connecting clients1.google.com:443 539 | 2017-03-09 21:19:21 INFO connecting clients1.google.com:443 540 | 2017-03-09 21:19:21 INFO connecting beacons4.gvt2.com:443 541 | 2017-03-09 21:19:21 INFO connecting beacons4.gvt2.com:443 542 | 2017-03-09 21:19:28 INFO connecting clients1.google.com:443 543 | 2017-03-09 21:19:28 INFO connecting clients1.google.com:443 544 | 2017-03-09 21:19:28 INFO connecting beacons3.gvt2.com:443 545 | 2017-03-09 21:19:28 INFO connecting beacons5.gvt2.com:443 546 | 2017-03-09 21:19:28 INFO connecting beacons3.gvt2.com:443 547 | 2017-03-09 21:19:28 INFO connecting beacons5.gvt2.com:443 548 | 2017-03-09 21:19:28 INFO connecting beacons4.gvt2.com:443 549 | 2017-03-09 21:19:28 INFO connecting beacons4.gvt2.com:443 550 | 2017-03-09 21:19:28 INFO connecting beacons5.gvt3.com:443 551 | 2017-03-09 21:19:28 INFO connecting beacons5.gvt3.com:443 552 | 2017-03-09 21:19:32 INFO connecting www.googleapis.com:443 553 | 2017-03-09 21:19:32 INFO connecting mtalk.google.com:5228 554 | 2017-03-09 21:19:32 INFO connecting www.googleapis.com:443 555 | 2017-03-09 21:19:32 INFO connecting clients2.google.com:443 556 | 2017-03-09 21:19:32 INFO connecting clients2.google.com:443 557 | 2017-03-09 21:19:35 INFO connecting www.google.com:443 558 | 2017-03-09 21:19:35 INFO connecting mtalk.google.com:443 559 | 2017-03-09 21:19:35 INFO connecting www.google.com:443 560 | 2017-03-09 21:19:39 INFO connecting clients2.google.com:443 561 | 2017-03-09 21:19:39 INFO connecting clients2.google.com:443 562 | 2017-03-09 21:19:43 INFO connecting clients1.google.com:443 563 | 2017-03-09 21:19:43 INFO connecting clients1.google.com:443 564 | 2017-03-09 21:20:06 INFO connecting clients1.google.com:443 565 | 2017-03-09 21:20:06 INFO connecting clients1.google.com:443 566 | 2017-03-09 21:20:20 INFO connecting mtalk.google.com:5228 567 | 2017-03-09 21:20:20 INFO connecting www.google.com:443 568 | 2017-03-09 21:20:20 INFO connecting www.googleapis.com:443 569 | 2017-03-09 21:20:21 INFO connecting 211.137.133.5:80 570 | 2017-03-09 21:20:21 INFO connecting beacons3.gvt2.com:443 571 | 2017-03-09 21:20:21 INFO connecting clients4.google.com:443 572 | 2017-03-09 21:20:36 INFO connecting clients1.google.com:443 573 | 2017-03-09 21:20:38 INFO connecting api.xitu.io:80 574 | 2017-03-09 21:20:38 INFO connecting api.xitu.io:80 575 | 2017-03-09 21:20:38 INFO connecting api.xitu.io:80 576 | 2017-03-09 21:20:38 INFO connecting www.google.com.hk:443 577 | 2017-03-09 21:20:38 INFO connecting www.gstatic.com:443 578 | 2017-03-09 21:20:38 INFO connecting images.unsplash.com:443 579 | 2017-03-09 21:20:38 INFO connecting images.unsplash.com:443 580 | 2017-03-09 21:20:38 INFO connecting images.unsplash.com:443 581 | 2017-03-09 21:20:38 INFO connecting images.unsplash.com:443 582 | 2017-03-09 21:20:38 INFO connecting images.unsplash.com:443 583 | 2017-03-09 21:20:38 INFO connecting images.unsplash.com:443 584 | 2017-03-09 21:20:38 INFO connecting www.google.com.hk:443 585 | 2017-03-09 21:20:38 INFO connecting www.google.com.hk:443 586 | 2017-03-09 21:20:39 INFO connecting www.google.com.hk:443 587 | 2017-03-09 21:20:39 INFO connecting www.google.com.hk:443 588 | 2017-03-09 21:20:39 INFO connecting www.google.com.hk:443 589 | 2017-03-09 21:20:40 INFO connecting www.acfun.tv:80 590 | 2017-03-09 21:20:40 INFO connecting www.acfun.tv:80 591 | 2017-03-09 21:20:42 INFO connecting clients4.google.com:443 592 | 2017-03-09 21:20:50 INFO connecting www.google.com.hk:443 593 | 2017-03-09 21:20:51 INFO connecting beacons4.gvt2.com:443 594 | 2017-03-09 21:21:20 INFO connecting mtalk.google.com:5228 595 | 2017-03-09 21:21:32 INFO connecting clients4.google.com:443 596 | 2017-03-09 21:21:32 INFO connecting mtalk.google.com:443 597 | 2017-03-09 21:21:32 INFO connecting clients4.google.com:443 598 | 2017-03-09 21:21:32 INFO connecting clients2.google.com:443 599 | 2017-03-09 21:21:32 INFO connecting clients2.google.com:443 600 | 2017-03-09 21:21:32 INFO connecting clients4.google.com:443 601 | 2017-03-09 21:21:32 INFO connecting clients2.google.com:443 602 | 2017-03-09 21:21:32 INFO connecting clients4.google.com:443 603 | 2017-03-09 21:21:32 INFO connecting clients2.google.com:443 604 | 2017-03-09 21:21:34 INFO connecting clients4.google.com:443 605 | 2017-03-09 21:21:34 INFO connecting clients4.google.com:443 606 | 2017-03-09 21:21:34 INFO connecting mtalk.google.com:5228 607 | 2017-03-09 21:21:34 INFO connecting www.google.com:443 608 | 2017-03-09 21:21:34 INFO connecting clients4.google.com:443 609 | 2017-03-09 21:21:34 INFO connecting clients4.google.com:443 610 | 2017-03-09 21:21:34 INFO connecting www.google.com:443 611 | 2017-03-09 21:21:36 INFO connecting clients1.google.com:443 612 | 2017-03-09 21:21:36 INFO connecting clients1.google.com:443 613 | 2017-03-09 21:21:41 INFO connecting clients2.google.com:443 614 | 2017-03-09 21:21:41 INFO connecting clients2.google.com:443 615 | 2017-03-09 21:22:06 INFO connecting clients1.google.com:443 616 | 2017-03-09 21:22:06 INFO connecting clients1.google.com:443 617 | 2017-03-09 21:22:15 INFO connecting google.com:443 618 | 2017-03-09 21:22:15 INFO connecting google.com:443 619 | 2017-03-09 21:22:15 INFO connecting clients2.google.com:443 620 | 2017-03-09 21:22:15 INFO connecting clients2.google.com:443 621 | 2017-03-09 21:22:21 INFO connecting mtalk.google.com:443 622 | 2017-03-09 21:22:21 INFO connecting www.google.com:443 623 | 2017-03-09 21:22:21 INFO connecting clients4.google.com:443 624 | 2017-03-09 21:22:21 INFO connecting www.google.com:443 625 | 2017-03-09 21:22:21 INFO connecting clients4.google.com:443 626 | 2017-03-09 21:22:21 INFO connecting clients4.google.com:443 627 | 2017-03-09 21:22:21 INFO connecting clients4.google.com:443 628 | 2017-03-09 21:22:24 INFO connecting clients4.google.com:443 629 | 2017-03-09 21:22:24 INFO connecting www.google.com:443 630 | 2017-03-09 21:22:24 INFO connecting mtalk.google.com:5228 631 | 2017-03-09 21:22:24 INFO connecting clients4.google.com:443 632 | 2017-03-09 21:22:24 INFO connecting www.google.com:443 633 | 2017-03-09 21:22:36 INFO connecting clients1.google.com:443 634 | 2017-03-09 21:22:36 INFO connecting clients1.google.com:443 635 | 2017-03-09 21:22:41 INFO connecting clients4.google.com:443 636 | 2017-03-09 21:22:41 INFO connecting mtalk.google.com:443 637 | 2017-03-09 21:22:41 INFO connecting www.google.com:443 638 | 2017-03-09 21:22:41 INFO connecting clients4.google.com:443 639 | 2017-03-09 21:22:41 INFO connecting www.google.com:443 640 | 2017-03-09 21:22:41 INFO connecting clients4.google.com:443 641 | 2017-03-09 21:22:41 INFO connecting clients4.google.com:443 642 | 2017-03-09 21:22:41 INFO connecting clients4.google.com:443 643 | 2017-03-09 21:22:41 INFO connecting clients4.google.com:443 644 | 2017-03-09 21:22:45 ERROR [Errno 22] Invalid argument 645 | 2017-03-09 21:22:45 ERROR [Errno 22] Invalid argument 646 | 2017-03-09 21:22:45 ERROR [Errno 22] Invalid argument 647 | 2017-03-09 21:22:49 INFO connecting mtalk.google.com:5228 648 | 2017-03-09 21:22:49 INFO connecting www.google.com:443 649 | 2017-03-09 21:22:49 INFO connecting clients4.google.com:443 650 | 2017-03-09 21:23:06 INFO connecting clients1.google.com:443 651 | 2017-03-09 21:23:23 INFO connecting clients5.google.com:443 652 | 2017-03-09 21:23:23 INFO connecting notifications.google.com:443 653 | 2017-03-09 21:24:23 ERROR [Errno 104] Connection reset by peer 654 | 2017-03-09 21:24:23 ERROR [Errno 104] Connection reset by peer 655 | 2017-03-09 21:24:23 INFO connecting clients5.google.com:443 656 | 2017-03-09 21:24:23 INFO connecting notifications.google.com:443 657 | 2017-03-09 21:24:26 INFO connecting ogs.google.com:443 658 | 2017-03-09 21:26:32 INFO connecting www.google.com:443 659 | 2017-03-09 21:26:32 INFO connecting www.google.com:443 660 | 2017-03-09 21:26:32 INFO connecting www.google.com:443 661 | 2017-03-09 21:26:32 INFO connecting www.google.com:443 662 | 2017-03-09 21:26:32 INFO connecting www.google.com:443 663 | 2017-03-09 21:26:35 INFO connecting www.google.com:443 664 | 2017-03-09 21:26:37 INFO connecting clients5.google.com:443 665 | 2017-03-09 21:26:41 INFO connecting clients1.google.com:443 666 | 2017-03-09 21:31:01 INFO connecting clients4.google.com:443 667 | 2017-03-09 21:31:28 INFO connecting clients4.google.com:443 668 | 2017-03-09 21:32:04 INFO connecting mtalk.google.com:5228 669 | 2017-03-09 21:32:15 INFO connecting www.google.com:443 670 | 2017-03-09 21:34:10 INFO connecting mtalk.google.com:5228 671 | 2017-03-09 21:36:14 INFO connecting mtalk.google.com:5228 672 | 2017-03-09 21:38:19 INFO connecting mtalk.google.com:5228 673 | 2017-03-09 21:38:45 INFO connecting www.google.com:443 674 | 2017-03-09 21:38:45 INFO connecting www.google.com:443 675 | 2017-03-09 21:38:45 INFO connecting www.google.com:443 676 | 2017-03-09 21:38:48 INFO connecting clients5.google.com:443 677 | 2017-03-09 21:38:49 INFO connecting ogs.google.com:443 678 | 2017-03-09 21:38:53 INFO connecting notifications.google.com:443 679 | 2017-03-09 21:38:55 INFO connecting id.google.com:443 680 | 2017-03-09 21:38:55 INFO connecting play.google.com:443 681 | 2017-03-09 21:38:55 INFO connecting apis.google.com:443 682 | 2017-03-09 21:39:04 ERROR [Errno 104] Connection reset by peer 683 | 2017-03-09 21:39:04 ERROR [Errno 104] Connection reset by peer 684 | 2017-03-09 21:39:04 ERROR [Errno 104] Connection reset by peer 685 | 2017-03-09 21:39:04 INFO connecting clients4.google.com:443 686 | 2017-03-09 21:40:25 INFO connecting mtalk.google.com:5228 687 | 2017-03-09 21:42:12 INFO connecting www.google.com:443 688 | 2017-03-09 21:42:25 INFO connecting clients4.google.com:443 689 | 2017-03-09 21:42:30 INFO connecting mtalk.google.com:5228 690 | 2017-03-09 21:43:56 INFO connecting play.google.com:443 691 | 2017-03-09 21:43:57 INFO connecting notifications.google.com:443 692 | 2017-03-09 21:44:35 INFO connecting mtalk.google.com:5228 693 | 2017-03-09 21:46:40 INFO connecting mtalk.google.com:5228 694 | 2017-03-09 21:47:06 INFO connecting clients4.google.com:443 695 | 2017-03-09 21:48:45 INFO connecting mtalk.google.com:5228 696 | 2017-03-09 21:50:50 INFO connecting mtalk.google.com:5228 697 | 2017-03-09 21:52:55 INFO connecting mtalk.google.com:5228 698 | 2017-03-09 21:54:12 INFO connecting www.google.com:443 699 | 2017-03-09 21:54:14 INFO connecting clients1.google.com:443 700 | 2017-03-09 21:54:18 INFO connecting clients4.google.com:443 701 | 2017-03-09 21:54:26 INFO connecting clients4.google.com:443 702 | 2017-03-09 21:55:00 INFO connecting mtalk.google.com:5228 703 | 2017-03-09 21:57:05 INFO connecting mtalk.google.com:5228 704 | 2017-03-09 21:57:09 INFO connecting clients1.google.com:443 705 | 2017-03-09 21:57:39 INFO connecting www.google.com:443 706 | 2017-03-09 21:57:39 INFO connecting www.google.com:443 707 | 2017-03-09 21:57:39 INFO connecting www.google.com:443 708 | 2017-03-09 21:57:39 INFO connecting www.google.com:443 709 | 2017-03-09 21:57:39 INFO connecting www.google.com:443 710 | 2017-03-09 21:57:39 INFO connecting www.google.com:443 711 | 2017-03-09 21:57:46 INFO connecting clients5.google.com:443 712 | 2017-03-09 21:57:47 INFO connecting ogs.google.com:443 713 | 2017-03-09 21:58:48 ERROR [Errno 104] Connection reset by peer 714 | 2017-03-09 21:58:48 ERROR [Errno 104] Connection reset by peer 715 | 2017-03-09 21:58:48 ERROR [Errno 104] Connection reset by peer 716 | 2017-03-09 21:58:48 ERROR [Errno 104] Connection reset by peer 717 | 2017-03-09 21:58:48 ERROR [Errno 104] Connection reset by peer 718 | 2017-03-09 21:58:48 ERROR [Errno 104] Connection reset by peer 719 | 2017-03-09 21:58:48 INFO connecting google.com:443 720 | 2017-03-09 21:59:10 INFO connecting mtalk.google.com:5228 721 | 2017-03-09 22:01:00 INFO connecting notifications.google.com:443 722 | 2017-03-09 22:01:15 INFO connecting mtalk.google.com:5228 723 | 2017-03-09 22:03:21 INFO connecting mtalk.google.com:5228 724 | 2017-03-09 22:03:37 INFO connecting clients4.google.com:443 725 | 2017-03-09 22:05:26 INFO connecting mtalk.google.com:5228 726 | 2017-03-09 22:07:31 INFO connecting mtalk.google.com:5228 727 | 2017-03-09 22:09:36 INFO connecting mtalk.google.com:5228 728 | 2017-03-09 22:11:41 INFO connecting mtalk.google.com:5228 729 | 2017-03-09 22:12:05 INFO connecting clients4.google.com:443 730 | 2017-03-09 22:13:46 INFO connecting mtalk.google.com:5228 731 | 2017-03-09 22:13:57 INFO connecting play.google.com:443 732 | 2017-03-09 22:15:46 INFO connecting www.google.com:443 733 | 2017-03-09 22:15:46 INFO connecting www.google.com:443 734 | 2017-03-09 22:15:46 INFO connecting www.google.com:443 735 | 2017-03-09 22:15:46 INFO connecting www.google.com:443 736 | 2017-03-09 22:15:46 INFO connecting www.google.com:443 737 | 2017-03-09 22:15:49 INFO connecting clients5.google.com:443 738 | 2017-03-09 22:15:50 INFO connecting ogs.google.com:443 739 | 2017-03-09 22:15:51 INFO connecting mtalk.google.com:5228 740 | 2017-03-09 22:15:55 INFO connecting notifications.google.com:443 741 | 2017-03-09 22:15:55 INFO connecting apis.google.com:443 742 | 2017-03-09 22:15:55 INFO connecting play.google.com:443 743 | 2017-03-09 22:16:05 ERROR [Errno 104] Connection reset by peer 744 | 2017-03-09 22:16:05 ERROR [Errno 104] Connection reset by peer 745 | 2017-03-09 22:16:05 ERROR [Errno 104] Connection reset by peer 746 | 2017-03-09 22:16:05 ERROR [Errno 104] Connection reset by peer 747 | 2017-03-09 22:16:05 ERROR [Errno 104] Connection reset by peer 748 | 2017-03-09 22:16:05 INFO connecting id.google.com:443 749 | 2017-03-09 22:16:13 ERROR [Errno 104] Connection reset by peer 750 | 2017-03-09 22:16:13 ERROR [Errno 104] Connection reset by peer 751 | 2017-03-09 22:16:13 INFO connecting notifications.google.com:443 752 | 2017-03-09 22:16:14 INFO connecting clients4.google.com:443 753 | 2017-03-09 22:17:17 ERROR [Errno 104] Connection reset by peer 754 | 2017-03-09 22:17:17 INFO connecting google.com:443 755 | 2017-03-09 22:17:56 INFO connecting mtalk.google.com:5228 756 | 2017-03-09 22:20:01 INFO connecting mtalk.google.com:5228 757 | 2017-03-09 22:20:23 INFO connecting clients2.google.com:443 758 | 2017-03-09 22:20:57 INFO connecting play.google.com:443 759 | 2017-03-09 22:21:01 INFO connecting notifications.google.com:443 760 | 2017-03-09 22:22:05 INFO connecting google.com:443 761 | 2017-03-09 22:22:07 INFO connecting mtalk.google.com:5228 762 | 2017-03-09 22:22:29 INFO connecting www.google.com:443 763 | 2017-03-09 22:22:29 INFO connecting www.google.com:443 764 | 2017-03-09 22:22:30 INFO connecting www.google.com:443 765 | 2017-03-09 22:22:32 INFO connecting clients5.google.com:443 766 | 2017-03-09 22:22:33 INFO connecting ogs.google.com:443 767 | 2017-03-09 22:22:38 INFO connecting apis.google.com:443 768 | 2017-03-09 22:22:38 INFO connecting play.google.com:443 769 | 2017-03-09 22:22:49 ERROR [Errno 104] Connection reset by peer 770 | 2017-03-09 22:22:49 ERROR [Errno 104] Connection reset by peer 771 | 2017-03-09 22:22:49 ERROR [Errno 104] Connection reset by peer 772 | 2017-03-09 22:22:49 ERROR [Errno 104] Connection reset by peer 773 | 2017-03-09 22:22:49 ERROR [Errno 104] Connection reset by peer 774 | 2017-03-09 22:22:49 INFO connecting clients4.google.com:443 775 | 2017-03-09 22:23:38 INFO connecting clients5.google.com:443 776 | 2017-03-09 22:23:43 INFO connecting apis.google.com:443 777 | 2017-03-09 22:23:43 INFO connecting play.google.com:443 778 | 2017-03-09 22:24:12 INFO connecting mtalk.google.com:5228 779 | 2017-03-09 22:26:17 INFO connecting mtalk.google.com:5228 780 | 2017-03-09 22:28:22 INFO connecting mtalk.google.com:5228 781 | 2017-03-09 22:28:46 INFO connecting play.google.com:443 782 | 2017-03-09 22:28:46 INFO connecting notifications.google.com:443 783 | 2017-03-09 22:30:13 INFO connecting www.google.com:443 784 | 2017-03-09 22:30:25 INFO connecting clients4.google.com:443 785 | 2017-03-09 22:30:27 INFO connecting mtalk.google.com:5228 786 | 2017-03-09 22:30:34 INFO connecting clients1.google.com:443 787 | 2017-03-09 22:30:55 INFO connecting clients4.google.com:443 788 | 2017-03-09 22:31:05 ERROR [Errno 104] Connection reset by peer 789 | 2017-03-09 22:31:05 INFO connecting clients4.google.com:443 790 | 2017-03-09 22:31:12 INFO connecting notifications.google.com:443 791 | 2017-03-09 22:31:23 INFO connecting www.google.com:443 792 | 2017-03-09 22:31:23 INFO connecting www.google.com:443 793 | 2017-03-09 22:31:23 INFO connecting www.google.com:443 794 | 2017-03-09 22:31:23 INFO connecting www.google.com:443 795 | 2017-03-09 22:31:23 INFO connecting www.google.com:443 796 | 2017-03-09 22:31:23 INFO connecting www.google.com:443 797 | 2017-03-09 22:31:33 INFO connecting www.google.com:443 798 | 2017-03-09 22:31:33 INFO connecting www.google.com:443 799 | 2017-03-09 22:31:33 INFO connecting www.google.com:443 800 | 2017-03-09 22:31:33 INFO connecting www.google.com:443 801 | 2017-03-09 22:31:33 INFO connecting www.google.com:443 802 | 2017-03-09 22:31:33 INFO connecting www.google.com:443 803 | 2017-03-09 22:31:33 INFO connecting www.google.com:443 804 | 2017-03-09 22:31:33 INFO connecting www.google.com:443 805 | 2017-03-09 22:31:33 INFO connecting www.google.com:443 806 | 2017-03-09 22:31:33 INFO connecting www.google.com:443 807 | 2017-03-09 22:31:33 INFO connecting www.google.com:443 808 | 2017-03-09 22:32:30 ERROR [Errno 104] Connection reset by peer 809 | 2017-03-09 22:32:30 ERROR [Errno 104] Connection reset by peer 810 | 2017-03-09 22:32:30 ERROR [Errno 104] Connection reset by peer 811 | 2017-03-09 22:32:30 ERROR [Errno 104] Connection reset by peer 812 | 2017-03-09 22:32:30 ERROR [Errno 104] Connection reset by peer 813 | 2017-03-09 22:32:30 ERROR [Errno 104] Connection reset by peer 814 | 2017-03-09 22:32:30 ERROR [Errno 104] Connection reset by peer 815 | 2017-03-09 22:32:30 ERROR [Errno 104] Connection reset by peer 816 | 2017-03-09 22:32:30 ERROR [Errno 104] Connection reset by peer 817 | 2017-03-09 22:32:30 ERROR [Errno 104] Connection reset by peer 818 | 2017-03-09 22:32:30 INFO connecting clients4.google.com:443 819 | 2017-03-09 22:32:32 INFO connecting mtalk.google.com:5228 820 | 2017-03-09 22:34:09 INFO connecting clients5.google.com:443 821 | 2017-03-09 22:34:12 INFO connecting ogs.google.com:443 822 | 2017-03-09 22:34:17 INFO connecting notifications.google.com:443 823 | 2017-03-09 22:34:17 INFO connecting play.google.com:443 824 | 2017-03-09 22:34:17 INFO connecting apis.google.com:443 825 | 2017-03-09 22:34:18 INFO connecting play.google.com:443 826 | 2017-03-09 22:34:37 INFO connecting mtalk.google.com:5228 827 | 2017-03-09 22:35:30 ERROR [Errno 104] Connection reset by peer 828 | 2017-03-09 22:35:30 ERROR [Errno 104] Connection reset by peer 829 | 2017-03-09 22:35:30 ERROR [Errno 104] Connection reset by peer 830 | 2017-03-09 22:35:30 ERROR [Errno 104] Connection reset by peer 831 | 2017-03-09 22:35:30 INFO connecting clients4.google.com:443 832 | 2017-03-09 22:36:42 INFO connecting mtalk.google.com:5228 833 | 2017-03-09 22:37:31 INFO connecting www.google.com:443 834 | 2017-03-09 22:37:36 INFO connecting ogs.google.com:443 835 | 2017-03-09 22:37:41 INFO connecting notifications.google.com:443 836 | 2017-03-09 22:37:41 INFO connecting play.google.com:443 837 | 2017-03-09 22:37:41 INFO connecting apis.google.com:443 838 | 2017-03-09 22:37:42 INFO connecting play.google.com:443 839 | 2017-03-09 22:37:52 ERROR [Errno 104] Connection reset by peer 840 | 2017-03-09 22:37:52 ERROR [Errno 104] Connection reset by peer 841 | 2017-03-09 22:37:52 ERROR [Errno 104] Connection reset by peer 842 | 2017-03-09 22:37:52 INFO connecting clients1.google.com:443 843 | 2017-03-09 22:37:56 INFO connecting clients4.google.com:443 844 | 2017-03-09 22:38:48 INFO connecting mtalk.google.com:5228 845 | 2017-03-09 22:39:19 INFO connecting notifications.google.com:443 846 | 2017-03-09 22:39:57 INFO connecting www.google.com:443 847 | 2017-03-09 22:39:57 INFO connecting www.google.com:443 848 | 2017-03-09 22:40:33 ERROR [Errno 104] Connection reset by peer 849 | 2017-03-09 22:40:33 INFO connecting apis.google.com:443 850 | 2017-03-09 22:40:33 INFO connecting clients5.google.com:443 851 | 2017-03-09 22:40:36 INFO connecting ogs.google.com:443 852 | 2017-03-09 22:40:41 INFO connecting play.google.com:443 853 | 2017-03-09 22:40:46 ERROR [Errno 104] Connection reset by peer 854 | 2017-03-09 22:40:46 INFO connecting apis.google.com:443 855 | 2017-03-09 22:40:53 INFO connecting mtalk.google.com:5228 856 | 2017-03-09 22:41:54 ERROR [Errno 104] Connection reset by peer 857 | 2017-03-09 22:41:54 ERROR [Errno 104] Connection reset by peer 858 | 2017-03-09 22:41:54 INFO connecting google.com:443 859 | 2017-03-09 22:42:58 INFO connecting mtalk.google.com:5228 860 | 2017-03-09 22:43:25 INFO connecting www.google.com:443 861 | 2017-03-09 22:43:36 INFO connecting clients4.google.com:443 862 | 2017-03-09 22:43:53 INFO connecting clients5.google.com:443 863 | 2017-03-09 22:43:54 INFO connecting ogs.google.com:443 864 | 2017-03-09 22:43:59 INFO connecting apis.google.com:443 865 | 2017-03-09 22:43:59 INFO connecting notifications.google.com:443 866 | 2017-03-09 22:43:59 INFO connecting play.google.com:443 867 | 2017-03-09 22:44:01 INFO connecting play.google.com:443 868 | 2017-03-09 22:45:03 INFO connecting mtalk.google.com:5228 869 | 2017-03-09 22:45:43 ERROR [Errno 104] Connection reset by peer 870 | 2017-03-09 22:45:43 ERROR [Errno 104] Connection reset by peer 871 | 2017-03-09 22:45:43 ERROR [Errno 104] Connection reset by peer 872 | 2017-03-09 22:45:43 ERROR [Errno 104] Connection reset by peer 873 | 2017-03-09 22:45:43 INFO connecting clients1.google.com:443 874 | 2017-03-09 22:47:09 INFO connecting mtalk.google.com:5228 875 | 2017-03-09 22:49:14 INFO connecting mtalk.google.com:5228 876 | 2017-03-09 22:51:19 INFO connecting mtalk.google.com:5228 877 | 2017-03-09 22:53:25 INFO connecting mtalk.google.com:5228 878 | 2017-03-09 22:54:45 INFO connecting clients4.google.com:443 879 | 2017-03-09 22:55:30 INFO connecting mtalk.google.com:5228 880 | 2017-03-09 22:57:35 INFO connecting mtalk.google.com:5228 881 | 2017-03-09 22:59:40 INFO connecting mtalk.google.com:5228 882 | 2017-03-09 23:01:45 INFO connecting mtalk.google.com:5228 883 | -------------------------------------------------------------------------------- /module.md: -------------------------------------------------------------------------------- 1 | .jshintrc ： JSHint是一种JS代码检查工具，这个文件是其个性化的配置文件 2 | .gitinore : 是git配置需要忽略文件的配置文件 3 | .travis.yml : travis是一个持续集成的平台，这是其配置文件 4 | 5 | nodeclub 以 express + mongodb + mongoose 作为基本框架, 典型的 MVC 应用 6 | Model: 对应mongoose orm， models目录 7 | view： ejs模板， views目录 8 | controler：express middleware , contollers目录 9 | 10 | ### 使用的模块 11 | 12 | #### bcryptjs 13 | 14 | bcrypt是一个跨平台的文件加密工具，How To Safely Store A Password 15 | 16 | #### bytes 17 | 18 | bytes(1024); 19 | // output: '1kB' 20 | 21 | bytes(1000); 22 | // output: '1000B' 23 | 24 | bytes(1000, {thousandsSeparator: ' '}); 25 | // output: '1 000B' 26 | 27 | bytes(1024 * 1.7, {decimalPlaces: 0}); 28 | // output: '2kB' 29 | 30 | bytes(1024, {unitSeparator: ' '}); 31 | // output: '1 kB' 32 | 33 | #### colors 34 | 35 | 让你的console.log呈现颜色 36 | 37 | var colors = require('colors'); 38 | 39 | console.log('hello'.green); // outputs green text 40 | console.log('i like cake and pies'.underline.red) // outputs red underlined text 41 | 42 | #### compression 43 | 44 | 代码压缩中间件 45 | 支持：deflate，gzip 46 | 47 | #### connect-redis 48 | 49 | connect-redis is a Redis session store backed by node_redis 50 | connect-radis 是一个Radis的会话缓存，被node_redis支持‘ 51 | 52 | #### cookie-parser 53 | 54 | Parse Cookie header and populate req.cookies with an object keyed by the cookie names. 55 | Optionally you may enable signed cookie support by passing a secret string, 56 | which assigns req.secret so it may be used by other middleware. 57 | 58 | 解析Cookie头部并通过cookie名称键入一个对象填充req.cookies 59 | 你可以传递一个私密的字符串来登记cookie的支持，其中分配req.secret来被其他中间件使用。 60 | 61 | #### cors 62 | 63 | CORS是一个提供一个Connect/Express中间件的node.js包，他可以被用作启用CORS（Cross-Origin Resource Sharing 跨源资源共享）并附带好些参数 64 | 65 | #### csurf 66 | 67 | Node.js CSRF（Cross-Site Request Forgery 跨站请求伪造） 保护中间件 68 | 69 | 要求一个session中间件或者cookie-parser首先被初始化 70 | 71 | + 如果你正设置"cookie" 参数为非假值，之后你必须在这个模块之前使用'cookie-parser' 72 | + 除此之外，你逆序使用一个session中间件在这个模块之前，比如： 73 | + express-session 74 | + cookie-session 75 | 76 | https://github.com/pillarjs/understanding-csrf 77 | 78 | #### data2xml 79 | 80 | 转换数据为xml 81 | 82 | #### ejs-mate 83 | 84 | Express 4.x layout,局部,块状的模板功能forEJS模板引擎 85 | 先前支持 include 但是已必须使用EJS1.0.x版本 86 | 87 | 88 | #### eventproxy 89 | 90 | 事件订阅型的异步模式 91 | 92 | ##### express-session 93 | 94 | Simple session middleware for Express,express session 设置 95 | 96 | #### helmet 97 | Helmet helps you secure your Express apps by setting various HTTP headers. 98 | 设置各种各样的http头部,一些安全方面的头部 99 | 100 | #### ioredis 101 | 102 | A robust, performance-focused and full-featured Redis client for Node and io.js. 103 | 为Node和io.js提供的redis客户端 104 | 105 | 106 | #### jpush-sdk 107 | 极光推送sdk 108 | 109 | #### loader-builder 110 | 111 | 感觉和webpack功能差不多,就是提供一系列的编译,压缩,合并 112 | 113 | #### loader 114 | Node静态资源加载器。 115 | 116 | #### lodash 117 | 118 | Lodash makes JavaScript easier by taking the hassle out of working with arrays, 119 | numbers, objects, strings, etc. Lodash’s modular methods are great for: 120 | 121 | 好像是提供一系列的数组,对象,字符串,函数的方法的封装（很强大） 122 | 123 | #### log4js 124 | 125 | 好像是对于原来console.log()功能的加强 126 | 127 | #### markdown-it 128 | 129 | 扩展性的markdown语法.速度快,安全,自定义插件 130 | 131 | #### memory-cache 132 | 133 | 一个简单的内存缓存 134 | 135 | #### method-override 136 | 137 | 复写方法,让你在客户端不能用http某些方法的地方,使用如put,delete等方法 138 | 139 | 比如form只支持get,post方法,使用这个模块就可以使用其他的方法了 140 | 141 | #### moment 142 | 一个轻量的JavaScript时间库 143 | 各种开发环境都可以用,包括前端 144 | 145 | #### mongoose 146 | 147 | mongodb orm 用于把mongodb数据库里面的数据抽象成对象,然后供node操作 148 | 149 | #### multiline 150 | 151 | 处理多行字符串,原先是要使用+来连接换行的字符串,用这个可以在函数内随意编写多行字符串 152 | 153 | #### node-uuid 154 | 155 | 生成通用唯一标识码(uuid),v1(time-based),v(random) 156 | 157 | #### nodemailer 158 | 159 | 非常方便从你的Node.js发送email 160 | 161 | #### nodemailer-smtp-transport 162 | 163 | 基于nodemailer,使用SMTP传输 164 | 165 | #### passport 166 | 167 | 社交媒体的认证,github之类 168 | 169 | #### pm2 170 | 171 | 生产应用进程管理器for Node.js 应用,内置负载均衡 172 | 173 | #### qn 174 | 175 | 七牛api客户端 176 | 177 | #### ready 178 | 179 | 混入题那几一次性ready一次性时间回调处理 180 | 181 | #### request 182 | 183 | 简化的http请求客户端,用户量比superagent大,而且支持流操作pipe,更强大 184 | 185 | #### response-time 186 | 187 | 这个模块创建一个中间件取记录请求在HTTP服务中的相应时间,这个相应时间是从一个请求进入这个中间件到头部被创建并出客户端的时间 188 | 189 | #### superagent 190 | 服务端的http请求 191 | 192 | #### utility 193 | 194 | 有用的工具集合 195 | md5,sha1,sha256,hamc,decode & encode,getParamNames,randomString,has,noop,Date utils,Number utils,Timers and more 196 | 197 | #### validator 198 | 199 | 字符串验证器,消毒器,有node端,还有浏览器端 200 | 主要是正则匹配是不是符合要求的字符串 201 | 202 | #### xmlbuilder 203 | 204 | 一个xml构造器,类似于java-xmlbuilder 205 | 206 | #### xss 207 | 208 | 根据白名单过滤HTML,防止xss攻击,通过白名单中来控制允许的标签和相关的标签属性,提供一系列接口以供拓展 209 | 210 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | //nodejs 中 path对象用于处理目录对象,提高开发效率 3 | //模块导入 4 | 5 | module.exports = { 6 | //入口文件 7 | entry : './src/main.js', 8 | //输出 9 | output : { 10 | //文件地址,使用绝对path.join绝对路径 11 | path : path.join(__dirname, './dist'), 12 | //[name]这里是webpack根据路口文件自动生成的名字 13 | filename : '[name].js', 14 | //公共文件生成的地址 15 | publicPath : '/dist/' 16 | }, 17 | //服务器相关,自动刷新 18 | devServer : { 19 | //Set this as true if you want to access dev server from arbitrary url. 20 | // This is handy if you are using a html5 router. 21 | historyApiFallback : false, 22 | //hot module replacement 模块热替换,无需刷新整个页面,把改变的部分替换 23 | hot : false, 24 | //支持iframe模式和inline模式 25 | inline : true, 26 | //进度条 27 | progress : true 28 | }, 29 | //加载器 30 | module : { 31 | loaders : [ 32 | //解析vue文件 33 | {test : /\.vue$/, loader : 'vue-loader'}, 34 | //转化ES6语法 35 | {test : /\.js$/, loader : 'babel-loader', exclude : /node_modules/}, 36 | //编译css并自动添加css前缀 37 | {test : /\.css$/, loader : 'style-loader!autoprefixer-loader!css-loader'}, 38 | //.scss文件编译 39 | //需要css-loader,style-loader,sass-loader,node-sass, 40 | {test : /\.scss$/, loader : 'css-loader!style-loader!sass-loader!node-sass'}, 41 | //图片转化,小于8k的图片转化为base64编码的 42 | {test : /\.(png|jpg|gif)$/, loader : 'url-loader?limit=8192'}, 43 | //html模板编译 44 | {test : /\.(html|tpl)$/, loader : 'html-loader'} 45 | ] 46 | }, 47 | //.vue的配置 48 | vue : { 49 | loaders : { 50 | css : 'style-loader!autoprefixer-loader' 51 | } 52 | }, 53 | //转化为ES5语法 54 | babel : { 55 | presets : ['es2015'], 56 | //合聚代码,不污染区全局 57 | plugins : ['transform-runtime'] 58 | }, 59 | reslove : { 60 | //require时省略的扩展名 61 | extensions : ['','.js','.vue'], 62 | //别名,可以直接使用别名来代表设定的路径 63 | alias : { 64 | filter : path.join(__dirname, './src/filters'), 65 | components : path.join(__dirname, './src/components') 66 | } 67 | }, 68 | //开启source-map 69 | devtool : 'eval-source-map' 70 | }; 71 | -------------------------------------------------------------------------------- /代码规范.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
323 |

Web API 设计规范

324 |
325 |

目录

326 | 327 |
    328 |
  1. 1 动机
    2. 329 |
  2. 2 一致性
    3. 330 |
  3. 331 | 3 通用格式约定 332 |
      333 |
    1. 334 | 3.1 HTTP 头定义 335 |
        336 |
      1. 3.1.1 Content-Type
        2. 337 |
      2. 3.1.2 CORS
        3. 338 |
      339 |
      2. 340 |
    2. 341 | 3.2 数据格式 342 |
        343 |
      1. 3.2.1 JSON
        2. 344 |
      2. 3.2.2 日期时间
        3. 345 |
      3. 3.2.3 文件
        4. 346 |
      347 |
      3. 348 |
    349 |
    4. 350 |
  4. 351 | 4 RESTful 部分 352 |
      353 |
    1. 354 | 4.1 列表操作 355 |
        356 |
      1. 4.1.1 获取列表
        2. 357 |
      2. 4.1.2 操作列表内的资源
        3. 358 |
      3. 4.1.3 删除列表内的资源
        4. 359 |
      4. 4.1.4 创建资源到列表
        5. 360 |
      5. 4.1.5 获取列表额外信息
        6. 361 |
      6. 4.1.6 列表事务处理
        7. 362 |
      363 |
      2. 364 |
    2. 365 | 4.2 资源操作 366 |
        367 |
      1. 4.2.1 获取资源
        2. 368 |
      2. 4.2.2 更新资源
        3. 369 |
      3. 4.2.3 修改资源
        4. 370 |
      4. 4.2.4 获取资源额外信息
        5. 371 |
      5. 4.2.5 资源事务处理
        6. 372 |
      373 |
      3. 374 |
    375 |
    5. 376 |
  5. 377 | 5 非 RESTful 部分 378 |
      379 |
    1. 380 | 5.1 会话 381 |
        382 |
      1. 383 | 5.1.1 会话操作 384 |
        2. 385 |
      386 |
      2. 387 |
    388 |
    6. 389 |
390 | 391 |

1 动机

392 | 393 |

现代 Web 项目的部署一般是前后端分离，Web API 和 Web Resource 单独部署，开发人员也分为前端开发和后端开发。

394 |

为了减少前后端开发沟通 Web API 的成本，并增强 Web API 的可读性、可维护性，提供了这么一套规范，遵循这套规范可以在 HTTP 到前端的处理上做到一定程度的优化。

395 | 396 |

2 一致性

397 | 398 |

这份规范中的示例 URL 中，使用冒号「:」开头的路径都表示一个通用的名称，具体实现可以使用自己希望的名称来定义。

399 | 400 |

这份规范中的示例片段使用了 HTTP/1.1 的报文格式，具体实现可以使用 HTTP 的其它版本。

401 | 402 |

3 通用格式约定

403 | 404 |

3.1 HTTP 头定义

405 | 406 |

3.1.1 Content-Type

407 | 408 |

在这套 API 规范中，所有请求和响应的实体部分都根据头中描述的 Content-Type 来解析，如果没有设置默认以 application/json 来解析。 409 | 410 |

411 | 前端应该根据 Content-Type 来解析后端的响应。因为后端的响应往往会被中间层或代理层破坏，无法确保 Content-Type 总是 application/json。 412 |
413 | 414 |

3.1.2 CORS

415 | 416 |

前后端部署分离的项目前端通常会跨域调用 API，所以 API 上需要加上跨域调用的支持。

417 | 418 |

这套规范会涉及到以下这些 CORS 相关的响应头，如果有跨域需求建议给所有 API 都带上。

419 | 420 | 430 | 431 |

此外，所有带 POST 请求的 API 都应该同时支持 OPTIONS 请求。并且 OPTIONS 请求不处理任何业务逻辑，只是带着上面列出的响应头直接响应。

432 | 433 |
434 | 这些是浏览器行为，是跨域部署必须的，具体可以参考 W3C CORS 规范。 435 |
436 | 437 |

3.2 数据类型

438 | 439 |

3.2.1 JSON

440 | 441 |

这套规范中，数据类型都是基于 JSON 描述的，JSON 支持的数据类型有以下这些：

442 | 443 | 451 | 452 | 需要注意的是，由于前端是 JavaScript，Number 类型对应的实际上是 64 位的 IEEE754 浮点数。 453 | 所以，它能精确描述的整数范围是从 -9007199254740991 到 9007199254740991，这意味着无法支持 int 64 这样的超大整型，这种情况下请使用字符串传输。 454 | 455 |

3.2.2 日期时间

456 | 457 |

在这套规范中，日期时间类型推荐使用 ISO 8601（见 RFC 3339 中的 date-time 定义） 的标准日期时间格式传输。

458 | 459 |

460 | 2016-05-17T17:24:41.324Z 461 | 或者 462 | 2016-05-18T01:24:41.324+08:00 463 |

464 | 465 |

这是为了避免直接使用 YYYY-MM-DD 格式时遇到客户端时区不正确造成解析错误的问题，

466 | 467 |

3.3.3 文件

468 | 469 |

文件传输的 API 设计比较特殊，如果使用 FormData，建议对「文件上传」这件事情开发单独的接口，不带其它参数，专注传文件。 470 | 471 |

472 | 因为 FormData 中的其它数据是没有类型的，只能区分文件和非文件。 473 |
474 | 475 |

如果希望在一个复杂的请求实体中加上文件，可以将文件转换成 Data URL（RFC 2397）格式，作为 JSON 中的字符串格式传输。

476 | 477 |

比如一个 html 文件的内容是：

478 | 479 | 
<h1>test</h1>
480 |
481 | 482 |

那么它可以被转换成一个这样的字符串传输

483 | 484 | 
data:text/html;base64,PGgxPnRlc3Q8L2gxPg==
485 |
486 | 487 |
488 | 对于纯文本的数据转换 Data URL，直接 encodeURIComponent 即可，base64 不是必须的。 489 |
490 | 491 | 492 |

3.4 异常处理

493 | 494 |

3.4.1 状态码

495 | 496 |

这套 API 使用 HTTP 状态码描述响应的基本状态，这样可以使用通用的监控和报警服务处理 API。

497 | 498 |

对于一个来自请求的异常，服务器应该响应 4xx 状态码，比如请求的参数类型错误、资源找不到等。这些问题都是可以通过排查解决的，比如改正请求的参数格式等。大部分时候 4xx 错误都是在开发阶段解决的。

499 | 500 |

5xx 状态码表示服务内部错误，比如数据库查询超时、依赖的其它服务给了错误的响应。这类错误通常是运行时产生的。

501 | 502 |
503 | 这套 API 并不强制约定所有的状态码都必须完全符合 HTTP 的定义，但底线是状态码的第一位数必须符合语义。 504 |
505 | 506 |

所有的异常响应，其内容都是一个固定格式的 JSON 数据，比如

507 | 508 | 
HTTP/1.1 500 Internal Server Error
509 | 
510 | {
511 |   "name": "UNKNOWN_SERVER_ERROR",
512 |   "message": "服务器未知错误"
513 | }
514 |
515 | 516 | 
HTTP/1.1 404 Not Found
517 | 
518 | {
519 |   "name": "RESOURCE_NOT_FOUND",
520 |   "message": "资源未找到"
521 | }
522 |
523 | 524 |
525 | 这个响应中的 name 和 message 是必须的，实现可以自己扩展一些其它数据。 526 |
527 | 528 |

4 RESTful 部分

529 | 530 | REST 风格的 API 将所有东西都视为资源（可以理解为文件）和列表（可以理解为目录）。 531 | 532 | 533 |

4.1 列表操作

534 | 535 |

536 | 列表通常以名词的复数形式或者复数性质的词来命名，比如 comments、xxxlist。这样可以更容易地区分开列表和普通资源。 537 |

538 | 539 |

4.1.1 获取列表

540 | 541 |

542 | 使用 GET 方法，来获取一个列表。 543 |

544 | 545 | 
GET /:list?limit=2 HTTP/1.1
546 |
547 | 
HTTP/1.1 200 OK
548 | 
549 | [
550 |   {
551 |     "id": 1,
552 |     "name": "value1",
553 |     "field2": "value2",
554 |     "field3": "value3"
555 |   },
556 |   {
557 |     "id": 2,
558 |     "field1": "value1",
559 |     "field2": "value2",
560 |     "field3": "value3"
561 |   }
562 | ]
563 |
564 | 565 |
566 | 列表中的每个记录必须有唯一的 id 字段（虽然上面的例子中 id 是数值，实际上可以是任何类型），其它字段都是可选的，由具体接口文档定义。 567 |
568 | 569 | 570 |

4.1.2 操作列表内的资源

571 | 572 |

列表可以视为一个目录，这个目录中包含了若干以 id 命名的文件。访问列表资源可以在列表后面加上资源 id 即可。

573 | 574 |

比如获取列表内的某个资源可以这么做

575 | 576 | 
GET /:list/:id HTTP/1.1
577 | 578 | 对列表内的资源操作和普通的资源操作一样，可以参考「4.2. 资源」。 579 | 580 | 581 | 582 |

4.1.3 删除列表内的资源

583 | 584 | 删除列表内的资源可以针对资源的 URL 直接使用 DELETE 方法操作。 585 | 586 | 
DELETE /:list/:id HTTP/1.1
587 | 588 | 
HTTP/1.1 204 No Content
589 | 590 | 591 |

4.1.4 创建资源到列表

592 | 593 |

标准的资源创建可以直接对列表做 POST 操作，并带资源的所有数据，类似「4.2.1 更新资源」的操作，只不过不需要指定 id。

594 | 595 | 
POST /:list HTTP/1.1
596 | 
597 | {
598 |   "field1": "value1",
599 |   "field2": "value2",
600 |   "field3": "value3",
601 |   "field4": "value4"
602 | }
603 |
604 | 605 |

创建资源后可以直接响应这个资源的相关信息，建议响应 id。

606 | 607 | 
HTTP/1.1 200 OK
608 | 
609 | {
610 |   "id": 123
611 | }
612 |
613 | 614 |

也可以响应一个 303 重定向，让客户端转而请求这个创建后的资源。

615 | 616 | 
HTTP/1.1 303 See Other
617 | Location: /:list/123
618 |
619 |

客户端遇到 303 状态码后会自动向 Location 指定的 URI 发起 GET 请求。

620 |
621 | 使用 303 来响应 POST 会造成一次多余的 HTTP 请求，而且如果资源中不包含 id 的话前端获取资源 id 会比较麻烦。 622 |
623 | 624 |

4.1.5 获取列表额外信息

625 | 626 |

列表除了列表项之外可能还包含一些额外信息，比如列表总长度、列表最后更新时间等。

627 | 628 |

如果视列表为一个目录的话，我们将这些额外的信息视为目录下除了标准列表项外的其它资源，使用和资源一样的方式操作。

629 | 630 | 

GET /:list/:resource HTTP/1.1
631 |
632 | 633 |

具体参考「4.2 资源操作」。

634 | 635 |

额外信息也可以是一个列表。

636 | 637 | 
GET /:list/:sublist HTTP/1.1
638 |
639 | 640 |

具体参考「4.1 列表操作」。

641 | 642 |
643 | 这些信息的名称定义可能和列表内的资源 id 或事务名冲突，建议在 id 的定义规则上避免这样的冲突，比如使用数值或 hash 作为 id，使用名词作为额外资源名，使用动词或动名词作为事务名。 644 |
645 | 646 |

4.1.6 列表事务处理

647 | 648 |

有些列表除了资源操作外还有一些非常复杂的操作，我们认为这是一种事务。比如「下单」这样的操作肯定不是简单地创建一个「订单」资源，它还会做修改库存、修改账户余额等一系列操作，它就是一个事务。

649 | 650 |

对于这种事务级别的操作，我们统一使用 POST 方法，并把事务名「像资源一样」写在列表的后面，可以理解为向服务器发起某种操作请求。

651 | 652 | 

POST /:list/:action HTTP/1.1
653 |
654 | 655 | 对于事务级别的操作，这份规范对其相应的内容不做约束，由具体的文档来说明。 656 | 657 | 658 |

4.2 资源操作

659 | 660 |

4.2.1 获取资源

661 | 662 | 所有资源都可以通过 GET 方法来获取其内容。 663 | 664 | 
GET /:resource HTTP/1.1
665 |
666 | 667 | 
HTTP/1.1 200 OK
668 | 
669 | {
670 |   "field1": "value1",
671 |   "field2": "value2",
672 |   "field3": "value3",
673 |   "field4": "value4"
674 | }
675 |
676 | 677 | 678 |

4.2.2 更新资源

679 | 680 |

可以将 PUT 视为是 GET 的一个逆操作。

681 | 682 | 
PUT /:resource HTTP/1.1
683 | 
684 | {
685 |   "field1": "value1",
686 |   "field2": "new value",
687 |   "field3": "value3",
688 |   "field4": "value4"
689 | }
690 |
691 | 692 | 
HTTP/1.1 204 No Content
693 | 694 |

这里的 :resource 只能是一个资源，不能是列表（列表是没有 PUT 方法的）。比如更新一个全局资源：

695 | 696 | 
PUT /config HTTP/1.1
697 | 
698 | {}
699 |
700 | 701 |

也可能是一个列表项

702 | 703 | 
PUT /mylist/123 HTTP/1.1
704 | 
705 | {}
706 |
707 | 708 |
709 | 请求实体的结构与「获取资源」完全保持一致，即使某个字段的值没有改变也带上原来的值。 710 |
711 | 712 |

4.2.3 修改资源

713 | 714 | PUT 方法是对整个资源的更新，如果希望只对资源的某一部分做更新操作可以使用 PATCH 方法。 715 | 716 | 
PATCH /:resource  HTTP/1.1
717 | 
718 | {
719 |   "field3": "new value"
720 | }
721 |
722 | 723 | 
HTTP/1.1 204 No Content
724 | 725 |
726 |
    727 |
  • 只针对请求实体中有带上的字段做修改
    • 728 |
729 |
730 | 731 |

这里的 :resource 只能是一个资源，不能是列表（列表是没有 PATCH 方法的）。比如修改一个全局资源：

732 | 733 | 
PATCH /config HTTP/1.1
734 | 
735 | { "banner": true }
736 |
737 | 738 | 也可能是一个列表项 739 | 740 | 
PATCH /mylist/123 HTTP/1.1
741 | 
742 | { "name": "hehe" }
743 |
744 | 745 |

4.2.4 获取资源额外信息

746 | 747 |

资源除了自己的信息外还可以提供额外信息，这种情况下我们将这个资源本身视为一个目录，具体操作可以参考「4.1.5 获取列表额外信息」。

748 | 749 |

4.2.5 资源事务处理

750 | 751 |

资源也可以有相关的事务，比如「取消订单」这个操作不仅仅是一个「修改订单状态」那么简单，可能还会有修改库存、修改用户余额等操作，它实际上就是一个事务。

752 | 753 |

对于资源的事务处理的细则，可以参考「4.1.6 列表事务处理」。

754 | 755 | 756 |

5 非 RESTful 部分

757 | 758 |

5.1 会话

759 | 760 |

由于会话通常关联一些敏感信息，暴露给前端就可能出现安全问题。这份规范中通过 HTTP Only 的 Cookie 来处理会话。并且所有与会话有关的操作都放在一个 :session 目录下，或者如果有条件的话可以使用一个独立的域名来部署。

761 | 762 | 
GET /:session HTTP/1.1
763 | 
764 | {
765 |   "username": "hehe"
766 | }
767 |
768 | 769 |
770 | 所谓会话就是用户相关的东西，比如获取用户信息、登陆等。 771 |
772 | 773 |

5.1.1 会话操作

774 | 775 |

会话本身可以视为一个资源，可以作为资源操作，具体参考「4.2. 资源」。

776 | 777 |

比如一个具体的登录接口可能这么设计：

778 | 779 | 
POST /user/login HTTP/1.1
780 | 
781 | {
782 |   "username": "hehe",
783 |   "password": "***"
784 | }
785 |
786 | 787 |

引用

788 | 789 | 795 | -------------------------------------------------------------------------------- /作用域.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mrwaite/Share/e0cbf85a1790eb396f09cc735c262c22037303e9/作用域.png -------------------------------------------------------------------------------- /回调地狱.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mrwaite/Share/e0cbf85a1790eb396f09cc735c262c22037303e9/回调地狱.jpg -------------------------------------------------------------------------------- /基于大数据的音乐推荐及展示云平台-陈威特.doc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mrwaite/Share/e0cbf85a1790eb396f09cc735c262c22037303e9/基于大数据的音乐推荐及展示云平台-陈威特.doc -------------------------------------------------------------------------------- /基本类型转化.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mrwaite/Share/e0cbf85a1790eb396f09cc735c262c22037303e9/基本类型转化.png -------------------------------------------------------------------------------- /大一暑假计划方案一.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mrwaite/Share/e0cbf85a1790eb396f09cc735c262c22037303e9/大一暑假计划方案一.md -------------------------------------------------------------------------------- /技术社区需求.md: -------------------------------------------------------------------------------- 1 | ## 技术社区需求 2 | 3 | ### 项目描述： 4 | 5 | 完成之后搭建在协会的内网，用于协会成员日常的技术文章的分享 6 | 7 | ### 模块分析 8 | 9 | #### 用户界面 10 | 11 | 1. **注册 && 登陆模块** 12 | > 提供协会成员和外部人员的注册与登陆。 13 | 14 | 2. **发布文章模块** 15 | > 提供已注册人员的文章发布的模块 16 | 17 | 3. **文章展示模块** 18 | > 提供成员已发布文章的展示模块，且每一个已注册的成员可以在浏览文章的时候给文章点赞 19 | 20 | 4. **排行榜模块** 21 | > 展示所有已注册成员发布的所有文章获得的所有赞的总和,以排行榜的形式，可以只罗列前五名 22 | 23 | #### 管理界面 24 | 25 | 1. **登陆界面** 26 | > 登陆到后台的管理界面 27 | 28 | 2. **已注册成员罗列** 29 | > 罗列已注册成员列表，并在后面加上统计此成员的文章的总数目 30 | 31 | 3. **指定成员的文章列表** 32 | > 上面罗列成员之后，点击相应的成员，可以获得此成员的文章列表，管理员可以删除此文章 33 | 34 | ### 其他需求 35 | 36 | 1. 后端与前端分离 37 | 2. 使用数据库存储数据 38 | 3. 注意代码编写的规范 39 | 4. 注意变量命名的语义化---与功能相匹配 40 | 5. 注意代码注释量 41 | 6. 前后端交互用ajax完成 42 | 7. 利用 Github 进行任务的协作,版本的迭代 43 | 8. 前端的同学考虑到浏览器的差异 44 | 9. 后端的同学考虑到安全方面的问题 45 | 46 | **参考网站：** 47 | [segmentfault][1] 48 | [知乎][2] 49 | 50 | **参考资料** 51 | [JavaScript代码规范][3] 52 | 53 | 54 | [1]: https://segmentfault.com/ 55 | [2]: https://www.zhihu.com/ 56 | [3]: https://github.com/ecomfe/spec/blob/master/javascript-style-guide.md 57 | -------------------------------------------------------------------------------- /软件备忘.md: -------------------------------------------------------------------------------- 1 | oh-my-zsh 2 | supervisor 3 | node-inspector 4 | browser-sync 5 | docky 6 | gitbook 7 | webstorm 8 | filezila 9 | wps 10 | keepass 11 | deloge 12 | dropbox 13 | postman 14 | pocket 15 | 16 | -------------------------------------------------------------------------------- /闭包的解释.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mrwaite/Share/e0cbf85a1790eb396f09cc735c262c22037303e9/闭包的解释.png --------------------------------------------------------------------------------