清除浮动总结

发表于 2017-03-21

假如我们有如下的一个结构：

<div clss="container" style="backgound-color:pink;">
   <h1>标题，浮动</h1>
   <p>段落，浮动</p>
</div>

当h1和段落都浮动后，父元素container坍塌所以不显示背景色@.@

通用做法：使用after伪元素

给浮动元素的父元素添加一个clearfix选择器：<div class="container clearfix"></div>

.clearfix:after{
  content:".";
  display:block;
  height:0;    //这三行是为了隐藏content的值
  clear:both;
  visibility:hidden;  //注意它和display:none是有区别的,hidden虽然不可见但仍然占据空间
}
.clearfix{
  zoom:1; //如果不考虑IE6/7可以不写（不支持:after伪类）
}

上述写法相当于在container末尾添加content中的内容，并将其设置为块级元素，高度为0，内容不可见，但任然占据空间，这样就会撑开div元素。隐藏content值还可以稍微改变一下：

.clearfix:after{
    content:" ";
    display:table;
    clear:both;
  }

这个css也许还不是最佳的，这里贴上一篇css hack文章：Lessons Learned Concerning the Clearfix CSS Hack

一些别的思路

在h1后添加一个空标签：<div style="clear:both;"></div>，这样会造成为了清除浮动页面可能有很多无意义的标签，pass！
给container添加overflow
container也设置为浮动，如果container外层还有容器，会影响整个布局。

HTML5之离线缓存Manifest

发表于 2017-03-16

什么是Manifest

简单来说是让应用可以在不联网的情况下也能访问：

离线浏览：
更快的速度：读取本地缓存所以访问速度快；
减轻服务器负载：文件缓存后不需要再次请求，只需要请求需要更新的文件。

怎么使用

需要在想要缓存的每一页都包含该属性：<html manifest="demo.appcache">，这样该页面就会被加入application cache中。

.manifest格式如下：

CACHE MANIFEST
#上面一句必须
#v1.0.0
#需要缓存的文件
CACHE:
a.js
b.css
#不需要缓存的文件
NETWORK:
*
#无法访问页面
FALLBACK:
404.html

正则表达式

发表于 2017-01-20

\b代表单词的开头或者结尾，也就是单词和空格间的位置，目标字符串的其中一部分，空格隔开。
\s匹配任意的空白符，包括空格，制表符(Tab)，换行符，中文全角空格等。
\w匹配字母或数字或下划线
^字符串开始
$字符串结束
+：一个或者多个，相当于{1，}
{2}: 仅2次
{1,4}: 左右都包括
.：任意一个字符（除换行符之外）
*：*前的字符可以连续出现任意次。
用\来转义
?: 一次或没有
[.?!]匹配标点符号(.或?或!)
分枝条件|：表达式A|表达式B|表达式C，匹配其一即可。
(pattern): 匹配这个格式就可以了
(?:pattern)、和上一个差不多，匹配这个pattern格式
(?=pattern)、继续向正向找，如果这个后面跟着这个pattern格式，怎么把前面的那个字符拿出来，pattern中的内容不算匹配到的字符
(?!pattern)和3相反，后面不跟着这个pattern格式，把前面的字符拿出来

Example

