1.请你谈谈Cookie的弊端

cookie虽然在持久保存客户端数据提供了方便,分担了服务器存储的负担,但还是有很多局限性的。

第一:每个特定的域名下最多生成20个cookie

1.IE6或更低版本最多20个cookie

2.IE7和之后的版本最后可以有50个cookie。

3.Firefox最多50个cookie

4.chrome和Safari没有做硬性限制

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

cookie的最大大约为4096字节,为了兼容性,一般不能超过4095字节。

IE 提供了一种存储可以持久化用户数据,叫做userdata,从IE5.0就开始支持。每个数据最多128K,每个域名下最多1M。这个持久化数据放在缓存中,如果缓存没有清理,那么会一直存在。

优点:极高的扩展性和可用性

1.通过良好的编程,控制保存在cookie中的session对象的大小。

2.通过加密和安全传输技术(SSL),减少cookie被破解的可能性。

3.只在cookie中存放不敏感数据,即使被盗也不会有重大损失。

4.控制cookie的生命期,使之不会永远有效。偷盗者很可能拿到一个过期的cookie。

缺点:

1.`Cookie`数量和长度的限制。每个domain最多只能有20条cookie,每个cookie长度不能超过4KB,否则会被截掉.

2.安全性问题。如果cookie被人拦截了,那人就可以取得所有的session信息。即使加密也与事无补,因为拦截者并不需要知道cookie的意义,他只要原样转发cookie就可以达到目的了。

