学习自：基于深度学习的NLP

文本预处理

文本预处理思想是这样的：机器不需要语料库中的无关部分。它只需要执行手头任务所需的重要单词和短语。文本预处理基本上是告诉机器什么需要考虑、哪些可以忽略。

常用的文本预处理技术：
❏小写/大写转换
❏去噪：正则
❏文本规范化：错误拼写和缩写规范。最常见的方法是使用字典映射
❏词干提取
❏词形还原
❏标记化：分词
❏删除停止词

词嵌入

当提供数值数据作为输入时，模型执行效率最高，因此自然语言处理的关键作用是将预处理的文本数据转换为数值数据，数值数据是文本数据的数字表示。

词嵌入的含义：它们是文本实值向量形式的数值表示。具有相似含义的词映射到相似的向量，形成与具有相似含义的单词相对应的相似向量簇。

词嵌入是映射到单个单词的向量，因此只有在语料库上执行了标记化后才能生成词嵌入

Word2Vec

Word2Vec是一个浅层神经网络，只有两层，因此不具备深度学习模型的资格。输入是一个文本语料库，它用来生成矢量作为输出。这些向量被称为输入语料库中单词的特征向量。它将语料库转换成可以被深层神经网络理解的数值数据。

Word2Vec的目的是理解两个或更多单词一起出现的概率，从而将具有相似含义的单词组合在一起，在向量空间中形成一个聚类

Word2Vec针对与输入语料库中的单词相邻的单词训练单词，有两种方法：

❏连续单词袋（CBOW）
该方法基于上下文预测当前单词。因此，它将单词的周围单词作为输入来产生单词作为输出，并且它基于这个单词确实是句子的一部分的概率来选择这个单词。

CBOW基于概率工作，因此选择在特定上下文中出现概率最高的单词。这意味着它通常只预测常见和频繁的单词，因为这些单词具有最高的概率，而罕见和不频繁的单词永远不会由CBOW产生。

学习自：深入解析CSS

一种使用经验是：用rem设置字号，用px设置边框，用em设置其他大部分属性，尤其是内边距、外边距和圆角（用百分比设置容器宽度）使用无单位的值设置行高。使用自定义属性定义颜色

em

em是最常见的相对长度单位，适合基于特定的字号进行排版。在CSS中，1em等于当前元素的字号

当设置padding、height、width、border-radius等属性时，使用em会很方便。这是因为当元素继承了不同的字号，或者用户改变了字体设置时，这些属性会跟着元素均匀地缩放。

如果声明font-size: 1.2em，会发生什么呢？一个字号当然不能等于自己的1.2倍。实际上，这个font-size是根据继承的字号来计算的。

同时用它指定一个元素的字号和其他属性。这时，浏览器必须先计算字号，然后使用这个计算值去算出其余的属性值。

可能会出现嵌套列表的文字缩小的问题。于是，更好的选择是用rem设置字号

rem

rem是root em的缩写。rem不是相对于当前元素，而是相对于根元素的单位。不管在文档的什么位置使用rem,1.2rem都会有相同的计算值：1.2乘以根元素的字号。

根节点有一个伪类选择器（:root），可以用来选中它自己。这等价于类型选择器html，但是html的优先级相当于一个类名，而不是一个标签。

视口的相对单位

视口——浏览器窗口里网页可见部分的边框区域。它不包括浏览器的地址栏、工具栏、状态栏。

❑ vh：视口高度的1/100。
❑ vw：视口宽度的1/100。
❑ vmin：视口宽、高中较小的一方的1/100（IE9中叫vm，而不是vmin）。
❑ vmax：视口宽、高中较大的一方的1/100

比如，50vw等于视口宽度的一半，25vh等于视口高度的25%。vmin取决于宽和高中较小的一方，这可以保证元素在屏幕方向变化时适应屏幕。在横屏时，vmin取决于高度；在竖屏时，则取决于宽度。

学习自：白帽子讲web安全 web前端黑客技术

TOP10攻击

同源限制

影响“源”的因素有：host（域名或IP地址，如果是IP地址则看做一个根域名）、子域名、端口、协议。

对于浏览器来说，除了DOM、Cookie、XMLHttpRequest会受到同源策略的限制外，浏览器加载的一些第三方插件也有各自的同源策略。最常见的一些插件如Flash、Java Applet、Silverlight、Google Gears等都有自己的控制策略。

之前文章

在浏览器中，<script>、<img>、<iframe>、<link>等标签都可以跨域加载资源，而不受同源策略的限制。这些带“src”属性的标签每次加载时，实际上是由浏览器发起了一次GET请求。不同于XMLHttpRequest的是，通过src属性加载的资源，浏览器限制了JavaScript的权限，使其不能读、写返回的内容。

浏览器的同源策略是浏览器安全的基础

浏览器发展出了多进程架构，从安全性上有了很大的提高。

浏览器进程包括:主进程、插件进程、GPU进程、渲染进程(浏览器内核)，其中，渲染进程包括多个线程，如:GUI线程、js线程、事件触发线程、定时器线程、网络请求线程

