Hibop Yuan
Hibop Yuan
### :nth-child(x*n + y) (n>=0整数， x, y整数) 1. **x = 0 选择的是第y个标签** ``` // 选取第3个元素 【从第一个开始，非数组从第0开始】 ul.container li:nth-child(3) { // todo } ``` 2. **x < 0 选择的是大于0 、小于等于y的标签** 负方向选取...
## 背景 渐进式渲染是用于提高网页性能（尤其是提高用户感知的加载速度），以尽快呈现页面的技术。 在以前互联网带宽较小的时期，这种技术更为普遍。如今，移动终端的盛行，而移动网络往往不稳定，渐进式渲染在现代前端开发中仍然有用武之地。 一些举例： - 图片懒加载——页面上的图片不会一次性全部加载。当用户滚动页面到图片部分时，JavaScript 将加载并显示图像。 - 确定显示内容的优先级（分层次渲染）——为了尽快将页面呈现给用户，页面只包含基本的最少量的 CSS、脚本和内容，然后可以使用延迟加载脚本或监听DOMContentLoaded/load事件加载其他资源和内容。 - 异步加载 HTML 片段——当页面通过后台渲染时，把 HTML 拆分，通过异步请求，分块发送给浏览器。更多相关细节可以在这里找到=====> [node异步加载HTML片段](https://www.ebayinc.com/stories/blogs/tech/async-fragments-rediscovering-progressive-html-rendering-with-marko/) ## 异步加载 HTML 片段 > https://www.ebayinc.com/stories/blogs/tech/async-fragments-rediscovering-progressive-html-rendering-with-marko/ 文章要点总结： 在eBay，我们非常重视网站速度，并一直在寻找方法让开发人员创建速度更快（fast-loading）的网络应用程序(web-apps)。这涉及完全理解和控制网页如何传递到Web浏览器。渐进式HTML呈现是一种相对古老的技术，可以用来提高网站的性能，但它已经在新一代的的Web应用程序中丢失了。这个想法很简单：**通过尽早和多次刷新，让Web浏览器在更先的下载和呈现页面。浏览器从服务器流式传输（甚至在响应结束之前）， 总是具有解析和响应HTML的有用部分。此功能允许更早地下载HTML和外部资源，并允许更早地呈现页面的某些部分。结果是，不管是真实的加载时间还是用户感知时间都将被改善。 在这篇博文中，我们将深入探讨一种我们称之为“异步碎片”的技术，该技术利用渐进式HTML渲染来提高网站速度，而不会使网络应用程序的构建方式大大复杂化。具体示例我们将使用Node.js，Express.js和Marko模板引擎（支持流式传输，刷新和异步呈现的JavaScript模板引擎）。即使您没有使用这些技术，本文也可以让您深入了解如何进一步优化您的选择。
> 一般常见有四种提交方式 ## 1、form-data: 就是http请求中的multipart/form-data,它会将表单的数据处理为一条消息，以标签为单元，用分隔符分开。既可以上传键值对，也可以上传文件。当上传的字段是文件时，会有Content-Type来表名文件类型；content-disposition，用来说明字段的一些信息； 由于有boundary隔离，所以multipart/form-data既可以上传文件，也可以上传键值对，它采用了键值对的方式，所以可以上传多个文件。   ## 2、x-www-form-urlencoded： 就是application/x-www-from-urlencoded,会将表单内的数据转换为键值对，比如,name=java&age = 23   ## 3、raw 可以上传任意格式的文本，可以上传text、json、xml、html等  ## 4、binary 相当于Content-Type:application/octet-stream,从字面意思得知，只可以上传二进制数据，通常用来上传文件，由于没有键值，所以，一次只能上传一个文件。
### 用HTTPS对HTTP通信实施加密 使用HTTPS机制能对服务器和客户端的通信加密，即使是经由的代理服务器和通信网络，也无法查阅其通信内容。 HTTPS能对URI路径、查询字符串、协议首部和消息体（请求消息体和响应消息体）等几乎所有的交互数据完成加密。 使用浏览器访问API时的问题 ### 会话劫持 XSS Cookie常用来标记用户或授权会话。因此，如果Web应用的Cookie被窃取，可能导致授权用户的会话受到攻击 在Content-type首部中返回application/json。 Content-type: application/json 然而IE浏览器会无视Content-Type首部的内容，因为使用 Content Sniffering 功能，即通过实际的数据来推测数据格式。 为了防止浏览器因 Content Sniffering 功能将JSON当作HTML解释，首先要在浏览器设置X-Content-Type-Options首部，该首部IE8+中有实现 X-Content-Type-Options: nosniff 另一种防XSS威胁的对策，是让JSON字符串进行转义 - Cookie的Secure和httpOnly标记 标记为 Secure 的Cookie只应通过被HTTPS协议加密过的请求发送给服务端。但即便设置了 Secure 标记，敏感信息也不应该通过Cookie传输；为避免跨域脚本...
### 1. 创建对象： 1. new Object() ```js var person = new Object(); pserson.name = 'ifyour'; person.age = 18; person.sayName = function() { console.log(this.name); } ``` 2. 字面量 ```js vaer person...
> 执行上下文（context）和作用域（scope）经常容易混淆，两者有什么区别？ > 函数执行细节有哪些？ ### 执行上下文（context）和作用域（scope）区别？ 作用域是你的代码在运行时，各个变量、函数和对象的可访问性。换句话说，作用域决定了你的代码里的变量和其他资源在各个区域中的可见性。是作用域为你的代码提供了一个安全层级。 在 JavaScript 中有两种作用域 全局作用域 局部作用域 块级声明包括if和switch，以及for和while循环，和函数不同，它们不会创建新的作用域。在块级声明中定义的变量从属于该块所在的作用域。 和var关键字不同，let和const关键字支持在块级声明中创建使用局部作用域。 关于this： 在全局作用域中，上下文总是 Window 对象。 作用域定义在一个对象的方法中，上下文this就是这个方法所在的那个对象。 是如果你使用new关键字调用函数时上下文的值会有差异。上下文会设置为被调用的函数的实例。 ### 函数执行到底发生了哪些事情？ 当一个函数被执行时, 会生成一个执行上下文. 一个执行上下文的生命周期分为两个阶段: - 创建阶段： * 生成变量对象 *...
### 写在前面的，几个标准 - **时间标准：GMT UTC ISO Z** GMT即「格林威治标准时间」(Greenwich Mean Time，简称G.M.T.)，指位于英国伦敦郊区的皇家格林威治天文台的标准时间，因为本初子午线被定义为通过那里的经线。然而由于地球的不规则自转，导致GMT时间有误差，**因此目前已不被当作标准时间使用**。 UTC是最主要的世界时间标准，是经过**平均太阳时(以格林威治时间GMT为准)、地轴运动修正后的新时标以及以「秒」为单位的国际原子时所综合精算而成的时间**。UTC比GMT来得更加精准。其误差值必须保持在0.9秒以内，若大于0.9秒则由位于巴黎的国际地球自转事务中央局发布闰秒，使UTC与地球自转周期一致。不过日常使用中，GMT与UTC的功能与精确度是没有差别的。协调世界时区会使用“Z”来表示。而在航空上，所有使用的时间划一规定是协调世界时。而且Z在无线电中应读作“Zulu”（可参见北约音标字母），协调世界时也会被称为“Zulu time”。 ISO是国际标准化组织的国际标准ISO 8601是日期和时间的表示方法，时间后面是带有时区的， Z 表示本初时 +1:00 东1区。 -1:00 西1区 ``` // YYYY-MM-DDThh:mm:ss ± timezone(时区用HH:MM表示) 1997-07-16T08:20:30Z // “Z”表示UTC标准时区，即"00:00",所以这里表示零时区的`1997年7月16日08时20分30秒` //转换成位于东八区的北京时间则为`1997年7月17日16时20分30秒` 1997-07-16T19:20:30+01:00...
  #### 无线性能优化：域名收敛 [http://taobaofed.org/blog/2015/12/16/h5-performance-optimization-and-domain-convergence/](http://taobaofed.org/blog/2015/12/16/h5-performance-optimization-and-domain-convergence/) #### 【前端性能】浅谈域名发散与域名收敛 #1 [https://github.com/chokcoco/cnblogsArticle/issues/1](https://github.com/chokcoco/cnblogsArticle/issues/1)
## css 3.0动画实现方案： ### 需要的准备知识 ### 动画触发条件： - focus - hover: 包括 .a:hover > .b:first-child 兄弟触发 .a:hover::before 伪类触发 - scroll ### 常见实现思路： 1. 图片hover上去，变色： - 有换background-image 多一个请求 - 准备雪碧图变色前和后===> 父组件overflow:hidden,...
## sublime之设置[https://www.sublimetext.com/2](https://www.sublimetext.com/2)： - 全屏——F11； 免打扰全屏——shift+F11； - 隐藏side-bar； tabs； menu；minmap 都是在view中； **因为view在menu中，隐藏menu后就比较尴尬，只能快捷键了，试试alt+鼠标点击** - 在preference-set或者preference-* free set（免打扰模式要在这个文件下set） - preference-key binding 快捷键绑定； - preference-package 可以自己安装很多好用的包 - Babel - EsLint - HTML-CSS-JS Prettify、JsFormat（代码格式化） -...