前端基础知识

1. 事件类型、绑定方式

事件类型：
    （1）鼠标（mousedown -> mouseup -> click -> dbclick），
    （2）键盘（keydown / keyup / keypress），
    （3）表单事件（form中submit和reset事件），
    （4）Window事件（onload）

绑定方式：
    （1）直接在标签中使用onclick绑定
    （2）使用原声js绑定：document.getElementById("#btn_submit").addEventListener(‘click’, function(){}, false（default,冒泡，由里向外）);
    （3）使用jQuery进行绑定 $('#btn_submit').click(function(){});

2.浏览器内核有哪些

（1）Trident内核代表产品Internet Explorer，又称其为IE内核
（2）Gecko内核代表作品Mozilla Firefox
（3）WebKit内核代表作品Safari、Chrome
（4）Presto内核代表作品Opera

3.实现私有变量

     在函数内部定义,闭包

4.css清除浮动的原理

（1）clear:right;表示该元素右边不存在浮动元素；
（2）clear:both;表示该元素两边都不存浮动元素。
（3）clear:none表示两边允许有浮动元素。

5.行内元素和块级元素的区别

在标准文档流里面，块级元素具有以下特点：
①总是在新行上开始，占据一整行；
②高度，行高以及外边距和内边距都可控制；
③宽带始终是与浏览器宽度一样，与内容无关；
④它可以容纳内联元素和其他块元素。

行内元素的特点：
①和其他元素都在一行上；
②高，行高及外边距和内边距部分可改变；
③宽度只与内容有关；
④行内元素只能容纳文本或者其他行内元素。
不可以设置宽高，其宽度随着内容增加，高度随字体大小而改变，内联元素可以设置外边界，但是外边界不对上下起作用，只能对左右起作用，也可以设置内边界，但是内边界在ie6中不对上下起作用，只能对左右起作用

6.减少网站加载时间的最有效方式
如下：

（1）减少网站的HTTP请求数。可通过CSS Sprite（又称CSS雪碧）—将多个图片整合到一个图片中，使用CSS来进行定位显示。页面加载时，一次性加载整图，有效减轻服务器压力。同时，缩短了悬停加载图片所需的时间延迟，使得用户浏览行为更加流畅，不会停顿。
（2）优化图片：推荐使用PNG8格式，PNG8格式在一般情况下，无论是体积压缩比还是对各浏览器透明度兼容都很不错。   

（3）合并压缩脚本：使用Minify压缩JS和CSS；Minify把CSS和JS压缩和削减(Minify：去掉空格回车符等)，以及把多个CSS，JS文件整合到一个文件里。不要以为你的大带宽没有必要进 行这类优化。使用它的理由更重要的是文件合并，而不是压缩，文件整合可以减少浏览器端不断发出新的连接请求，就像FTP服务器一样，多个小文件 和一个大文件耗时是不一样的。

（4）缓存
    使用缓存可以减少向服务器的请求数，节省加载时间，所以所有静态资源都要在服务器端设置缓存，并且尽量使用长Cache（长Cache资源的更新可使用时间戳）
    a) 缓存一切可缓存的资源
    b) 使用长Cache（使用时间戳更新Cache）
    c) 使用外联式引用CSS、JavaScript

（5）按需加载
    将不影响首屏的资源和当前屏幕资源不用的资源放到用户需要时才加载，可以大大提升重要资源的显示速度和降低总体流量
    PS：按需加载会导致大量重绘，影响渲染性能
    a) LazyLoad
    b) 滚屏加载
    c) 通过Media Query加载

（6）预加载
    大型重资源页面（如游戏）可使用增加Loading的方法，资源加载完成后再显示页面。但Loading时间过长，会造成用户流失
    对用户行为分析，可以在当前页加载下一页资源，提升速度
    a) 可感知Loading(如进入空间游戏的Loading)
    b) 不可感知的Loading（如提前加载下一页）

（7）减少Cookie
    Cookie会影响加载速度，所以静态资源域名不使用Cookie
（8）避免重定向
    重定向会影响加载速度，所以在服务器正确设置避免重定向
（9）异步加载第三方资源
    第三方资源不可控会影响页面的加载和显示，因此要异步加载第三方资源