3.有些状态不可能保存在客户端。例如,为了防止重复提交表单,我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端,那么它起不到任何作用。


    2.浏览器本地存储

    在较高版本的浏览器中,js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage来取代globalStorage。
    
    html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。
    
    sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。
    
    而localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。


      3.web storage和cookie的区别

      Web Storage的概念和cookie相似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用。
      
      除此之外,Web Storage拥有setItem,getItem,removeItem,clear等方法,不像cookie需要前端开发者自己封装setCookie,getCookie。
      
      但是cookie也是不可以或缺的:cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在 ,而Web Storage仅仅是为了在本地“存储”数据而生
      
      浏览器的支持除了IE7及以下不支持外,其他标准浏览器都完全支持(ie及FF需在web服务器里运行),值得一提的是IE总是办好事,例如IE7、IE6中的userData其实就是javascript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持web storage。
      
      localStorage和sessionStorage都具有相同的操作方法,例如setItem、getItem和removeItem等


        4.cookie 和session 的区别:

        欢迎使用,请输入内容...

        1、cookie数据存放在客户的浏览器上,session数据放在服务器上。
        
         2、cookie不是很安全,别人可以分析存放在本地的COOKIE并进行COOKIE欺骗
        
            考虑到安全应当使用session。
        
         3、session会在一定时间内保存在服务器上。当访问增多,会比较占用你服务器的性能
             考虑到减轻服务器性能方面,应当使用COOKIE。
         4、单个cookie保存的数据不能超过4K,很多浏览器都限制一个站点最多保存20个cookie。
         5、所以个人建议:
            将登陆信息等重要信息存放为SESSION
            其他信息如果需要保留,可以放在COOKIE中
        display:none和visibility:hidden的区别?
        display:none  隐藏对应的元素,在文档布局中不再给它分配空间,它各边的元素会合拢,就当他从来不存在。
        visibility:hidden  隐藏对应的元素,但是在文档布局中仍保留原来的空间。


          5.CSS中link 和@import的区别是?

          (1) link属于HTML标签,而@import是CSS提供的;
          
          (2) 页面被加载的时,link会同时被加载,而@import被引用的CSS会等到引用它的CSS文件被加载完再加载;
          
          (3) import只在IE5以上才能识别,而link是HTML标签,无兼容问题;
          
          (4) link方式的样式的权重 高于@import的权重.
          
          position:absolute和float属性的异同
          
          § 共同点:对内联元素设置float和absolute属性,可以让元素脱离文档流,并且可以设置其宽高。
          
          § 不同点:float仍会占据位置,absolute会覆盖文档流中的其他元素。
          
          介绍一下box-sizing属性?
          
          box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是content-box。
          
          § content-box:让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定,设置width/height属性指的是content部分的宽/高
          
          § border-box:让元素维持IE传统盒模型(IE6以下版本和IE6~7的怪异模式)。设置width/height属性指的是border + padding + content
          
          标准浏览器下,按照W3C规范对盒模型解析,一旦修改了元素的边框或内距,就会影响元素的盒子尺寸,就不得不重新计算元素的盒子尺寸,从而影响整个页面的布局。


            6.CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些?

            1.id选择器( # myid)
            
                2.类选择器(.myclassname)
            
                3.标签选择器(div, h1, p)
            
                4.相邻选择器(h1 + p)
            
                5.子选择器(ul > li)
            
                6.后代选择器(lia)
            
                7.通配符选择器( * )
            
                8.属性选择器(a[rel = "external"])
            
                9.伪类选择器(a: hover, li:nth-child)
            
            优先级为:
            
            !important > id > class > tag
            
            important 比 内联优先级高,但内联比 id 要高
            
            CSS3新增伪类举例:
            
                p:first-of-type选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
            
                p:last-of-type  选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
            
             
            
                p:only-of-type  选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
            
                p:only-child    选择属于其父元素的唯一子元素的每个 <p> 元素。
            
                p:nth-child(2)  选择属于其父元素的第二个子元素的每个 <p> 元素。
            
                :enabled  :disabled控制表单控件的禁用状态。
            
                :checked        单选框或复选框被选中。
            
            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.
            
            媒体查询,多栏布局
            
            border-image
            
            CSS3中新增了一种盒模型计算方式:box-sizing。盒模型默认的值是content-box, 新增的值是padding-box和border-box,几种盒模型计算元素宽高的区别如下:
            
            content-box(默认)
            
            布局所占宽度Width:
            
            Width = width + padding-left + padding-right + border-left + border-right
            
            布局所占高度Height:
            
            Height = height + padding-top + padding-bottom + border-top + border-bottom
            
            padding-box
            
            布局所占宽度Width:
            
            Width = width(包含padding-left + padding-right) + border-top + border-bottom
            
            布局所占高度Height:
            
            Height = height(包含padding-top + padding-bottom) + border-top + border-bottom
            
            border-box
            
            布局所占宽度Width:
            
            Width = width(包含padding-left + padding-right + border-left + border-right)
            
            布局所占高度Height:
            
            Height = height(包含padding-top + padding-bottom + border-top + border-bottom)


              7.对BFC规范的理解?

              BFC,块级格式化上下文,一个创建了新的BFC的盒子是独立布局的,盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC中的两个毗邻的块级盒在垂直方向(和布局方向有关系)的margin会发生折叠。
              
                  (W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行布局,以及与其他元素的关系和相互作用。


                8.说说你对语义化的理解?

                1,去掉或者丢失样式的时候能够让页面呈现出清晰的结构
                
                2,有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;
                
                3,方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;
                
                4,便于团队开发和维护,语义化更具可读性,是下一步吧网页的重要动向,遵循W3C标准的团队都遵循这个标准,可以减少差异化。


                  9.Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?

                  1)、<!DOCTYPE> 声明位于文档中的最前面,处于 <html> 标签之前。告知浏览器以何种模式来渲染文档。
                  2)、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
                  3)、在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
                  4)、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。


                    10.HTML与XHTML——二者有什么区别

                    1.所有的标记都必须要有一个相应的结束标记
                    2.所有标签的元素和属性的名字都必须使用小写
                    3.所有的XML标记都必须合理嵌套
                    4.所有的属性必须用引号""括起来
                    5.把所有<和&特殊符号用编码表示
                    6.给所有属性赋一个值
                    7.不要在注释内容中使“--”
                    8.图片必须有说明文字