本文涵盖了前端开发中的多个重要概念，包括HTTP缓存策略，介绍了本地缓存和缓存协商，强调了缓存对网站性能的提升。此外，还讨论了Flex布局、TCP三次握手、JavaScript延迟加载方法、移动消息推送机制、Android四大组件、WebSocket协议以及前端性能优化技术如CSS3的线性渐变和CSS雪碧图。文章还涉及了JavaScript事件处理、DOM操作、严格模式以及CSS3新增的选择器。最后，文章提到了二叉树遍历和HTTP与TCP/IP协议的关系。
HTTP缓存策略
浏览器一般缓存图片、CSS、JS等静态文件，因为这些文件的更新频率相对来说比较低，合理利用浏览器的缓存对网站的性能提升有很大帮助。HTTP缓存分为两部分，分别是本地缓存和缓存协商，当本地缓存不生效时会启用缓存协商。HTTP缓存主要由HTTP协议的头（Header）信息来制定。
Flex布局
Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。
TCP三次握手（百度百科）
第一次握手：建立连接时，客户端发送syn包（syn=j）到服务器，并进入SYN_SENT状态，等待服务器确认；SYN：同步序列编号（Synchronize Sequence Numbers）。
第二次握手：服务器收到syn包，必须确认客户的SYN（ack=j+1），同时自己也发送一个SYN包（syn=k），即SYN+ACK包，此时服务器进入SYN_RECV状态；
第三次握手：客户端收到服务器的SYN+ACK包，向服务器发送确认包ACK(ack=k+1），此包发送完毕，客户端和服务器进入ESTABLISHED（TCP连接成功）状态，完成三次握手。
延时加载JavaScript代码提高速度
1、setTimeout
2、将JS代码放在网页内容的后面
3、defer
defer和async的区别
移动手机消息推送机制
对于消息的提醒方式可以分为四种：固定窗口、弹出窗口、手机短信和Push信息
Android四大基本组件分别是Activity，Service服务,Content Provider内容提供者，BroadcastReceiver广播接收器。
XMPP（百度百科）
可扩展通讯和表示协议 (XMPP) 可用于服务类实时通讯、表示和需求响应服务中的XML数据元流式传输。XMPP以Jabber协议为基础，而Jabber是即时通讯中常用的开放式协议
轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP request，然后由服务器返回最新的数据给客户端的浏览器。这种传统的HTTP request 的模式带来很明显的缺点 – 浏览器需要不断的向服务器发出请求，然而HTTP request 的header是非常长的，里面包含的有用数据可能只是一个很小的值，这样会占用很多的带宽。
Comet：基于 HTTP 长连接的“服务器推”技术
http://www.ibm.com/developerworks/cn/web/wa-lo-comet/
两种 Comet 应用的实现模型
基于 AJAX 的长轮询（long-polling）方式
AJAX 的出现使得 JavaScript 可以调用 XMLHttpRequest 对象发出 HTTP 请求，JavaScript 响应处理函数根据服务器返回的信息对 HTML 页面的显示进行更新。使用 AJAX 实现“服务器推”与传统的 AJAX 应用不同之处在于：
- 服务器端会阻塞请求直到有数据传递或超时才返回。
- 客户端 JavaScript 响应处理函数会在处理完服务器返回的信息后，再次发出请求，重新建立连接。
- 当客户端处理接收的数据、重新建立连接时，服务器端可能有新的数据到达；这些信息会被服务器端保存直到客户端重新建立连接，客户端会一次把当前服务器端所有的信息取回。
基于 Iframe 及 htmlfile 的流（streaming）方式
通过在 HTML 页面里嵌入一个隐蔵帧，然后将这个隐蔵帧的 SRC 属性设为对一个长连接的请求，服务器端就能源源不断地往客户端输入数据
iframe 服务器端返回对客户端 Javascript 函数的调用。服务器端将返回的数据作为客户端 JavaScript 函数的参数传递；客户端浏览器的 Javascript 引擎在收到服务器返回的 JavaScript 调用时就会去执行代码。每次数据传送不会关闭连接，连接只会在通信出现错误时，或是连接重建时关闭
WebSocket protocol 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信(full-duplex)。一开始的握手需要借助HTTP请求完成。浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送
浏览器渲染阻塞与优化-详解推迟加载、异步加载。
利用原生js实现事件绑定函数，事件解绑函数
1/0 0&&'a' new Number(1) 'a'-1运算结果都不是number类型
WEB应用从服务器主动推送Data到客户端有那些方式？
html5 websoket
WebSocket通过Flash
XHR长时间连接
XHR Multipart Streaming
不可见的Iframe
<script>标签的长时间连接(可跨域)
javascript 事件处理 IE和标准dom 的差别
IE中DOM0级事件处理程序跟DOM2级事件处理程序中作用域（this）的区别
JS容易犯错的this和作用域
使用不同的引用来调用同一个函数时,this 指针永远是这个引用所属的对象
在一个函数中，this总是指向
当前函数的所有者对象， this 总是在运行时才能确定其具体的指向, 也才能知道它的调用对象。
HTML5 中的新类型：color, date, datetime, datetime-local, month, week, time, email, number, range, search, tel 以及 url。
Javascript 严格模式（strict mode）详解
设立"严格模式"的目的，主要有以下几个：
- 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
- 消除代码运行的一些不安全之处，保证代码运行的安全；
- 提高编译器效率，增加运行速度；
- 为未来新版本的Javascript做好铺垫。
进入"严格模式"的标志，是下面这行语句："use strict";
严格模式对Javascript的语法和行为，都做了一些改变。
在正常模式中，如果一个变量没有声明就赋值，默认是全局变量。严格模式禁止这种用法，全局变量必须显式声明。严格模式下，变量都必须先用var命令声明，然后再使用。
CSS3 线性渐变
CSS3 Gradient 分为 linear-gradient（线性渐变）和 radial-gradient（径向渐变）
理解js中的new
如果执行var obj = new Base();
new做了以下三件事：（完全看不懂）
var obj = {};
obj.__proto__ = Base.prototype;
Base.call(obj);
第一行，我们创建了一个空对象obj
第二行，我们将这个空对象的__proto__成员指向了Base函数对象prototype成员对象
第三行，我们将Base函数对象的this指针替换成obj，然后再调用Base函数，于是我们就给obj对象赋值了一个id成员变量，这个成员变量的值是”base”
ECMAScript 6: 使用 Object.assign() 合并对象
http://www.tuicool.com/articles/VF3Uf2E
原生JS：Math对象详解
http://www.cnblogs.com/susufufu/p/5846306.html
bgcolor 属性规定规定表格的背景颜色。
左边固定，右边自适应及左边自适应，右边固定布局的几种方法
用flex实现
<div class="main">
<div class="left1"></div>
<div class="right1"></div>
</div>
.main{
display: flex;
flex-direction: row;
}
.left1{
width: 200px;
height: 200px;
background-color: yellow;
}
.right1{
flex:1;
height: 200px;
background-color: black;
}
CSS3新增属性选择器
http://www.cnblogs.com/libingql/p/4375354.html
E[foo^="bar"]选择匹配E的元素，且该元素定义了foo属性，foo属性值以“bar”开始。E选择符可以省略，表示可匹配任意类型的元素。
E[foo$="bar"]选择匹配E的元素，且该元素定义了foo属性，foo属性值以“bar”结束。E选择符可以省略，表示可匹配任意类型的元素。
E[foo*="bar"]选择匹配E的元素，且该元素定义了foo属性，foo属性值包含“bar”。E选择符可以省略，表示可匹配任意类型的元素。
escape() 函数可对字符串进行编码，这样就可以在所有的计算机上读取该字符串。
如果用户点击确定按钮，则 confirm() 返回 true。如果点击取消按钮，则 confirm() 返回 false。http://www.jb51.net/article/39758.htm
二叉树的遍历大概分为四种，分别是前序遍历，中序遍历，后序遍历，按层遍历，
前序遍历：根节点------左子树------右子树
中序遍历就是先访问左子树---根节点--右子树
后序遍历，先访问树的左子树---右子树---根节点
按层遍历，这一种遍历其实是最简单的，就是把一棵树从上到下，从左到右依次写出来
HTTP协议和TCP/IP协议的关系
慕课网学习（JavaScript进阶篇）
二维数组的表示: myarray[ ][ ]
注意: 二维数组的两个维度的索引值也是从0开始，两个维度的最后一个索引值为长度-1。
1. 二维数组的定义方法一
var myarr=new Array(); //先声明一维
for(var i=0;i<2;i++){ //一维长度为2
myarr[i]=new Array(); //再声明二维
for(var j=0;j<3;j++){ //二维长度为3
myarr[i][j]=i+j; // 赋值，每个数组元素的值为i+j
}
}
2. 二维数组的定义方法二
var Myarr = [[0 , 1 , 2 ],[1 , 2 , 3]]
3. 赋值
myarr[0][1]=5; //将5的值传入到数组中，覆盖原有值。
说明: myarr[0][1] ,0 表示表的行，1表示表的列。
window对象是BOM的核心，window对象指当前的浏览器窗口。
扫一扫
1761
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