7.浏览器如何匹配某个选择器

    先产生一个元素集合，然后从后往前判断；

   浏览器先产生一个元素集合，这个集合往往由最后一个部分的索引产生（如果没有索引就是所有元素的集合）。然后向上匹配，如果不符合上一个部分，就把元素从集合中删除，直到真个选择器都匹配完，还在集合中的元素就匹配这个选择器了。

    举个例子，有选择器：

body.ready #wrapper > .lol233

先把所有 class 中有 lol233 的元素拿出来组成一个集合，然后上一层，对每一个集合中的元素，如果元素的 parent id 不为 #wrapper 则把元素从集合中删去。 再向上，从这个元素的父元素开始向上找，没有找到一个 tagName 为 body 且 class 中有 ready 的元素，就把原来的元素从集合中删去。

注意：

1、为什么从后往前匹配因为效率和文档流的解析方向。效率不必说，找元素的父亲和之前的兄弟比遍历所哟儿子快而且方便。关于文档流的解析方向，是因为现在的 CSS，一个元素只要确定了这个元素在文档流之前出现过的所有元素，就能确定他的匹配情况；应用在即使 html 没有载入完成，浏览器也能根据已经载入的这一部分信息完全确定出现过的元素的属性。

2、为什么是用集合主要也还是效率。基于 CSS Rule 数量远远小于元素数量的假设和索引的运用，遍历每一条 CSS Rule 通过集合筛选，比遍历每一个元素再遍历每一条 Rule 匹配要快得多。

8.漫谈 轮询（polling） 和 Websocket

Http被设计成了一个单向的通信的协议，即客户端发起一个request，然后服务器回应一个response。这让服务器很为恼火：我特么才是老大，我居然不能给小弟发消息。。。

轮询：客户端通过ajax不停去向服务器获得数据，检查是否有新的数据更新。这种使用轮询实现一种伪实时的状态很容易，但效率偏低，一般而言，这种实时获得的数据，本身数据量不是非常大，而通过这种反复地发起request的方式，往往造成的可能是http的header信息比数据本身还多，而且大多数时候获得的数据都是重复无用的。Comet

WebSocket协议：是HTML5定义的一种新协议，它实现了浏览器与服务器全双工通信(full-duplex)。通过浏览器发出websocket连线请求，然后服务器发出回应，建立一个联系的通道。
websocket允许通过JavaScript建立与远程服务器的连接，从而实现客户端与服务器间双向的通信。在websocket中有两个方法：

1、send() 向远程服务器发送数据

2、close() 关闭该websocket链接

websocket同时还定义了几个监听函数

1、onopen 当网络连接建立时触发该事件

2、onerror 当网络发生错误时触发该事件

3、onclose 当websocket被关闭时触发该事件

4、onmessage 当websocket接收到服务器发来的消息的时触发的事件，也是通信中最重要的一个监听事件。


websocket还定义了一个readyState属性，这个属性可以返回websocket所处的状态：

1、CONNECTING(0) websocket正尝试与服务器建立连接

2、OPEN(1) websocket与服务器已经建立连接

3、CLOSING(2) websocket正在关闭与服务器的连接

4、CLOSED(3) websocket已经关闭了与服务器的连接

websocket的url开头是ws，如果需要ssl加密可以使用wss，当我们调用websocket的构造方法构建一个websocket对象（new WebSocket(url)）的之后，就可以进行即时通信了。

9.ws和wss的区别

Windows SharePoint Services (WSS):是一个用来创建能够实现信息共享和文档协作的Web站点的引擎，从而有助于提高个人和团队的生产力.
 ws：Web Services 

10. border的上下左右，只想要div左右两边有边框,上下没有边框,要怎么写呢?

第一种：border:1px solid #ccc; border-style:none solid;

第二种：border:1px solid #ccc; border-width:0 1px;

第三种：border:1px solid #ccc; border-top:none;border-bottom:none;

11.https的原理，加密方式，怎么加密的

https通讯原理：https在传输数据之前需要客户端和服务端之间进行一次握手，在握手过程中将确立双方加密传输数据的密码信息，通常情况下需要数字证书（公钥）配合实现；

加密方式：
http：超文本传输协议；

https:安全套接字超文本传输协议；为了数据的安全传输，HTTPS在HTTP的基础上添加SSL/TLS协议；
        （1）SSL/TLS依靠证书来验证服务器身份；
        （2）并为浏览器和服务器之间通信加密。

