blog
blog copied to clipboard
aermin
📝 My blog / notes
> 前言 : 网上写连接和轮询的文章鱼龙混杂，看了十几篇后做出自己的总结。如果有误，恳请指出。 ### 短轮询 `概念`：客户端定时向服务器发送Ajax请求，服务器接到请求后马上返回响应信息并关闭连接。 `优点`：后端程序编写比较容易。 `缺点`：请求中有大半是无用，浪费带宽和服务器资源。 `实例`：适于小型应用。 `前端核心代码`： 有问题版：周期调用 ```js setInterval(function() { $.get("/path/to/server", function(data, status) { console.log(data); }); }, 10000); ``` 问题所在：在网络情况不稳定的情况下，服务器从接收请求、发送请求到客户端接收请求的总时间有可能超过10秒，而请求是以10秒间隔发送的，这样会导致接收的数据到达先后顺序与发送顺序不一致。 修正版：递归调用 首先设置10s后发起请求，当数据返回后，递归调用请求函数再隔10s发起第二次请求，以此类推。这样的话虽然无法保证两次请求之间的时间间隔为固定值，但是可以保证到达数据的顺序。 ```js function poll()...
### 圣杯布局 ```html main left right ``` ```css .wrapper { padding: 0 120px 0 100px; overflow: hidden; } .col { position: relative; float: left; } .main { width: 100%; background-color:...
## cookie cookie是指Web浏览器存储的少址数据。 Cookie支持跨域名访问，例如将domain属性设置为“.biaodianfu.com”，则以“.biaodianfu.com”为后缀的一切域名均能够访问该Cookie。跨域名Cookie如今被普遍用在网络中，例如Google、Baidu、Sina等。 #### 浏览器使用 cookie可以使用 js 在浏览器直接设置（用于记录不敏感信息，如用户名） 大小和数量会有限制 如果没有设置有效期，那就是会话储存，关了浏览器就没了。 尽管浏览器对cookie做了大小限制，不过最好还是尽可能在coki中少存储信息，以免避免影响性能。 #### 前后端协同使用 cookie数据会自动在Web浏览器和Web服务器之间传输，在服务端通使用 HTTP 协议规定的 set-cookie 来让浏览器种下cookie，每次网络请求 Request headers 中都会带上cookie。所以如果 cookie 太多太大对传输效率会有影响。 因此服务端脚本就可以 读、 写存储在客户端的 cookie的值。 前后端协同使用流程 ...
## 为啥要用图片懒加载 对页面加载速度影响最大的就是图片，一张普通的图片可以达到几M的大小，而代码也许就只有几十KB。当页面图片很多时，页面的加载速度缓慢，几S钟内页面没有加载完成，也许会失去很多的用户。 所以，对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升，也提高了用户体验。 ## 原理 将页面中的img标签src指向一张小图片或者src为空，然后定义data-src（这个属性可以自定义命名，我才用data-src）属性指向真实的图片。src指向一张默认的图片，否则当src为空时也会向服务器发送一次请求（指向默认的一张图那就只需请求一次）。可以指向loading的地址。当载入页面时，先把可视区域内的img标签的data-src属性值赋值给src，然后监听滚动事件，加载用户即将看到的图片（利用图片出现时距离顶部的高度小于 滚动条距离顶部的高度+可视区的高度）。  * ps：图片要指定宽高 关于窗口各种宽度，给出网上找的一张好图  > 如果仍不是很理解，看这两篇文章 [scrollWidth,clientWidth,offsetWidth的区别](http://www.cnblogs.com/kongxianghai/p/4192032.html) [JS中关于clientWidth offsetWidth scrollWidth 等的含义](http://www.cnblogs.com/fullhouse/archive/2012/01/16/2324131.html) ## 图片懒加载的实现代码 ```js Document img { display: block; margin-bottom:...
继上一次的[图片懒加载](http://www.jianshu.com/p/52a85f91d070)，这次讲下js实现图片预加载。 > 先上demo [demo:图片预加载](http://www.hxvin.me/PracticeJS/preload/preload.html) >再上代码 ```js Document (function () { function loadImages(sources, callback) { var count = 0, images = {}, imgNum = 0; for (src in sources) { imgNum++;...
## 使用 HTTP 协议访问 Web   ## 网络基础 TCP/IP 通常使用的网络（包括互联网）是在 TCP/IP 协议族的基础上运作 的。而 HTTP 属于它内部的一个子集  缺点： 对于Array,Null等特殊对象使用typeof一律返回object，这正是typeof的局限性。 ### instanaceof instanceof适用于检测对象，它是基于原型链运作的。 instanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性。换种说法就是如果左侧的对象是右侧对象的实例， 则表达式返回true, 否则返回false 。 ```js [1, 2, 3] instanceof Array // true...
## 一、brew安装 ```js /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" ``` 然后一直按return键即可 ## 二、brew使用 ### brew安装套件： > $ brew install tree #### 常用命令 $ tree -a //显示所有文件和目录。 $ tree -d //显示目录名称而非内容 $...
### 什么是自执行函数？ 一下有三种写法 1.最前最后加括号 ``` (function(){alert(1);}()); ``` > 这种方法好处是能提醒阅读代码的人，这段代码是一个整体。 坏处是前面的代码行后记得加分号，不然会报错。如： ``` var a=1 (function(){alert(1);}()); ``` 2.function外面加括号 ``` (function(){alert(1);})(); ``` > 这种做法比方法1少了一个代码整体性的好处. 3.function前面加运算符，常见的是!与void 。 ``` !function(){alert(1);}(); void function(){alert(2);}(); ``` > 显然，加上“!”或“+”等运算符，写起来是最简单的。加上“void...