20170923 前端开发日报-前端开发博客

前端排序算法总结；前端面试题 V2.0；JavaScript 与异步编程；JavaScript 在 V8 中的元素种类及性能优化；html2canvas将HTML内容写入Canvas生成图片；Youku-HTML5-Player；jquery点击滑动到某个位置；前端分享之cookie的使用及单点登录

前端排序算法总结排序算法可能是你学编程第一个学习的算法，还记得冒泡吗？
当然，排序和查找两类算法是面试的热门选项。如果你是一个会写快排的程序猿，面试官在比较你和一个连快排都不会写的人的时候，会优先选择你的。那么，前端需要会排序吗？答案是毋庸置疑的，必须会。现在的前端对计算机基础要求越来越高了，如果连排序这些算法都不会，那么发展前景就有限了。本篇将会总结一下，在前端的一些排序算法。
#前端技术#【前端面试题 V2.0】详见：这是一份集合了多家公司面试题的问答列表，涵盖底层原理、网络知识、性能优化等众多方面的内容，旨在帮助中、高级前端工程师检测知识点掌握情况，了解面试的各种套路。
JavaScript 与异步编程按照维基百科上的解释：独立于主控制流之外发生的事件就叫做异步。因为 setTimeout 的存在，至少在被 ECMA 标准化的那一刻起，JavaScript 就支持异步编程了。与其他语言的 sleep 不同，setTimeout 是异步的——它不会阻挡当前程序继续往下执行。然而异步编程真正发展壮大，Ajax 的流行功不可没。Ajax 中的 A（Asynchronous）真正点到了异步的概念——这还是 IE5、IE6 的时代。
JavaScript 在 V8 中的元素种类及性能优化 JavaScript 对象可以具有与它们相关联的任意属性。对象属性的名称可以包含任何字符。JavaScript 引擎可以进行优化的一个有趣的例子是当属性名是纯数字时，一个特例就是数组索引的属性。

在 V8 中，如果属性名是数字（最常见的形式是 Array 构造函数生成的对象）会被特殊处理。尽管在许多情况下，这些数字索引属性的行为与其他属性一样，V8 选择将它们与非数字属性分开存储以进行优化。在引擎内部，V8 甚至给这些属性一个特殊的名称：元素。对象具有映射到值的属性，而数组具有映射到元素的索引。
#canvas#【html2canvas将HTML内容写入Canvas生成图片】html2canvas 能够实现在用户浏览器端直接对整个或部分页面进行截屏。这个html2canvas脚本将当前页面渲染成一个canvas图片，通过读取DOM并将不同的样式应用到这些元素上实现。 #前端开发博客#
#开源项目#【优酷 HTML5 播放器扩展：Youku-HTML5-Player】详见： Youku-HTML5-Player 是一个 Youku HTML5 播放器扩展，帮助你从此告别 Flash 和广告。同时，它具备智能记忆、弹幕、视频下载等功能。
#jQuery#【jquery点击滑动到某个位置】点击向下滚动到某个位置，比较常用的一个功能，只需要一个简单的函数就可以滑动到任意你需要的地方，默认点击之后是返回顶部。
前端分享之cookie的使用及单点登录 cookie的英文意思是饼干。在计算机术语中指服务端存放在客户端的一段数据。这段数据在客户端每次进行http请求时会自动加在http请求报文中的header上；服务端在响应时，可以对cookie进行设置，并将cookie加入到http响应报文header中。MDN中对cookie的解释为：cookie 是一个请求首部，其中含有先前由服务器通过 Set-Cookie 首部投放并存储到客户端的 HTTP cookies。
cookie一般存放在对应的域名下，各个浏览器对中一个域名下存放的cookie的个数与大小规定不一样。下表是不同浏览器对cookie存放的规定：
使用Node.js了解和测量HTTP花费的时间了解和测量HTTP时间有助于我们发现客户端到服务器或服务器到服务器之间的通信性能瓶颈。本文介绍了HTTP请求中的时间开销，并展示了如何在Node.js中进行测量。
DNS查找：执行DNS查找所花费的时间。 DNS查找将域名解析为IP地址。每个新的域需要一个完整的往返行程来进行DNS查找。当目的地已经是IP地址时，没有DNS查找。
TCP连接：在源主机和目标主机之间建立TCP连接所需的时间。必须在多步握手过程中正确建立连接。 TCP连接由操作系统管理，如果基础TCP连接无法建立，则OS范围的TCP连接超时将会进入我们应用程序中的超时配置。
TLS握手：完成TLS握手的时间。在握手过程中，端点交换认证和密钥以建立或恢复安全会话。没有HTTPS请求的不需要TLS握手。
第一个字节的时间（TTFB）：等待初始响应的时间。此时间除了等待服务器处理请求和传递响应所花费的时间之外，还可以捕获往返服务器的延迟。
内容传输：接收响应数据所花费的时间。响应数据的大小和可用的网络带宽决定其持续时间。
webpack-multi-page：webpack 前端多页项目工程 webpack 前端多页项目工程，适用于展示型站点，比如官网。 Example Demo Feature 支持 ES6 语法，使用 babel 编译，预设env环境 – preset-env html 支持 ejs 语法，使用 underscore-template-loader 和 HtmlWebpackPlugin 编译，详细语法可查看 underscore 或者 l…
HTML&CSS Lesson5: 定位CSS最大的用处之一就是可以将内容和元素定位到任何我们想要的位置，使我们的设计具有结构，使内容更加易懂。 CSS有好几种不同的定位属性，每种都有自己的使用场景。在这节课中我们会通过不同的案例——可复用的布局…
前端够得到Web安全–CSRF跨站请求伪造前端够得到Web安全系列之CSRF CSRF（Cross-site request forgery）跨站请求伪造，也被称为“One Click Attack”或者Session Riding，通常缩写为CSRF或者XSRF，是一种对网站的恶意利用。尽管听起来像跨站脚本（XSS）…
Node.js 异步异闻录
从0实现一个tinyredux 讲真，redux已经很小了，去掉注释代码也就300行吧，大家可以去读一下，注释写的也是非常详细了。
redux 更多的是对思维上的变化：数据改变 + 视图更新二者分开，各自管理自己。

现在，让我们从无到有！！
手写可配置的express & nodejs的代理 nodejs比较好的代理包有：node-http-proxy和http-proxy-middleware。这两个我都用过，它们的优点自不用说，只说说缺点：它们不能从配置文件里读取代理配置。每添加一个拦截路径都需要多加一个接口调用。所以，我需要自己写一个http代理，要包含一下功能：
从配置文件里读取代理配置
可以路径重写
这样做的好处是：新增服务只需要在配置文件上加上该服务，无需修改业务逻辑
《安息吧，REST API，GraphQL 长存》即使与 REST API 打交道这么多年，当我第一次了解到 GraphQL 和它试图解决的问题时，我还是禁不住把本文的标题发在了 Twitter 上。（by 众成翻译）