http和https的区别：

     a、https协议需要到CA（Certificate Authority）申请证书，一般证书很少免费，需要交费；

     b、http是超文本传输协议，信息是明文传输；https则是具有安全性的SSL加密传输协议；

     c、http和https使用的是完全不同的连接方式；http使用80端口；https使用443端口；

    采用https的服务器必须从CA （Certificate Authority）申请一个用于证明服务器用途类型的证书。该证书只有用于对应的服务器的时候，客户端才信任此主机。

12. js 严格模式

设立"严格模式"的目的，主要有以下几个：
　　- 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
　　- 消除代码运行的一些不安全之处，保证代码运行的安全；
　　- 提高编译器效率，增加运行速度；
　　- 为未来新版本的Javascript做好铺垫。

标志："use strict";

具体：http://www.ruanyifeng.com/blog/2013/01/javascript_strict_mode.html

13.js垃圾回收

    由于字符串、对象和数组没有固定大小，所有当他们的大小已知时，才能对他们进行动态的存储分配。JavaScript程序每次创建字符串、数组或对象时，解释器都必须分配内存来存储那个实体。只要像这样动态地分配了内存，最终都要释放这些内存以便他们能够被再用，否则，JavaScript的解释器将会消耗完系统中所有可用的内存，造成系统崩溃。

    垃圾回收原理浅析:现在各大浏览器通常用采用的垃圾回收有两种方法：标记清除、引用计数。

14.实现一个三栏布局，两边定宽中间自适应的布局

（1）定位：左边left0右边right0中间margin:0 auto;

（2）浮动布局：float:left,right;但是main要放在left，right后面

（3）Flexbox：父元素设置display：flex;中间部分：flex:1;左右固定宽度；

（4）圣杯布局：原理是margin负值法。
    使用圣杯布局首先需要在center元素外部包含一个div，包含div需要设置float属性使其形成一个BFC，并设置宽度，并且这个宽度要和left块的margin负值进行配合

    <h3>使用margin负值法进行布局</h3>  
    <div id = "wrap">  
        <div id = "center"></div>  
    </div>  
    <div id = "left_margin"></div>  
    <div id = "right_margin"></div>  

    #wrap{ width: 100%;height: 100px; background-color: #fff;float: left;}  
    #wrap #center{ margin:0 210px; height: 100px;background-color: #ffe6b8; }  
    #left_margin,#right_margin{ float: left;width: 200px;height: 100px;background-color: darkorange }  
    #left_margin {margin-left: -100%; background-color: lightpink}  
    #right_margin{margin-left: -200px;}  

    需要注意的是：布局中间部分一定要放在前面，左右顺序不限制。对于left快的margin负值一定要等于wrap的宽度。

    什么时候会触发BFC呢？全称”Block Formatting Context”, 中文为“块级格式化上下文”，
    BFC元素特性表现原则就是，内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素
    常见的如下：
        float的值不为none。
        overflow的值为auto,scroll或hidden。
        display的值为table-cell, table-caption, inline-block中的任何一个。
        position的值不为relative和static。

（5）双飞翼布局
    双飞翼布局和上面圣杯布局相似，主要的不同之处就是在解决中间部分被挡住的问题时，采取的解决办法不一样，圣杯布局是在父元素上设置了padding-left和padding-right，在给左右两边的内容设置position为relative，通过左移和右移来使得左右两边的内容得以很好的展现，而双飞翼则是在center这个div中再加了一个div来放置内容，在给这个新的div设置margin-left和margin-right
好处：
主要的内容先加载的优化；
兼容目前所有的主流浏览器，包括IE6在内；
实现不同的布局方式，可以通过调整相关CSS属性即可实现

14.给定一个元素获取它相对于视图窗口的坐标

  offsetTop和offsetLeft属性

15.transition的属性值和应用

    transition: property duration timing-function delay 

    （1）transition-property ：规定设置过渡效果的css属性名称
    （2）transition-duration ：规定完成过渡效果需要多少秒或毫秒
    （3）transition-timing-function ：指定过渡函数，规定速度效果的速度曲线
    （4）transition-delay ：指定开始出现的延迟时间

     默认值分别为：all 0 ease 0 

16.css中单位px和em，rem的区别

px是固定像素，
em是相对父元素字体大小的百分比,比如div设成15px，div的子节点1em就是15px,2em就是30px。
rem和em差不多，但是是相对于html元素(文档根元素document.documentElement)而不是父元素。