remIE6~8 不支持rem，解决用 css hack：width:25%\9 移动端用rem移动端 css像素和物理像素不对等，可能1个css像素对应4个物理像素，不同设备像素不同。为了解决这个问题，用rem。 根部font-size根据设备不同屏幕宽度计算不同字号大小。 1.JS动态计算（常见做法） 1. 定基准值,设计稿是750宽度（2倍屏）,字体的大小是24px.2. 计算指定宽度的字体大小。window.onload = function(){ document.documentElement.style.fontSize = document.documentElement.clientWidth / 24 + 'px';} 根据dpr设定 （比较好的做法）ps : 一般时初始化时设置为根元素html的attribute， window.document.documentElement.setAttribute('dpr',window.devicePixelRatio) 然后css这样写 [dpr=1] { font-size=16px; }[dpr=2] { font-size=32px; } css ie 条件注释IE条件注释 (conditional comment) 是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码，注意：只有 IE9以下的浏览器才能识别这种语法，其他浏览器仅仅认为是普通注释。 注意： if IE 6 中 IE 和 6 的空格不能省，不然会显示在页面上。 <!--[if IE 6]> <p>IE6下 这句生效，在其他浏览器下认为是普通注释</p><![endif ...

1.流体布局<div class="container"> <div class="left"></div> <div class="right"></div> <div class="main"></div> </div><style> .left{ width: 200px; height: 200px; float: left; background-color: yellow; } .right{ width: 200px; height: 200px; float: right; background-color: red; } .main{ margin:auto 200px; height: 200px; background-color: blue; }</style> 如上，流体布局就是对左右盒子float属性，中间盒子设置margin。 效果可看codepen 注意：right要放在main之前，不然right会挤到下一行。（这也是缺点：主要内容无法最先加载，当页面内容较多时会影响用户体验。） 2.BFC三栏关于BFC，可以看- 前端精选文摘：BFC 神奇背后的原理。 <style> .main{ overflow: hidden; height: 200px; bac ...

TCP是一种面向连接（连接导向）的、可靠的基于字节流的传输层通信协议。TCP将用户数据打包成报文段，它发送后启动一个定时器，另一端收到的数据进行确认、对失序的数据重新排序、丢弃重复数据。TCP的特点有： TCP是面向连接的运输层协议 每一条TCP连接只能有两个端点，每一条TCP连接只能是点对点的 TCP提供可靠交付的服务 TCP提供全双工通信。数据在两个方向上独立的进行传输。因此，连接的每一端必须保持每个方向上的传输数据序号。 面向字节流。面向字节流的含义：虽然应用程序和TCP交互是一次一个数据块，但TCP把应用程序交下来的数据仅仅是一连串的无结构的字节流。 TCP头格式（1）Source Port（源端口号）：数据发起者的端口号，16bit。（2）Destination Port（目的端口号）：数据接收者的端口号，16bit。（3）Sequence Number（顺序号码，Seq）：用于在数据通信中解决网络包乱序（reordering）问题，以保证应用层接收到的数据不会因为网络上的传输问题而乱序（TCP会用这个顺序号码来拼接数据），32bit。（4）Acknowledgment Number（确认号码，ack）：是数据接收方期望收到发送方在下一个报文段的顺序号码（Seq），因此确认号码应当是上次已成功收到顺序号码（Seq）加1，32bit。（5）Offset（TCP报文头长度)：用于存储报文头中有多少个32bit(上图的一行)，存储长度为4bit，最大可表示（2^3+2^2+2^1+1）_32bit=60bytes的报文头。最小取值5，5_32bit=20bytes。（6）Reserved（保留）：6bit, 均为0（7）TCP Flags（TCP标志位）每个长度均为1bit CWR：压缩，TCP Flags值0x80。 ECE：拥塞，0x40。 URG：紧急，0x ...

以下都是js的简单实现。 排序的稳定性假定在待排序的记录序列中，存在多个具有相同的关键字的记录，若经过排序，这些记录的相对次序保持不变，即在原序列中，ri=rj，且ri在rj之前，而在排序后的序列中，ri仍在rj之前，则称这种排序算法是稳定的；否则称为不稳定的。 选择排序、快速排序、希尔排序、堆排序不是稳定的排序算法；而冒泡排序、插入排序、归并排序和基数排序是稳定的排序算法。 1.直接插入基本思想：前i个数是已经排好的数，然后把第i+1个数插入其中。 function insertSort(arr){ let len = arr.length; for(let i = 1; i < len; i++){ for(let j = i; j > 0; j--){ if(arr[j] < arr[j-1]) swap(arr,j,j-1); else break; } }} 2.快速排序基本思想：挑选一个元素，称为 “基准”（pivot），重新排序数列，所有元素比基准值小的摆放在基准前面，所有元素比基准值大的摆在基准的后面（相同的数可以到任一边），这个称为分区（partition）操作。然后对两个分区进行递归。 function quickSort(arr){ partition(arr,0,arr.length-1);}function partition(arr,lo,hi){ if(lo >= hi) return; let i = lo,j = hi; while(i < j){ while(j>i && ...

## 1. 字符串选择The dog chased the cat中单词 the，我们可以使用正则表达式: /the/gi,我们可以把这个正则表达式分成几段： / 是这个正则表达式的头部 the 是我们想要匹配的模式 / 是这个正则表达式的尾部 g 代表着 global(全局)，意味着返回所有的匹配而不仅仅是第一个。 i 代表着忽略大小写，意思是当我们寻找匹配的字符串的时候忽略掉字母的大小写。 2. 数字选择在JavaScript中, 数字选择器类似于: /\d/g。 在选择器后面添加一个加号标记(+)，例如：/\d+/g，它允许这个正则表达式匹配一个或更多数字。 例如： var testString = "There are 34 cats but 4 dogs.";var expression = /\d+/g; result:[ '34', '4' ]var expression = /\d/g; result:[ '3', '4', '4' ] 尾部的g是’global’的简写，意思是允许这个正则表达式 找到所有的匹配而不是仅仅找到第一个匹配。 var testString = "There are 3 cats but 4 dogs.";var expression = /\d+/g; // Change this linevar digitCount = testString.match(expression);//.length;console.log(digitCount)[ '3', '4' ][Finished in 0.1s] 3. 选择反转你可以用正则表达式选择器的大写版本 来转化任何匹配。举个例子：\s 匹配任何空白字符 ...

合并操作你调用 component 的 setState 方法的时候, React 将其标记为 dirty。到每一个事件循环结束, React 检查所有标记 dirty 的 component 重新绘制。 这里的”合并操作”是说, 在一个事件循环当中, DOM 只会被更新一次.这个特性是构建高性能应用的关键, 而且用通常的 JavaScript 代码难以实现。 而在 React 应用里, 你默认就能实现。 子树渲染调用 setState 方法时, component 会重新构建包括子节点的 virtual DOM。 如果你在根节点调用 setState, 整个 React 的应用都会被重新渲染.所有的 component, 即便没有更新, 都会调用他们的 render 方法.这个听起来可怕, 性能像是很低, 但实际上我们不会触碰真实的 DOM, 运行起来没那样的问题。 首先, 我们讨论的是展示用户界面. 因为屏幕空间有限, 通常你需要一次渲染成百上千条指令.JavaScript 对于能处理的整个界面, 在业务逻辑上已经足够快了。 另一点, 在写 React 代码时, 每当有数据更新, 你不是都调用根节点的 setState。 你会在需要接收对应更新的 component 上调用, 或者在上面的几个 component。 你很少要一直到根节点上. 就是说界面更新只出现在用户产生交互的局部。 选择性子树渲染最后, 你还有可能去掉一些子树的重新渲染.如果你在 component 上实现以下方法的话: boolean shouldComponentUpdate(object nextProps, object nextState) 根据 component 的前一个和下一个 props/state,你可以告诉 React 这个 component 没有更新, 也不需要重新绘制。实现 ...

参考 说到AJAX就会不可避免的面临两个问题，第一个是AJAX以何种格式来交换数据？第二个是跨域的需求如何解决？这两个问题目前都有不同的解决方案，比如数据可以用自定义字符串或者用XML来描述，跨域可以通过服务器端代理来解决。 但到目前为止最被推崇或者说首选的方案还是用JSON来传数据，靠JSONP来跨域。 JSON(JavaScript Object Notation)和JSONP(JSON with Padding)虽然只有一个字母的差别，但其实他们根本不是一回事儿：JSON是一种数据交换格式，而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。我们拿最近比较火的谍战片来打个比方，JSON是地下党们用来书写和交换情报的“暗号”，而JSONP则是把用暗号书写的情报传递给自己同志时使用的接头方式。看到没？一个是描述信息的格式，一个是信息传递双方约定的方法。 什么是JSONJSON是一种基于文本的数据交换方式，或者叫做数据描述格式，你是否该选用他首先肯定要关注它所拥有的优点。 JSON的优点： 1、基于纯文本，跨平台传递极其简单； 2、Javascript原生支持，后台语言几乎全部支持； 3、轻量级数据格式，占用字符数量极少，特别适合互联网传递； 4、可读性较强，虽然比不上XML那么一目了然，但在合理的依次缩进之后还是很容易识别的； 5、容易编写和解析，当然前提是你要知道数据结构； JSON的缺点当然也有，但在作者看来实在是无关紧要的东西，所以不再单独说明。 JSON的格式或者叫规则： JSON能够以非常简单的方式来描述数据结构，XML能做的它都能做，因此在跨平台方面两者完全不分伯仲。 1、JSON只有两种数据类型描述符，大括号{}和方括号[]，其余英文冒号:是映射符，英文逗号,是分隔符，英文双引号””是定义符。 2、大括号{}用来描述一组“不同类型的无 ...

一般编程语言中参数传递存在两种方式：按值传递，引用传递。但在Js中，参数的传递有点另类。先看一下值传递和引用传递的概念。 值传递：形参是实参的拷贝，改变形参的值并不会影响外部实参的值。从被调用函数的角度来说，值传递是单向的（实参->形参），参数的值只能传入，不能传出。当函数内部需要修改参数，并且不希望这个改变影响调用者时，采用值传递。 引用传递：形参相当于是实参的“别名”，对形参的操作其实就是对实参的操作，在引用传递过程中，被调函数的形式参数虽然也作为局部变量在栈中开辟了内存空间，但是这时存放的是由主调函数放进来的实参变量的地址。被调函数对形参的任何操作都被处理成间接寻址，即通过栈中存放的地址访问主调函数中的实参变量。正因为如此，被调函数对形参做的任何操作都影响了主调函数中的实参变量。 另外c++中还有指针传递：形参为指向实参地址的指针，当对形参的指向操作时，就相当于对实参本身进行的操作。引用和指针是两个概念。引用仅是一个别名，具有很多限制；而指针是一个存放对象地址的变量，比较灵活。 js中函数的传参方式首先，Js的基本类型，是按值传递的。 let a = 1;function foo(a){ a = 2;}foo(a);console.log(a);//1 这个例子中，function内新定义了一个变量a，并赋值2，这不会影响外部的a。事实上foo(a)可以看出foo(2)。 Js中引用类型传递： let a = { num : 1}function foo(obj){ obj.num = 2;}foo(a);console.log(a.num); // 2 a.num 变成了2，看似a的引用传递到函数内。但事实上，并没有。函数内新定义了一个obj，并把{num:1}赋值给了obj，虽然对 ...

w3c 制定的 javascript 标准事件模型触发顺序事件捕获->事件处理->事件冒泡 绑定方法： 直接Dom绑定 js的onXXX绑定 添加事件监听 addEventListener(eventName,Handle,useCaptrue) IE9.0及以上版本attachEvent(eventName,Handle) (IE9.0以下版本) 图片服务器几个原因：1、负载均衡，减少本服务器负担，降低运行成本。2、通过专业服务器和加速技术，实现图片访问加速。3、防止图片上传携带病毒感染主网站服务器。4、减少并发数限制。把图片存储在多台静态服务器，减少http请求数 IIS 链接数 ，保证更多的用户能同时并更快的打开页面。5、将图片等非主要信息外放并限制搜索引擎跟踪，有利于搜索引擎收录主体内容，促进网站排名 何时应该使用etag? 何时应该使用last-modified? 如获取最后修改时间代价太高 (如不经常变动的动态内容), 使用etag, 然后用哈希或crc算法返回校验值； 如很容易最后修改时间 (如图片/js/css ), 那么毫无疑问返回最后修改时间将是消耗最小的。 两个都返回也是可以的. Etag 算法由服务器自己决定，可以是md5，可以是时间，它比 last-modified(只有秒级） 更精确。 分布式系统里多台机器间文件的last-modified必须保持一致，以免负载均衡到不同机器导致比对失败 分布式系统尽量关闭掉Etag(每台机器生成的etag都会不一样) Last-Modified,Etag,Expire 混合 通常 Last-Modified,Etag,Expire 是一起混合使用的，特别是 Last-Modified 和 Expire 经常一起使用，因为 Expire 可以让浏览器完全不发起 Http 请求，而当浏览器强制 ...

前端优化:DNS预解析提升页面速度在网页体验中我们常会遇到这种情况，即在调用百度联盟、谷歌联盟以及当前网页所在域名外的域名文件时会遇到请求延时非常严重的情况。那么有没有方法去解决这种请求严重延时的现象呢？ 一般来说这种延时的原因不会是对方网站带宽或者负载的原因，那么到底是什么导致了这种情况呢。假设是DNS的问题，因为DNS解析速度很可能是造成资源延时的最大原因。于是在页面header中添加了以下代码（用以DNS预解析）： <meta http-equiv="x-dns-prefetch-control" content="on" /><link rel="dns-prefetch" href="http://bdimg.share.baidu.com" /><link rel="dns-prefetch" href="http://nsclick.baidu.com" /><link rel="dns-prefetch" href="http://hm.baidu.com" /><link rel="dns-prefetch" href="http://eiv.baidu.com" /> 效果很不错（测试浏览器为IE8），再打开其他页面时百度分享按钮的加载明显提高！ 下面我们来简单了解一下dns-prefetch： DNS 作为互联网的基础协议，其解析的速度似乎容易被网站优化人员忽视。现在大多数新浏览器已经针对DNS解析进行了优化，典型的一次DNS解析耗费20-120 毫秒，减少DNS解析时间和次数是个很好的优化方式。 ...