精确查找hi：\bhi\b
匹配"hi 任意 Lucy"：\bhi\b.*\bLucy\b
\ba\w*\b：hello aA_______adafafaf(匹配到的是空格后边的一段)
\d+：匹配一个或者多个连续的数字，后续随便是什么字符都可以
\d+$: 匹配一个或者多个连续的数字，且必须是数字结尾
\b\w{6}\b：hello _cs___匹配到的是空格后边的一段
\(?: 有或者没有括号
(\d{1,3}.)：子表达式，可以当做一个整体
- (\d{1,3}.){3}：该子表达式重复三次

补漏

发表于 2017-01-20

适配移动端

固定高度，宽度自适应

1 2	<meta name="viewport" content="width=device-width,initial-scale=1"> 水平方向百分百，flex，定值都可以，不用管手机屏幕的尺寸

固定宽度，viewport缩放

设计图、页面宽度、viewport width使用一个宽度，浏览器帮我们完成缩放。单位使用px即可。

根据屏幕宽度来动态生成viewport，动态生成缩放比
1
<meta name="viewport" content="width=640,initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no">
宽度使用rem

即给<html>设置font-size

继承

原型是什么？

在JavaScript中原型是一个prototype对象，用于表示类型之间的关系。

原型链是什么？

JavaScript万物都是对象，对象和对象之间也有关系，并不是孤立存在的。对象之间的继承关系，在JavaScript中是通过prototype对象指向父类对象，直到指向Object对象为止，这样就形成了一个原型指向的链条，专业术语称之为原型链。

继承方式：

原型链

Sub.prototype = new Super();

缺点：所有子类实例共享继承来的引用属性。
构造函数
1
2
3
function Sub(val){
Super.call(this, val); // 核心
}
缺点：没有用到原型啊，每个子类都有一个新的foo函数，影响性能，浪费内存，冗余。
组合继承（常用）
1
2
3
4
function Sub(){
Super.call(this); // 核心
}
Sub.prototype = new Super(); // 核心
构造函数里定义实例属性，原型上绑定函数（实现了函数复用）

优点：
- 调用父类构造方法–> 继承父类的基本属性，并且可以传参
- 子类原型指向父类实例–> 实现函数复用。
缺点：
- 父类构造函数被调用了两次，内存浪费
寄生组合继承（优化）

页面渲染

第一步：渲染引擎开始解析html，根据标签构建DOM节点
第二步：根据css样式构建渲染树，包括元素的大小、颜色，隐藏的元素不会被构建到该树中。
第三步：根据css样式构建布局树，主要是确定元素要显示的位置。
第四步：根据前面的信息，绘制渲染树。

cookies，sessionStorage 和 localStorage

相同点：存储在客户端
不同点：
1. 存储大小
  
  cookie数据大小不能超过4k。
  
  sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
2. 有效时间
  
  localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
  
  sessionStorage 数据在当前浏览器窗口关闭后自动删除。
  
  cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
3. 数据与服务器之间的交互方式
  
  cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
  
  sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

兼容性

html：H5新标签在IE9以下的浏览器识别

2.css样式的兼容性：

css的hack问题：主要针对IE的不同版本，不同的浏览器的写法不同

IE的条件注释hack：
被点击过后的超链接不再具有hover和active属性

解决办法:按lvha的顺序书写css样式，

“:link”: a标签还未被访问的状态；

“:visited”: a标签已被访问过的状态；

“:hover”: 鼠标悬停在a标签上的状态；

“:active”: a标签被鼠标按着时的状态；

3.JavaScript的兼容性

标准的事件绑定方法函数为addEventListener，但IE下是attachEvent
事件的捕获方式不一致。标准浏览器是由外至内，而IE是由内到外，主流是冒泡。
ajax的实现方式不同，这个我所理解的是获取XMLHttpRequest的不同，IE下是activeXObject
获得DOM节点的父节点、子节点的方式不同

其他浏览器：parentNode parentNode.childNodes

IE：parentElement parentElement.children

页面是如何呈现的

1，浏览器首先会查询本机的系统，获取主机名对应的IP地址。

2，若本机查询不到相应的IP地址，则会发起DNS请求，获取主机名对应的IP地址。

3，使用查询到的IP地址，直接访问目标服务器。　

4，浏览器发送HTTP请求。

　　HTTP请求由三部分组成，分别是：请求行、消息报头、请求正文

5，从请求信息中获得客户机想访问的主机名。

6，从请求信息中获取客户机想要访问的web应用。（web应用程序指提供浏览器访问的程序，简称web应用）

7，从请求信息中获取客户机要访问的web资源。（web资源，即各种文件，图片，视频，文本等）

8，读取相应的主机下的web应用，web资源。

9，用读取到的web资源数据，创建一个HTTP响应。

10，服务器回送HTTP响应。

　　HTTP响应也是由三个部分组成，分别是：状态行、消息报头、响应正文

11，客户浏览器解析回送的资源，并显示结果。

简述 JS drag 事件以及模拟 drag 事件的方案

一个完整的 drag and drop 流程通常包含以下几个步骤:

设置可拖拽目标. 设置属性 draggable=”true” 实现元素的可拖拽.
监听 dragstart 设置拖拽数据
为拖拽操作设置反馈图标 (可选)
设置拖放效果, 如 copy, move, link
设置拖放目标, 默认情况下浏览器阻止所有的拖放操作, 所以需要监听 dragenter 或者 dragover 取消浏览器默认行为使元素可拖放.
监听 drop 事件执行所需操作

实现 drag

onmousedown + onmousemove → startDrag()
onmouseup → stopDrag()
偏移值，两次事件的鼠标位置记录： e.pageX || e.clientX + scrollX; e.pageY || e.clientY + scrollY;

盒模型

盒模型有两种，W3C和IE盒子模型

W3C定义的盒子模型包括margin、border、padding、content ，元素的width=content的宽度，IE盒子模型与W3C的盒子模型唯一区别就是元素的宽度，元素的width=content+padding+border。

我个人认为IE定义的比较合理，元素的宽度应该包含border（边框）和padding（填充），这个和我们现实生活的盒子是一样的，W3C也认识到自己的问题了，所以在CSS3中新增了一个样式box-sizing，包含两个属性content-box 和 border-box。

对于行内元素，margin-top和margin-bottom无效，margin-left和margin-right有效

对于相邻的块级元素margin-bottom和margin-top 取值方式

1）都是正数：取最大值

2）都是负数：取最小值

3）一正一负：正负相加

定位

所有的定位如果left、top、right、bottom属性都为默认值，则为默认定位

absolute定位会脱离文档，浮动起来

absolute定位忽略父元素的padding

样式导入 link & import

<link href="index.css" rel="stylesheet">  
<style type="text/css">  
@import "index.css";  
</style>

不同：

link除了引用样式文件，还可以引用图片等资源文件，而import只引用样式文件
兼容性不同，link不存在兼容性的问题，import在IE5以上支持，是css2.1新增的
在样式表文件可以使用import导入其它的样式表文件，而link不可以
link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
link支持使用Javascript控制DOM去改变样式；而@import不支持。
注意：
import的写法比较多，引号，url（推荐）

伪类&伪元素

伪类	伪元素
:active	::first-letter
:focus	::first-line
:hover	::before
:link	::after
:visited	::selection
:first-child

伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。

css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。

css选择器的优先级

顺序：!important > style > 权重值

权重规则

标签：1
class：10
id：100

元素居中

元素水平居中

行内元素：父元素设置text-align:center;
块级元素：maigin:0 auto;（父元素定宽）

浮动元素：

1
2
3

position:relative;
left:50%;   
transform: translate(-50%,-50%);

元素垂直居中

行内元素：height和line-hight一样

块级元素：

父元素display:table-cell;vertical-align:middle;

父元素高度确定：

.outer{  
    width: 500px;  
    height:300px;  
    line-height: 300px;  +++
}  
 .inner{  
     background: blue;  
     width: 300px;  
     height: 100px;  
     display: inline-block;  +++
     vertical-align: middle;  +++
 }

子元素定宽定高：相对父元素定位：left:50%;right:50%;此时位置在中心向右向左偏移了子元素的宽度或高度的一半，用margin-top:-子元素高度/2,margin-left:-子元素宽度/2

子元素不定宽高：

.center{  
    width: 500px;  
    height:300px;   
    position: relative;
}  
 .inner{
     width:30%;  
     height:30%;
     position: absolute; +++
     left: 0;  +++
     right: 0;   +++
     top:0;   +++
     bottom: 0;   +++
     margin: auto;   +++
 }

块元素与行内元素

块元素：div/p/ul/ol/dl/table/form/blockquote/h1-h6/
行内元素：a/abbr/br/cite/em/i/img/input/label/select/span/strong/sub/sup/textarea/u

清除浮动

更严谨的说法其实是叫“闭合浮动”：主要是解决元素浮动后父元素高度塌陷的问题。

添加额外标签
给container添加overflow属性
container也浮动
::after伪元素

事件流

从页面接收事件的顺序，起初：

IE：事件冒泡流(主流)
- button -> body -> document -> window
事件流，包括三个阶段：
- 事件捕获阶段
  - addEventListener最后一个参数，true代表事件捕获模式，false表示事件冒泡模式(默认)。
- 处于目标阶段
  - 事件到了具体元素，被看成冒泡阶段的一部分
- 事件冒泡阶段
  
  可以被阻止：
  1. IE模型，window.event.cancelBubble = true
  2. w3c模型：e.stopPropagation()

DOM0级、DOM2事件处理程序

Dom0级：事件流的冒泡阶段被处理

btn.onclick=function(){};
Dom2级：true捕获

addEventListener(事件名，处理函数，bool)和removeEventListener(事件名，处理函数，bool)

主流都是在冒泡阶段调用事件处理程序，所以默认为false, true表示捕获阶段调用。

事件委托

将事件委托到父元素或祖先元素来实现。

一一添加事件监听麻烦

当我们想要给一系列元素添加一些事件，又不想对每个元素一一去添加事件监听时，可以采用委托来实现。
委托可以有效的提高页面性能。

给大量元素都添加事件监听时，会照成页面过多的性能损耗，所以碰到要给一系列元素添加事件时，建议采用事件委托，

CSS中可以 / 不可以被继承的属性

字体属性：

font-family, font-size, font-style, font-variant, font-weight, font
文本属性：

word-spacing letter-spacing text-align text-transform text-indent line-height可以继承

text-decoration vertical-align不可继承
颜色背景属性：

color可以继承

background不可继承
边框属性：

border不可以继承

(border-top border-right border-bottom border-left)(border-width border-style border-color)
定位和布局属性：

margin padding width height float clear position left top overflow z-index display不可以继承
列表属性：

list-style-image, list-style-position,list-style-type, list-style可以继承
所有元素可继承：

visibility和cursor

CSS3有哪些新特性？

CSS3实现圆角（border-radius），阴影（box-shadow），
对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜
增加了更多的CSS选择器  多背景 rgba 
在CSS3中唯一引入的伪元素是::selection.
媒体查询，多栏布局(columns属性) 
border-image

html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？

HTML5 主要是关于图像，位置，存储，多任务等功能的增加。

拖拽释放(Drag and drop) API

语义化更好的内容标签（header,nav,footer,aside,article,section）

音频、视频API(audio,video)

画布(Canvas) API

地理(Geolocation) API

本地离线存储 localStorage /sessionStorage

表单控件，calendar、date、time、email、url、search

新的技术webworker, websocket, Geolocation
移除的元素

纯表现的元素：basefont，big，center，font, s，strike，tt，u；

对可用性产生负面影响的元素：frame，frameset，noframes；
IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签。浏览器支持新标签后，还需要添加标签默认的样式：
当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

IE和Opera 会清理近期最少使用的cookie，Firefox会随机清理cookie。

跨域

修改window.domain 方式(同源跨域)
jsonp

利用js脚本的src属性发送一个get请求，如果没有jjsonp，会正常返回一个json数据，利用jsonp服务端接受callback参数，用该参数包装要返回的json数据，如果我们的页面正好有一个callback的函数，一返回结果就会执行该函数。
postmessage

HTML5新特性，可以完成jsonp无法完成的post请求

A给B跨域发送：iframeWin.postMessage('hello world!',"*");//限制接收窗体的url

B监听发送来的消息：window.addEventListener('message', onMessage, false);
代理
cors

Access-Control-Allow-Origin

Event Loop

同步任务都在主线程上执行，形成一个执行栈。
异步任务不进入主线程，而是进入任务队列
同步——》异步——》回调

先执行同步代码，for，但不给settimeout传参（回调最后执行），等for循环执行完传参。

回调放进消息队列。每执行一次for循环，就放一个settimeout到消息队列中排队。同步执行完了再去调用消息队列中的回调方法。

web性能优化

减少http请求：合并css、js，合并图片（css sprites），图片多的时候用延迟加载lazyload（判断在视口中的位置，给img标签填充src属性，jquery有lazyload插件）
开启Gzip。是一种压缩技术，可以将资源在服务端进行压缩，然后发送给浏览器后再进行解压，这种方式会降低传输大小，提高网页加载性能。
按需加载资源。

资源（特别是图片）的按需加载或者说惰性加载，可以有助于你的 Web 应用在整体上获得更好的性能。对于使用大量图片的页面来说惰性加载有着显著的三个好处：
- 减少向服务器发出的并发请求数量（这就使得页面的其他部分获得更快的加载时间）
- 减少浏览器的内存使用率（更少的图片，更少的内存）
- 减少服务器端的负载
少操作dom，dom的变化（改变文字大小，窗口大小，内容改变，属性改变等）可能会让浏览器重新计算元素的宽高，会引起页面reflow也就是重新布局，过于频繁cpu使用就会上涨

通过设置class，包含有动画属性的元素是否可以采用absolute或者fixed的布局，少进行对dom的查询修改，尤其是少进行对dom的循环操作，总之就是减少reflow的影响范围。

reflow何时发生：

1、添加或者删除可见的DOM元素；

2、元素位置改变；

3、元素尺寸改变——边距、填充、边框、宽度和高度

4、内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变；

5、页面渲染初始化；

6、浏览器窗口尺寸改变——resize事件发生时；

很多浏览器都会优化这些操作，浏览器会维护1个队列，把所有会引起回流、重绘的操作放入这个队列，等队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会flush队列，进行一个批处理。这样就会让多次的回流、重绘变成一次回流重绘。

虽然有了浏览器的优化，但有时候我们写的一些代码可能会强制浏览器提前flush队列，这样浏览器的优化可能就起不到作用了。当你请求向浏览器请求一些 style信息的时候，就会让浏览器flush队列，

直接改变className

不要经常访问会引起浏览器flush队列的属性，如果你确实要访问，利用缓存

reflow的开销大于repaint,所以用marginLeft, width ,height等属性改变dom时我们要注意减少影响的范围。基本原则就是，把动画元素用position:absolute踢出文档流，这样R&R就限制在了absolute元素的子节点。
用json进行数据交换：js的原生格式，轻量，相比xml的数据体积要小。处理json:eval()和json.parse()
html的语义化，正确使用常用标签：css没有成功加载时呈现好的内容结构；利于SEO
css选择器，从右向左匹配，!important标签、伪类，类型选择器
CDN：网络各处都放置了节点服务器，根据网络流量、各节点负载，到用户的距离把用户的请求重定向到离用户最近的服务节点上。
js和css压缩：减少文件体积

稳定排序和不稳定排序

衡量方法：排序前两个相等的数排序后的位置是否颠倒。如果Ai = Aj，Ai原来在位置前，排序后Ai还是要在Aj位置前。

冒泡、插入、归并

稳定
选择排序、快排

每个位置选当前元素最小的。不稳定

深拷贝

function Copy(p, c) {
      var c = c || {};
      for (var i in p) {
      　　if (typeof p[i] === 'object') {
      　　　　　c[i] = (p[i].constructor === Array) ? [] : {};
      　　　　　Copy(p[i], c[i]);
      　　} else {
      　　　　　c[i] = p[i];
      　　}
      }
      return c;
} 
var a={};  
  a.key2 = ['小辉','小辉'];
  var b={};
  b = Copy(a,b);        
  b.key2.push("大辉");
  alert(b.key2);    //小辉，小辉，大辉
  alert(a.key2);    //小辉，小辉

基础补漏

发表于 2017-01-14