ajax 的过程是什么？
1. 创建XMLHttpRequest对象,也就是创建一个异步调用对象
2. 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
3. 设置响应HTTP请求状态变化的函数
4. 发送HTTP请求
5. 获取异步调用返回的数据
6. 使用JavaScript和DOM实现局部刷新
javascript继承的几种方法
1. 原型链继承
2. 借用构造函数继承
3. 组合继承(原型+借用构造)
4. 原型式继承
5. 寄生式继承
6. 寄生组合式继承
平时我们该如何管理项目，如下：
1. 先期团队必须确定好全局样式（globe.css），编码模式(utf-8) 等
2. 编写习惯必须一致（例如都是采用继承式的写法，单样式都写成一行）
3. 标注样式编写人，各模块都及时标注（标注关键样式调用的地方）
4. 页面进行标注（例如 页面 模块 开始和结束）
5. CSS 跟 HTML 分文件夹并行存放，命名都得统一（例如 style.css）
6. JS 分文件夹存放 命名以该 JS 功能为准的英文翻译
7. 图片采用整合的 images.png png8 格式文件使用 尽量整合在一起使用方便将来的管理
http状态码有那些？分别代表是什么意思？
1. 100-199 用于指定客户端应响应的某些动作
2. 200-299 用于表示请求成功
3. 300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息
4. 400-499 用于指出客户端的错误
400：语义有误，当前请求无法被服务器理解
401：当前请求需要用户验证
403：服务器已经理解请求，但是拒绝执行它
5. 500-599 用于指出服务器错误
503：服务不可用
前端如何做性能优化？
1. 减少http请求次数：CSS Sprites, JS、CSS 源码压缩、图片大小控制合适；网页 Gzip，CDN 托管，data 缓存 ，图片服务器
2. 前端模板 JS + 数据，减少由于HTML标签导致的带宽浪费，前端用变量保存 AJAX 请求结果，每次操作本地变量，不用请求，减少请求次数
3. 用 innerHTML 代替 DOM 操作，减少 DOM 操作次数，优化 javascript 性能
4. 当需要设置的样式很多时设置 className 而不是直接操作 style
5. 少用全局变量、缓存DOM节点查找的结果。减少 IO 读取操作
6. 避免使用 CSS Expression（css表达式)又称 Dynamic properties(动态属性)
7. 图片预加载，将样式表放在顶部，将脚本放在底部，加上时间戳
js延迟加载的方式有哪些？
1. defer和async
2. 动态创建DOM方式（创建script，插入到DOM中，加载完毕后callBack）
3. 按需异步载入js
什么是内存泄漏？哪些操作会造成内存泄漏？
内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
造成内存泄漏的操作：
1. setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
2. 闭包
3. 控制台日志
4. 循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）
什么是 FOUC？如何来避免 FOUC？
FOUC - Flash Of Unstyled Content 文档样式闪烁
<style type="text/css" media="all">@import "../test.css";</style>
造成文档样式闪烁的原因就是引用CSS文件的@import，浏览器会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，
因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。
解决方法也比较简单，在<head>之间加入一个<link>或者<script>元素就行了。
new操作符具体干了什么呢?
1. 创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型
2. 属性和方法被加入到 this 引用的对象中
3. 新创建的对象由 this 所引用，并且最后隐式的返回 this
var obj = {};
obj.__proto__ = Base.prototype;
Base.call(obj);
减少页面加载时间的方法有哪些？
1. 优化图片
2. 图像格式的选择（GIF：提供的颜色较少，可用在一些对颜色要求不高的地方）
3. 优化CSS（压缩合并css，如 margin-top, margin-left...)
4. 网址后加斜杠（如http://www.baidu.com/目录，会判断这个目录是什么文件类型，或者是目录。）
5. 标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。
当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了）
6. 减少http请求（合并文件，合并图片）
webSocket 如何兼容低浏览器？
Adobe Flash Socket
ActiveX HTMLFile (IE)
基于 multipart 编码发送 XHR
基于长轮询的 XHR
iframe 的优点和缺点分别是什么？
优点：
1. 解决加载缓慢的第三方内容如图标和广告等的加载问题
2. Security sandbox
3. 并行加载脚本
缺点：
1. iframe会阻塞主页面的Onload事件
2. 即使内容为空，加载也需要时间
3. 没有语意
IE 8以下版本的浏览器中的盒模型有什么不同
IE8以下浏览器的盒模型中定义的元素的宽高包括内边距和边框
DOM操作—怎样创建、添加、移除、移动、复制、创建和查找节点。
创建新节点：
createDocumentFragment() // 创建一个DOM片段
createElement() // 创建一个具体的元素
createTextNode() // 创建一个文本节点
添加、移除、替换、插入：
appendChild() // 添加
removeChild() // 移除
replaceChild() // 替换
insertBefore() // 在已有的子节点前插入一个新的子节点
查找：
getElementsByTagName() // 通过标签名称
getElementsByName() // 通过元素的Name属性的值
getElementById() // 通过元素Id，唯一性
Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
Doctype作用：
<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器以何种模式来渲染文档。
严格模式与混杂模式的区分：
严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
意义：
DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
CSS sprites 是什么？如何在页面或网站中使用它？
CSS Sprites 是一种网页图片应用处理方式，在国内很多人叫 css 精灵。
CSSSprites把网页中一些背景图片整合到一张图片文件中，再利用 CSS 的"background-image"，"background-repeat"，"background-position" 的组合进行背景定位，background-position 可以用数字能精确的定位出背景图片的位置。
这样可以减少很多图片请求的开销，因为请求耗时比较长；请求虽然可以并发，但是也有限制，一般浏览器都是6个。
对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。
position的absolute与fixed共同点与不同点
共同点：
1、改变行内元素的呈现方式，display被置为inline-block；
2、让元素脱离普通流，不占据空间；
3、默认会覆盖到非定位元素上
不同点：
absolute的”根元素“是可以设置的，而fixed的”根元素“固定为浏览器窗口；
当你滚动网页，fixed元素与浏览器窗口之间的距离是不变的。
线程与进程的区别
1. 一个程序至少有一个进程,一个进程至少有一个线程；
2. 线程的划分尺度小于进程，使得多线程程序的并发性高；
3. 进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率；
4. 每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制；
5. 从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看作多个独立的应用，来实现进程的调度和管理以及资源分配。
HTTP（HyperText Transfer Protocol：超文本传输协议）是一种用于分布式、协作式和超媒体信息系统的应用层协议。
简单来说就是一种发布和接收 HTML 页面的方法，被用于在 Web 浏览器和网站服务器之间传递信息。HTTPS和HTTP的区别：
1、https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。
2、http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。
3、http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
4、http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全HTTP特点：
1. 无状态：协议对客户端没有状态存储，对事物处理没有“记忆”能力，比如访问一个网站需要反复进行登录操作
2.
无连接：HTTP/1.1之前，由于无状态特点，每次请求需要通过TCP三次握手四次挥手，和服务器重新建立连接。比如某个客户机在短时间多次请求同一个资源，服务器并不能区别是否已经响应过用户的请求，所以每次需要重新响应请求，需要耗费不必要的时间和流量。
3. 基于请求和响应：基本的特性，由客户端发起请求，服务端响应
4. 简单快速、灵活
5. 通信使用明文、请求和响应不会对通信方进行确认、无法保护数据的完整性HTTPS有如下特点：
1. 内容加密：采用混合加密技术，中间者无法直接查看明文内容
2. 验证身份：通过证书认证客户端访问的是自己的服务器
3. 保护数据完整性：防止传输的内容被中间人冒充或者篡改
HTTP 四个常用请求方法
四个常用请求方法：GET、POST、PUT、DELETE
功能：
GET: 请求指定的页面信息，并返回实体主体。
POST: 向指定资源提交数据进行处理请求,数据被包含在请求体中;POST 请求可能会导致新的资源的建立或已有资源的修改。
PUT: 从客户端向服务器传送的数据取代指定的文档的内容。
DELETE: 请求服务器删除指定的页面。
常用 HTTP 状态码
100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息
200 OK 正常返回信息
201 Created 请求成功并且服务器创建了新的资源
202 Accepted 服务器已接受请求，但尚未处理
301 Moved Permanently 请求的网页已永久移动到新位置
302 Found 临时性重定向
303 See Other 临时性重定向，且总是使用 GET 请求新的 URI
304 Not Modified 自从上次请求后，请求的网页未修改过
400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求
401 Unauthorized 请求未授权
403 Forbidden 禁止访问
404 Not Found 找不到如何与 URI 相匹配的资源
500 Internal Server Error 最常见的服务器端错误
503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）
遍历数组的方式有哪些？
1、普通 for 循环
2、foreach 循环
3、for in 循环
4、map 遍历
5、for of 遍历
如上，在 javascript 比较常用的几种方式，但不仅限于这几种，例如还有 reduce、filter 等
Node的优点和缺点是什么？优点：
1. 因为Node是基于事件驱动和无阻塞的，所以非常适合处理并发请求，因此构建在Node上的代理服务器相比其他技术实现的服务器表现要好得多。
2. 与Node代理服务器交互的客户端代码是由javascript语言编写的，因此客户端和服务器端都用同一种语言编写，这是非常美妙的事情。缺点：
1. Node是一个相对新的开源项目，所以不太稳定，它总是一直在变。
2. 缺少足够多的第三方库支持。
Node.js 有哪些使用场景吗？
1. 高并发
2. 聊天
3. 实时消息推送
CSS3有哪些新特性值呢？
1. CSS3实现圆角（border-radius），阴影（box-shadow），
2. 对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
3. transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜
4. 增加了更多的CSS选择器 多背景 rgba
5. 在CSS3中唯一引入的伪类是 ::selection.
6. 媒体查询，多栏布局
7. border-image
如何理解 BFC 规范的呢？
BFC 是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行布局，以及与其他元素的关系和相互作用。
BFC，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。
在同一个 BFC 中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的 margin 会发生折叠。
null 表示没有对象，转化为数值时为 0
undefined 表示缺少值，转化为数值时为 NaNundefined 典型用法：
1. 变量被声明了，但没有赋值时，就等于 undefined
2. 调用函数时，应该提供的参数没有提供，该参数等于 undefined
3. 对象没有赋值的属性，该属性的值为 undefined
4. 函数没有返回值时，默认返回 undefinednull 典型用法：
1. 作为函数的参数，表示该函数的参数不是对象
2. 作为对象原型链的终点
你如何向非技术背景的利益相关者解释 API 的概念？
API 是不同软件产品之间的通信使者。它让各个软件系统之间可以相互通信和同步。
例如，你可以使用 Facebook 的 API 在你自己的网站上显示你在 Facebook 发布的帖子，并允许人们直接在你的网站上共享或评论你的帖子，无需切换到 Facebook 上。
Sql脚本注入原理是什么？如何防止脚本注入？
主要原理：
通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令
防止：
1、使用预编译，绑定变量，避免出现执行拼接字符的情况；
2、过滤特殊字符和语句；
3、页面不错误回显。
前端如何做优化
了解了浏览器渲染界面的过程其实对于前端的优化就有思路了
1、css 放在文件头部，javascript 放在底部；
2、尽量减少 http 请求次数；
3、善用缓存不要重复加载相同的资源，比如用户登录之后的用户信息等；
4、图片优化，采用图片懒加载，在页面开始加载的时候，不请求真实图片地址，而是用默认图占位，当前页面加载完成后，在根据相关的条件依次加载真实图片；
5、降低css选择器的复杂性，尽量使用 id 和 class。
以上只是几种比较典型的优化方式，除了这些还有很多细节的优化。
在浏览器中 从输入地址到最终的页面渲染完成 发生了什么，经过哪几部分？
1、DNS 域名解析，把域名解析成 ip 地址；
2、通过 tcp 协议与服务器握手跟服务器建立链接；
3、浏览器向服务器发送请求；
4、服务器响应，若状态码为 200 浏览器接受返回的HTML页面开始渲染；
5、浏览器深度遍历 HTML 节点生成 dom 树；
6、解析 css dom 树并应用他们；
7、js 根据新的渲染树计算各个节点的位置。
算法小知识
var a = 5;
var b = 10;
a 和 b 变量互换
第一种 建中间变量
第二种 异或 a = a^b; b=a^b; a=a^b
第三种 a = a + b; b = a - b; a = a - b;
第四种 console.log("a="+b);console.log("b="+a);
第五种 a=[b，b=a][0];
第六种 var [a,b] = [b,a]
f1(); //调用方法 f1,方法被执行，此时 a 是局部变量，外部不能访问，b 和 c 是隐式全局变量，外部可以访问
console.log(c); // 隐式全局变量，外部可以访问，输出 2
console.log(b); // 隐式全局变量，外部可以访问，输出 2
console.log(a); // 局部变量，方法外部不能访问，报错
function f1(){ // f1 方法
// 方法中定义的变量为局部变量，var a=b=c=2,相当于 var a=2, b=2, c=2
// 声明变量没有 var，b=2 这样赋值的变量为隐式全局变量，在方法外部也能访问
// 所以 a 有且仅能在方法内部访问，b 和 c 可以在方法外面访问
var a=b=c=2
console.log(a); // 输出 2
console.log(b); // 输出 2
console.log(c); // 输出 2
}
display 值的作用和 position 取值的区别？
display 值的作用：
1.block 像块类型元素一样显示。
2.inline 缺省值。像行内元素类型一样显示。
3.inline-block 像行内元素一样显示，但其内容像块类型元素一样显示。
4.list-item 像块类型元素一样显示，并添加样式列表标记。
position 值的定位区别：
1.absolute 生成绝对定位的元素，相对于 static 定位以外的第一个祖先元素进行定位。
2.fixed 生成固定定位的元素，相对于浏览器窗口进行定位（老IE不支持）。
3.relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。
4.static 默认值。没有定位，元素出现在正常的流中。
5.inherit 规定从父元素继承 position 属性的值。
CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？CSS 选择符：
1.id选择器(# myid)
2.类选择器(.myclassname)
3.标签选择器(div, h1, p)
4.相邻选择器(h1 + p)
5.子选择器(ul > li)
6.后代选择器(li a)
7.通配符选择器( * )
8.属性选择器(a[rel = "external"])
9.伪类选择器(a: hover, li:nth-child)可继承的属性：
1.font-size
2.font-family
3.color
4.text-indent优先级算法：
1.优先级就近原则，同权重情况下样式定义最近者为准;
2.载入样式以最后载入的定位为准;
3.!important > id > class > tag
4.important 比 内联优先级高，但内联比 id 要高
什么是回流和重绘？回流和重绘的区别是什么？
当render tree中的一部分(或全部)因为元素的规模尺寸、布局、隐藏等改变而需要重新构建，这就称为回流(reflow)。
当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。
回流必将引起重绘，而重绘不一定会引起回流。
display:none和visibility:hidden的区别？
display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，
就当他从来不存在。
visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。
原文作者：学致编程
原文链接：你平常忽略的前端知识总结
原文出处：公众号
289
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