XSS

XSS，它的全称为 Cross Site Scripting，即跨站脚本

XSS攻击，通常指黑客通过“HTML注入”篡改了网页，插入了恶意的脚本，从而在用户浏览网页时，控制用户浏览器的一种攻击。

<div><script>alert(/xss/)</script></div>

给元素添加display: flex，该元素变成了一个弹性容器（flex container），它的直接子元素变成了弹性子元素（flex item）。弹性子元素默认是在同一行按照从左到右的顺序并排排列。弹性容器像块元素一样填满可用宽度，但是弹性子元素不一定填满其弹性容器的宽度。弹性子元素高度相等，该高度由它们的内容决定。

设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

子元素按照主轴线排列，主轴的方向为主起点（左）到主终点（右）。垂直于主轴的是副轴。方向从副起点（上）到副终点（下）。这些轴的方向可以改变

学习自：JS忍者秘籍

在JavaScript中，可通过原型实现继承。

原型是定义属性和功能的一种便捷方式，对象可以访问原型上的属性和功能。原型类似于经典的面向对象语言中的类（class）。JavaScript使用new操作符，通过构造函数初始化新对象，但是没有真正的类定义。

每个对象都含有原型的引用，当查找属性时，若对象本身不具有该属性，则会查找原型上是否有该属性。

内置的方法Object.setPrototypeOf需要传入两个对象作为参数，并将第二个对象设置为第一个对象的原型。

每个对象都可以有一个原型，每个对象的原型也可以拥有一个原型，以此类推，形成一个原型链。查找特定属性将会被委托在整个原型链上，只有当没有更多的原型可以进行查找时，才会停止查找。

• 每个函数都有一个原型对象
• 每一个函数的原型都具有一个constructor属性，该属性指向函数本身。
• constructor对象的原型设置为新创建的对象的原型。

对象ninja2创建完成时，对象ninja2的原型被设置为Ninja的原型。即，我们将一个函数作为构造函数使用时，构造器的原型对象将被设置为函数的原型

1
2
3
4
5
6

函数{
  原型属性：原型对象{
                     constructor：函数本身
                     其他属性
                     }
}

学习自：深入解析CSS

层叠的规则

层叠值——作为层叠结果，应用到一个元素上的特定属性的值。

CSS 优先级法则总结：
A 选择器都有一个权值，权值越大越优先；
B 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
C 创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；
D 继承的CSS 样式不如后来指定的CSS 样式；
E 在同一组属性设置中标有“!important”规则的优先级最大；

学习自：JS权威指南

JavaScript数组的有一些特性是其他对象所没有的：

• 当有新的元素添加到列表中时，自动更新length属性。
• 设置length为一个较小值将截断数组。
• 从Array.prototype中继承一些有用的方法。
• 其类属性为“Array”。

JavaScript数组是JavaScript对象的特殊形式，使用方括号访问数组元素就像用方括号访问对象的属性一样。JavaScript将指定的数字索引值转换成字符串——索引值1变成“1”——然后将其作为属性名来使用。

JavaScript数组的索引是基于零的32位数值：第一个元素的索引为0，最大可能的索引为4294967294（2^32-2），数组最大能容纳4294967295个元素。所有的索引都是属性名，但只有在0～2^32-2之间的整数属性名才是索引。

注意，可以使用负数或非整数来索引数组。这种情况下，数值转换为字符串，字符串作为属性名来用。这意味着JavaScript数组没有“越界”错误的概念。当试图查询任何对象中不存在的属性时，不会报错，只会得到undefined值。

因为对象是属性集合，使用hashmap结构来存储，不像静态语言中数组是一块连续的区域，因此不存在数组越界的情况。查找属性名时，遍历hashmap，如果找不到匹配的属性名，返回undefined。

JavaScript数组是动态的：根据需要它们会增长或缩减，并且在创建数组时无须声明一个固定的大小或者在数组大小变化时无须重新分配空间。

• 如果为一个数组元素赋值，它的索引i大于或等于现有数组的长度时，length属性的值将设置为i+1。这时数组可能是稀疏的。

• 设置length属性为一个小于当前长度的非负整数n时，当前数组中那些索引值大于或等于n的元素将从中删除

• 在ECMAScript 5中，可以用Object.defineProperty（）让数组的length属性变成只读的

  Object.defineProperty（a, ”length“, {writable: false}）;

数组继承自Array.prototype中的属性，它定义了一套丰富的数组操作方法

学习自：深入分布式缓存

不涉及操作系统和硬件的缓存，根据在软件系统中所处位置的不同，缓存大体可以分为三类：
❑ 客户端缓存；
❑ 服务端缓存；
❑ 网络中的缓存。

缓存是系统调优时常用且行之有效的手段

主流的缓存算法

（1）Least-Recently-Used（LRU）
替换掉最近被请求最少的对象，这种传统策略在实际中应用最广。在CPU缓存淘汰和虚拟内存系统中效果很好。然而在直接应用与代理缓存中效果欠佳，因为Web访问的时间局部性常常变化很大。
浏览器就一般使用了LRU作为缓存算法。新的对象会被放在缓存的顶部，当缓存达到了容量极限，底部的对象被去除，方法就是把最新被访问的缓存对象放到缓存池的顶部。

