Leslie Waong

移动端适配前置基础屏幕尺寸屏幕尺寸是以屏幕对角线的长度来计量，计量单位为英寸。 像素像素（pixel），为组成一幅图像的全部亮度和色度的最小图像单元。 一幅图像通常包含成千上万个像素，每个像素都有自己的颜色信息，它们紧密地组合在一起。 由于人眼的错觉，这些组合在一起的像素被当成一幅完整的图像。 当修改图像的某区域，实际上是在修改该区域内的像素。对这些像素修改的好与坏将决定最终图片的质量。 单位面积内的像素越多，图像的效果就越好。 彩色电视图像是由成千个像素点所组成的，而且每个像素都是由红绿蓝三种颜色并排组成的。 (注意每个像素的大小是不固定的，他是根据设备的分辨率决定的) 分辨率屏幕分辨率是指纵横向上的像素点数，单位是px。 屏幕分辨率确定计算机屏幕上显示多少信息的设置，以水平和垂直像素来衡量。 就相同大小的屏幕而言，当屏幕分辨率低时（例如 640 x 480），在屏幕上显示的像素少，单个像素尺寸比较大。 屏幕分辨率高时（例如 1600 x 1200），在屏幕上显示的像素多，单个像素尺寸比较小。 设备物理分辨率（设备像素）相信我们所有前端开发者，都是见证了手机这个移动设备发展的过程。从 ...

