知识点汇总

什么是CSS Hack
一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。
IE浏览器Hack一般又分为三种，条件Hack、属性级Hack、选择符Hack。例如：
1. 条件Hack

<!--[if IE]>
<style>
.test{color:red;}
</style>
<![endif]-->

1. 属性Hack

.test{
color:#090\9; / For IE8+ /
color:#f00; / For IE7 and earlier /
_color:#ff0; / For IE6 and earlier */
}

1. 选择符Hack

html .test{color:#090;} / For IE6 and earlier /
html .test{color:#ff0;} / For IE7 /

什么叫优雅降级和渐进增强
渐进增强 ：
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级：
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：

1. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给
2. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要
3. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带

实现一个函数clone，可以对JavaScript中的主要的数据类型进行值复制

function clone(obj) { 
    var o; 
    switch (typeof obj) { 
        case "undefined": 
            break; 
        case "string": 
            o = obj + ""; 
            break; 
        case "number": 
            o = obj - 0; 
        case "boolean": 
            o = obj; 
            break; 
        case "object": // object 分为两种情况 对象（Object）或数组（Array） 
            if (obj === null) { 
                o = null; 
            } else { 
                if (Object.prototype.toString.call(obj).slice(8, -1) === "Array") { 
                    o = []; 
                    for (var i = 0; i < obj.length; i++) { 
                        o.push(clone(obj[i])); 
                    } 
                } else {
                    o = {}; 
                    for (var k in obj) { 
                        o[k] = clone(obj[k]); 
                    } 
                } 
            } 
            break; 
        default: 
            o = obj; 
            break; 
        } 
        return o; 
    }

cookie和session的机制是什么？有什么区别？

会话（Session）跟踪是Web程序中常用的技术，用来跟踪用户的整个会话，它可以弥补http协议无状态的不足。常用的会话跟踪技术是cookie与session。cookie通过在客户端记录信息确定用户身份，session通过在服务器端记录信息确定用户身份。
cookie有什么作用？

cookie可以解决http的无状态的问题，与服务器进行交互，作为http规范存在。它具有极高的简便性、可扩展性和可用性，也可以通过加密和SSL技术来提高其安全性。因此推荐使用cookie作为标识而不是身份验证的工具。
cookie的缺点

 1. 大小和数目受限制。浏览器对一个域cookie的条目数有上限要求，且每个cookie的大小不得超过4kb。
 2. 存在安全性问题，易被人拦截。
 3. 需要指定域，不可以跨域
 4. 浪费带宽，因为我每次请求一个新的页面，cookie都会被自动发送过去。
 5. 有的移动端浏览器不支持cookie或浏览器禁用cookie
 6. 有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用

什么是重排和重绘？什么时候会发生重绘？如何避免重绘？
重绘是指的屏幕的一部分要重新绘制，比如元素的背景色发生了改变，但几何尺寸未发生改变。重排意味着元素的几何尺寸发生了改变，需要重新计算生成渲染树。
下面几种情况会发生重排：

 1. resize窗口时
 2. 修改网页默认字体时
 3. 修改CSS样式改变尺寸时
 4. JS操作dom树
 5. 一些影响布局的动画
 6. 使用JS脚本获得一些布局属性时，比如offsetTop

可以采取以下方法来减少重排:

 1. 不要一条条的修改DOM样式，改变className来“统一修改”（注：现代浏览器会进行增量异步reflow，即“攒够”一些修改后再统一修改）
 2. 把dom离线修改，比如将其至于内存或设置display:none。
 3. 为html动画原件使用position:absolute布局或fixed布局，这样不会引起重排和重绘。
 4. 不要使用table布局，因为稍加改动就会导致table的重新布局。
 5. 将offsetTop等属性缓存成局部变量

浏览器是如何渲染页面的？

 1. 浏览器会解析html\xhtml\svg，生成一个dom树，解析css文件生成css规则树，解析javascript以获得其对html和css的影响
 2. 解析完成后，浏览器会根据dom树和css规则树来生成渲染树。渲染树不包括像header元素这样页面中不会出现的元素。
 3. 会进行layout，定义元素的坐标
 4. 最后通过调用系统Native GUI的API绘制

网页中如何优化图像

1. 去掉没有意义的修饰
2. 使用css和矢量图代替位图
3. 惰性加载图片
4. 使用css sprites，将多张小图拼成一张大图

png和jpg格式的区别
png属于无损压缩，而jpg是有损压缩，一张图片多次使用jpg格式压缩的话会逐渐失真
png格式的图片存储空间明显大于jpg格式的图片

常见web攻击有哪些

1. 跨站脚本攻击（XSS ，又称CSS，Cross Site Script）
2. 分布式拒绝服务（DDOS，Distributed Denial of Service）
   利用合理的请求占用服务器的大量资源，使正常用户无法得到服务器的响应
3. 跨站请求伪造攻击（CSRF，Cross site request forgery）
   攻击者通过各种方法伪造一个请求，模仿用户提交表单的行为，从而达到修改用户的数据，或者执行特定任务的目的
   解决方法是尽量使用post请求
4. sql注入
   攻击者主要针对后台使用sql拼接方式查询的情况，