（2）Least-Frequently-Used（LFU）
替换掉访问次数最少的缓存，这一策略意图是保留最常用的、最流行的对象，替换掉很少使用的那些数据。然而，有的文档可能有很高的使用频率，但之后再也不会用到。传统的LFU策略没有提供任何移除这类文件的机制，因此会导致“缓存污染”，即一个先前流行的缓存对象会在缓存中驻留很长时间，这样，就阻碍了新进来可能会流行的对象对它的替代。
…

客户端缓存

页面缓存

页面缓存是将之前渲染的页面保存为文件，当用户再次访问时可以避开网络连接，从而减少负载，提升性能和用户体验。随着单页面应用（Single Page Application, SPA）的广泛使用，加之HTML5支持了离线缓存和本地存储，大部分BS应用的页面缓存都可以举重若轻了。

之前的笔记

1）当浏览器访问了一个包含manifest属性的页面时，如果应用的缓存不存在，浏览器会加载文档，获取所有在清单文件中列出的文件，生成初始缓存。
2）当对该文档再次访问时，浏览器会直接从应用缓存中加载页面以及在清单文件中列出的资源。同时，浏览器还会向window.applicationCache对象发送一个表示检查的事件，以获取清单文件。
3）如果当前缓存的清单副本是最新的，浏览器将向window.applicationCache对象发送一个表示无须更新的事件，从而结束更新过程。如果在服务端修改了任何缓存资源，必须同时修改清单文件，这样浏览器才能知道要重新获取资源。
4）如果清单文件已经改变，那么文件中列出的所有文件会被重新获取并放到一个临时缓存中。对于每个加入到临时缓存中的文件，浏览器会向window.applicationCache对象发送一个表示进行中的事件。
5）一旦所有文件都获取成功，它们会自动移动到真正的离线缓存中，并向window. applicationCache对象发送一个表示已经缓存的事件。鉴于文档早已经从缓存加载到浏览器中，所以更新后的文档不会重新渲染，直到页面重新加载。

学习自：JS高程

js中引用类型也按值传递的

1
2
3
4
5
6
7
8

function setName(obj) { 
    obj.name = "Nicholas"; 
    obj = new Object(); 
    obj.name = "Greg"; }

var person = new Object(); 
setName(person); 
alert(person.name); //"Nicholas"

如果 person 是按引用传递的，那么 person 就会自动被修改为指向其 name 属性值 为”Greg”的新对象。但是，当接下来再访问 person.name 时，显示的值仍然是”Nicholas”。这说明 即使在函数内部修改了参数的值，但原始的引用仍然保持未变。实际上，当在函数内部重写 obj 时，这 个变量引用的就是一个局部对象了。而这个局部对象会在函数执行完毕后立即被销毁。

typeof 操作符确定一个变量是字符串、数值、布尔值，还是 undefined ，如果变 量的值是一个对象或 null，返回”object”

instanceof 操作符 result = variable instanceof constructor

1
2
3

alert(person instanceof Object);  // 变量 person 是 Object 吗？
alert(colors instanceof Array);   // 变量 colors 是 Array 吗？
alert(pattern instanceof RegExp);  // 变量 pattern 是 RegExp 吗？

作用域链

当代码在一个环境中执行时，会创建变量对象的一个作用域链（scope chain）。作用域链的用途，是 保证对执行环境有权访问的所有变量和函数的有序访问。作用域链的前端，始终都是当前执行的代码所 在环境的变量对象。如果这个环境是函数，则将其活动对象（activation object）作为变量对象。活动对 象在最开始时只包含一个变量，即 arguments 对象（这个对象在全局环境中是不存在的）。作用域链中 的下一个变量对象来自包含（外部）环境，而再下一个变量对象则来自下一个包含环境。这样，一直延 续到全局执行环境；全局执行环境的变量对象始终都是作用域链中的最后一个对象。

标识符解析是沿着作用域链一级一级地搜索标识符的过程。

内部环境可以通过作用域链访问所有的外部环境，但 外部环境不能访问内部环境中的任何变量和函数。

延长作用域链

对 catch 语句来说，会创建一个新的变量对象，其中包含的是被抛出的错误对象的声明。

对 with 语句来说，会将指定的对象添加到 作用域链中。

flex布局本质上是令所有子元素排列在一条轴线上，尽管在子元素较多时可以回行显示，但逻辑上仍是同一行。—— 一维

grid布局的思路是对早年间table布局的升华，即把网页看成有若干行和列的网格，然后让各元素分别与网络线对齐。—— 二维

flex布局和grid布局不是互相替代的关系，而是互相合作的关系，在一个复杂的页面中，通常用grid做全局化粗粒度的布局，然后再用flex布局对每个网格进行细粒度的布局。

注意：float，display: inline-block，display: table-cell，vertical-align 和 column-* 属性对网格项无效。