闭包一个函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）。 也就是说，闭包让你可以在一个内层函数中访问到其外层函数的作用域。 在 JavaScript 中，每当创建一个函数，闭包就会在函数创建的同时被创建出来。 词法作用域请看下面的代码： 12345678function init() { var name = "Mozilla"; // name 是一个被 init 创建的局部变量 function displayName() { // displayName() 是内部函数，一个闭包 alert(name); // 使用了父函数中声明的变量 } displayName();}init(); init() 创建了一个局部变量 name 和一个名为 displayName() 的函数。displayName() 是定义在 init() 里的内部函数，并且仅在 init() 函数体内可用。请注意，display ...

Cookie、sessionStorage、localStorage 详解及应用场景Cookie HTTP本质是无状态的，使用Cookies可以创建有状态的会话。 HTTP Cookie（也叫 Web Cookie 或浏览器 Cookie）是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。 通常，它用于告知服务端两个请求是否来自同一浏览器，如保持用户的登录状态。Cookie 使基于无状态的HTTP协议记录稳定的状态信息成为了可能。 Cookie 主要用于以下三个方面： 会话状态管理（如用户登录状态、购物车、游戏分数或其它需要记录的信息） 个性化设置（如用户自定义设置、主题等） 浏览器行为跟踪（如跟踪分析用户行为等） Cookie 曾一度用于客户端数据的存储，因当时并没有其它合适的存储办法而作为唯一的存储手段，但现在随着现代浏览器开始支持各种各样的存储方式，Cookie 渐渐被淘汰。由于服务器指定 Cookie 后，浏览器的每次请求都会携带 Cookie 数据，会带来额外的性能开销（尤其是在移动环境下）。新的浏览器AP ...

CSS盒模型、BFC和清除浮动 在 CSS 中，所有的元素都被一个个的“盒子（box）”包围着，理解这些“盒子”的基本原理，是我们使用CSS实现准确布局、处理元素排列的关键。 块级盒子（Block box） 和 内联盒子（Inline box）在 CSS 中我们广泛地使用两种“盒子” —— 块级盒子 (block box) 和 内联盒子 (inline box)。这两种盒子会在页面流（page flow）和元素之间的关系方面表现出不同的行为: 一个被定义成块级的（block）盒子会表现出以下行为: 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽 每个盒子都会换行 width和 height 属性可以发挥作用 内边距（padding）, 外边距（margin） 和 边框（border） 会将其他元素从当前盒子周围“推开” 除非特殊指定，诸如标题(<h1>等)和段落(<p>)默认情况下都是块级的盒子。 如果一个盒子对外显示为 inline，那么他的行为如下: 盒子不会产生换行。 width和 heig ...

基于类 vs 基于原型的语言基于类的面向对象语言，比如 Java 和 C++，是构建在两个不同实体之上的：类和实例。 一个类(class)定义了某一对象集合所具有的特征性属性（可以将 Java 中的方法和域以及 C++ 中的成员都视作属性）。类是抽象的，而不是其所描述的对象集合中的任何特定的个体。例如 Employee 类可以用来表示所有雇员的集合。 另一方面，一个实例(instance)是一个类的实例化。例如， Victoria 可以是 Employee 类的一个实例，表示一个特定的雇员个体。实例具有和其父类完全一致的属性，不多也不少。 基于原型的语言（如 JavaScript）并不存在这种区别：它只有对象。 基于原型的语言具有所谓**原型对象(prototypical object)**的概念。 原型对象可以作为一个模板，新对象可以从中获得原始的属性。 任何对象都可以指定其自身的属性，既可以是创建时也可以在运行时创建。 而且，任何对象都可以作为另一个对象的原型(prototype)，从而允许后者共享前者的属性。 定义类在基于类的语言中，需要专门的类定义(class defini ...

Express直接用Node.js内置的 http 模块去开发服务器有以下明显的弊端： 需要写很多底层代码——例如手动指定 HTTP 状态码和头部字段，最终返回内容。如果我们需要开发更复杂的功能，涉及到多种状态码和头部信息（例如用户鉴权），这样的手动管理模式非常不方便 没有专门的路由机制——路由是服务器最重要的功能之一，通过路由才能根据客户端的不同请求 URL 及 HTTP 方法来返回相应内容。但是上面这段代码只能在 http.createServer 的回调函数中通过判断请求 req 的内容才能实现路由功能，搭建大型应用时力不从心 由此就引出了 Express 对内置 http 的两大封装和改进： 更强大的请求（Request）和响应（Response）对象，添加了很多实用方法 灵活方便的路由的定义与解析，能够很方便地进行代码拆分 用 Express 搭建服务器在第一步中，我们把服务器放在了一个JS文件中，也就是一个Node模块。从现在开始，我们将把这个项目变成一个npm项目。输入以下命令创建 npm 项目： 1npm init 接着你可以一路回车下去（当然也可以仔细填）， ...

Cookie、Session、Token、JWTSession & CookieHTTP Cookie（也叫 Web Cookie 或浏览器 Cookie）是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。 通常，它用于告知服务端两个请求是否来自同一浏览器，如保持用户的登录状态。Cookie 使基于无状态的HTTP协议记录稳定的状态信息成为了可能。 Cookie 主要用于以下三个方面： 会话状态管理（如用户登录状态、购物车、游戏分数或其它需要记录的信息） 个性化设置（如用户自定义设置、主题等） 浏览器行为跟踪（如跟踪分析用户行为等） session 是另一种记录服务器和客户端会话状态的机制。 session 是基于cookie 实现的，session 存储在服务器端，sessionId 会被存储到客户端的cookie 中。 第一次创建Session的时候，服务端会在HTTP协议中告诉客户端，需要在 Cookie 里面记录一个Session ID，以后每次请求把这个会话ID发送到服务器，我就知道你是谁了。 Se ...

XSS和CSRFXSS攻击什么是 XSSCross-Site Scripting（跨站脚本攻击）简称 XSS，是一种代码注入攻击。 攻击者通过在目标网站上注入恶意脚本，使之在用户的浏览器上运行。利用这些恶意脚本，攻击者可获取用户的敏感信息如Cookie、SessionID 等，进而危害数据安全。 所以,网页上哪些部分会引起XSS攻击?简单来说,任何可以输入的地方都有可能引起,包括URL! XSS 常见的注入方法： 在 HTML 中内嵌的文本中，恶意内容以 script 标签形成注入。 在内联的 JavaScript 中，拼接的数据突破了原本的限制（字符串，变量，方法名等）。 在标签属性中，恶意内容包含引号，从而突破属性值的限制，注入其他属性或者标签。 在标签的 href、src 等属性中，包含 javascript: (伪协议)等可执行代码。 在 onload、onerror、onclick 等事件中，注入不受控制代码。 在 style 属性和标签中，包含类似 background-image:url("javascript:..."); 的代码（新版本浏览器已经 ...

跨域通信同源策略和跨域同源策略：限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。 同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSRF等攻击。所谓同源是指”协议+域名+端口“三者相同，即便两个不同的域名指向同一个ip地址，也非同源。 同源策略限制内容有： Cookie、LocalStorage、IndexedDB 等存储性内容 DOM 节点 AJAX 请求 但是有的标签是允许跨域加载资源： <img src=XXX> <link href=XXX> <script src=XXX> 当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。不同域之间相互请求资源，就算作“跨域”。 特别说明两点： 第一：如果是协议和端口造成的跨域问题“前台”是无能为力的。 第二：在跨域问题上，仅仅是通过“URL的首部”来识别而不会根据域名对应的IP地址是否相同来判断。“URL的首部”可以理解为“协议, 域名和端口必须匹配”。 这里你或许有个 ...

从URL输入到页面展现到底发生什么？ 总体来说分为以下几个过程: 解析URL并生成请求报文 DNS 解析：将域名解析成IP地址 TCP 三次握手、TLS三次握手 =》在HTTPS上建立安全连接 发送HTTP请求 服务器处理请求并返回 HTTP 报文 浏览器解析渲染页面 断开连接：TCP四次挥手 URL解析并生成HTTP请求消息首先浏览器做的第一步工作就是要对URL进行解析，从而生成发送给Web服务器的请求信息。 URL是什么？ URI 和 URL URI(Uniform Resource Identifier) 是统一资源标志符，可以唯一标识一个资源。 URL(Uniform Resource Locator) 是统一资源定位符，可以提供该资源的路径。它是一种具体的 URI，即 URL 可以用来标识一个资源，而且还指明了如何 locate 这个资源。 URI 的作用像身份证号一样，URL 的作用更像家庭住址一样。URL 是一种具体的 URI，它不仅唯一标识资源，而且还提供了定位该资源的信息。 URL遵守以下的语法规则：scheme://host.domain:port/pat ...

HTTP相关内容HTTP基本概念HTTP是超文本传输协议，也就是HyperText Transfer Protocol。 HTTP是一个在计算机世界里专门在「两点」之间「传输」文字、图片、音频、视频等「超文本」数据的「约定和规范」。 那HTTP是用于从互联网服务器传输超文本到本地浏览器的协议，这种说法正确吗? 这种说法是不正确的。因为也可以是「服务器<–>服务器」﹐所以采用两点之间的描述会更准确。 HTTP报文的组成部分 在回答此问题时，我们要按照顺序回答： 先回答的是，http报文包括：请求报文和响应报文。 再回答的是，每个报文包含什么部分。 最后回答，每个部分的内容是什么 请求报文包括： 请求行：包括请求方法、请求的URL、HTTP协议及版本。 请求头：一大堆的键值对。 空行指的是：当服务器在解析请求头的时候，如果遇到了空行，则表明，后面的内容是请求体。 请求体：数据部分。 常见字段有哪些?Host字段客户端发送请求时，用来指定服务器的域名。 1Host: www .A.com 有了Host字段，就可以将请求发往同一台服务器上的不同网站。 C ...

异步通常来说，程序都是顺序执行，同一时刻只会发生一件事。如果一个函数依赖于另一个函数的结果，它只能等待那个函数结束才能继续执行，从用户的角度来说，整个程序才算运行完毕. 这是令人沮丧的体验，没有充分利用计算机的计算能力 — 尤其是在计算机普遍都有多核CPU的时代，坐在那里等待毫无意义，你完全可以在另一个处理器内核上干其他的工作，同时计算机完成耗时任务的时候通知你。这样你可以同时完成其他工作，这就是异步编程的出发点。你正在使用的编程环境（就web开发而言，编程环境就是web浏览器）负责为你提供异步运行此类任务的API。 产生阻塞的代码异步技术非常有用，特别是在web编程。当浏览器里面的一个web应用进行密集运算还没有把控制权返回给浏览器的时候，整个浏览器就像冻僵了一样，这叫做阻塞；这时候浏览器无法继续处理用户的输入并执行其他任务，直到web应用交回处理器的控制。 为什么是这样? 答案是：JavaScript一般来说是单线程的（single threaded）。接着我们来介绍线程的概念。 线程一个线程是一个基本的处理过程，程序用它来完成任务。每个线程一次只能执行一个任务: 1Task A ...