• 零碎知识点总结


    一、CSS hack

    目的: 就是使你的CSS代码兼容不同的浏览器,反过来也可以利用CSS hack 为不同版本浏览器定制
    编写不同的CSS效果。

    概念:由于不同厂商的浏览器或浏览器的不同版本对CSS的支持、解析不一样,导致在不同浏览器的环境中呈现出
    不一致的页面展现效果。这时,未获得统一的页面效果,就需要针对不同浏览器或不同版本写特定的CSS样式,
    我们把这个过程叫做CSS hack。

    1、 CSS hack方式以:条件注释法

    这种方式是IE浏览器专有的Hack方式
    只有在IE下生效

    <!--[if IE]>

    这段文字只在IE浏览器显示
    <![endif]-->

    <!--[if IE 6]>
    这段文字只在IE6浏览器显示
    <![endif]-->

    <!--[if gte IE 6]>
    这段文字只在IE6以上(包括)版本IE浏览器显示
    <![endif]-->

    <!--[if ! IE 8]>
    这段文字在非IE8浏览器显示
    <![endif]-->

    <!--[if !IE]>
    这段文字只在非IE浏览器显示
    <![endif]-->

    2、CSS hack方式二:类内属性前缀法
    属性前缀法是在CSS样式属性前加上一些特定浏览器才能识别的hack前缀,以达到
    预期的页面展示效果。
    说明:在标准模式中
    -″减号是IE6专有的hack
    “9″ IE6/IE7/IE8/IE9/IE10都生效
    “″ IE8/IE9/IE10都生效,是IE8/9/10的hack
    “9″ 只对IE9/IE10生效,是IE9/10的hack
    * IE6、IE7
    + IE6、IE7

    *+background-color:pink;只有IE6和IE7认识。

    3、 选择器前缀法

    *html *前缀只对IE6生效
    *+html *+前缀只对IE7生效
    @media screen9{...}只对IE6/7生效
    @media screen {body { background: red; }}只对IE8有效


    二、bootstrap实现响应式布局的原理
    响应式布局:就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本。
    这个概念为解决移动互联网浏览而诞生。

    利用栅格系统实现响应式布局:

    首选,栅格系统用于通过一系列的行(row)与列(column)的组合来创建
    布局,“行”必须包含在.container(固定宽度)或 .container-fluid(宽度为100%)中

    在Bootstrap3中主要把屏幕分成了三种(这里以行(row)来说明):
    .col-xs-* 超小屏幕,手机(宽度<768px)
    .col-sm-* 小屏幕,平板(宽度>=768px)
    .col-md-* 中等屏幕,桌面显示器(宽度>=992px)

    不管在哪种屏幕上,栅格系统都会自动的分12列

    这里实现了依据不同的宽度进行改变:
    .container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    }
    @media (min- 768px) {/*当宽度大于768px时触发*/
    .container {
    750px;
    }
    }
    @media (min- 992px) {/*当宽度大于992px时触发*/
    .container {
    970px;
    }
    }
    @media (min- 1200px) {/*当宽度大于1200px时触发*/
    .container {
    1170px;
    }
    }
    .container-fluid { /*这个是宽度默认*/
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    }


    三、面试题目及答案:

    1、浏览器的存储技术有哪些?

    答案:cookie localStorage sessionStorage UserData GlobalStorage
    Google Gear Flash ShareObject

    (1)Cookie
    1)cookie是什么:cookie 是指存储在用户本地终端上的数据,cookie数据会自动
    在web浏览器和web服务器之间传输,也就是说HTTP请求发送时,会把
    保存在该请求域名下的所有cookie值发送给web服务器,因此服务器监本是
    可以读、写存储在客户端的cookie的操作。
    2) cookie 的有效期
    cookie默认情况下的有效期是很短暂的,一旦用户关闭浏览器,cookie保存的
    数据就会丢失。
    延长有效期:1.设置http头信息中的cache-control属性的max-age值
    2.修改HTTp头信息中的expires属性值来延长有效期
    3) cookie 的作用域:它是通过文档源和文档路径来确定的。该作用域通过
    cookie的path和domain属性也是可以配置的。

    4) cookie的数目和大小的限制:每个web服务器保存的cookie数不能超过
    50个,每个cookie保存的数据不能超过4KB。如果超过4KB,服务器会处理不了。

    cookie的有点:能用于和服务器通信;当cookie快要过期时,可以重新设置而不是删除。
    cookie的缺点:它会随着http头信息一起发送,增加了网络流量(文档传输的负载)
    它只能存储少量的数据;它只能存储字符串;有潜在的安全问题。

    (2) LocalStorage(sessionStorage)

    主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题,localStorage
    中一般浏览器支持的是5M大小,不同浏览器中会有所不同。

    localStorage优点:

    1)localStorage 拓展了cookie的4K 限制
    2)localStorage可以将第一次请求的数据直接存储到本地,这个相当于一个
    5M大小的针对于前端页面的数据库,相比于cookie可以节约带宽,但是高版本
    的浏览器才支持
    3)localstorage 方法存储的数据没有时间限制。

    localStorage的缺点:

    1)浏览器的大小不同意,并且在IE8以上的版本才支持这个属性
    2)目前所有浏览器中都会把localStorage 的值类型限定为
    string类型,这个在对我们日常比较常见JSON对象类型需要一些转换。
    3)在浏览器的隐私模式下面不可读取
    4)localStorage 本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,
    会导致页面变卡
    5)localStorage不能被爬虫抓取到
    sessionStorage与localStorage的唯一一点区别就是localStorage属于永久性存储,而sessionStorage属于当会话结束的时候,sessionStorage中的键值对就会被清空。
    (3)、UserData、GlobalStorage、Google Gear

    这三种的使用都有一定的局限性,例如userData是IE浏览器专属,它的容量可以达到640K,这种方案可靠,不需要安装额外插件,只不过它仅在IE下有效~

    globalStorage适用于Firefox 2+的浏览器,类似于IE的userData~

    google gear是谷歌开发出的一种本地存储技术,需要安装Gear组件。

    (4)Flash ShareObject
    这种方式能能解决上面提到的cookie存储的两个弊端,而且能够跨浏览器,应该说是目前最好的本地存储方案。不过,需要在页面中插入一个Flash,当浏览器没有安装Flash控件时就不能用了。所幸的是,没有安装Flash的用户极少。

    强调一下:cookie,localStorage和sessionStorage的异同:

    共同点:都是保存在浏览器端,且同源的。

    区别:

    1)cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递;而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存;

    2)cookie数据有路径(path)的概念,可以限制cookie只属于某个路径下;

    3)存储大小限制也不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识;sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大;

    4)数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭;

    5)作用域不同,sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的;

    2、arguments 对象

    arguments 对象是所有(非箭头)函数中都可用的局部变量,此对象
    包含传递给函数的每个参数的条目。
    arguments对象不是一个 Array 。它类似于Array,但除了length属性和索引元素之外没有任何Array属性。

    (function(){return typeof arguments})(); //object

    3、如何判断js中的数据类型:typeof、instanceof、 constructor、 prototype方法比较
    如何判断js中的类型呢,先举几个例子:
    var a = "iamstring.";
    var b = 222;
    var c= [1,2,3];
    var d = new Date();
    var e = function(){alert(111);};
    var f = function(){this.name="22";};

    最常见的判断方法:typeof
    alert(typeof a) ------------> string
    alert(typeof b) ------------> number
    alert(typeof c) ------------> object
    alert(typeof d) ------------> object
    alert(typeof e) ------------> function
    alert(typeof f) ------------> function
    其中typeof返回的类型都是字符串形式,需注意,例如:
    alert(typeof a == "string") -------------> true
    alert(typeof a == String) ---------------> false
    另外typeof 可以判断function的类型;在判断除Object类型的对象时比较方便。

    判断已知对象类型的方法: instanceof
    alert(c instanceof Array) ---------------> true
    alert(d instanceof Date) ------------> true
    alert(f instanceof Function) ------------> true
    alert(f instanceof function) ------------> false
    注意:instanceof 后面一定要是对象类型,并且大小写不能错,该方法适合一些条件选择或分支。

    根据对象的constructor判断: constructor
    alert(c.constructor === Array) ----------> true
    alert(d.constructor === Date) -----------> true
    alert(e.constructor === Function) -------> true
    注意: constructor 在类继承时会出错
    eg,
    function A(){};
    function B(){};
    A.prototype = new B(); //A继承自B
    var aObj = new A();
    alert(aobj.constructor === B) -----------> true;
    alert(aobj.constructor === A) -----------> false;
    而instanceof方法不会出现该问题,对象直接继承和间接继承的都会报true:
    alert(aobj instanceof B) ----------------> true;
    alert(aobj instanceof B) ----------------> true;
    言归正传,解决construtor的问题通常是让对象的constructor手动指向自己:
    aobj.constructor = A; //将自己的类赋值给对象的constructor属性
    alert(aobj.constructor === A) -----------> true;
    alert(aobj.constructor === B) -----------> false; //基类不会报true了;

    通用但很繁琐的方法: prototype
    alert(Object.prototype.toString.call(a) === ‘[object String]’) -------> true;
    alert(Object.prototype.toString.call(b) === ‘[object Number]’) -------> true;
    alert(Object.prototype.toString.call(c) === ‘[object Array]’) -------> true;
    alert(Object.prototype.toString.call(d) === ‘[object Date]’) -------> true;
    alert(Object.prototype.toString.call(e) === ‘[object Function]’) -------> true;
    alert(Object.prototype.toString.call(f) === ‘[object Function]’) -------> true;
    大小写不能写错,比较麻烦,但胜在通用。
    通常情况下用typeof 判断就可以了,遇到预知Object类型的情况可以选用instanceof或constructor方法

    function fn(){
    return fn
    }
    new fn() instanceof fn //false

    function Foo(){}
    new Foo() instanceof Foo //true

    // 判断 foo 是否是 Foo 类的实例 , 并且是否是其父类型的实例
    function Aoo(){}
    function Foo(){}
    Foo.prototype = new Aoo();//JavaScript 原型继承

    var foo = new Foo();
    console.log(foo instanceof Foo)//true
    console.log(foo instanceof Aoo)//true

    4、下面哪个属性不会让div 脱离文档流(c)
    A. position:absolute B.position:fixed C.position:relative
    D.float:left

    5、flexbox 布局

    (1)基础

    1)创建一个flex容器

    要创建一个 flex 容器,您只需要将一个 display: flex 属性添加到一个元素上。默认情况下,所有的直接子元素都被认为是 flex 项,并从左到右依次排列在一行中。如果 flex 项的宽度总和大于容器,那么 flex 项将按比例缩小,直到它们适应 flex 容器宽度。
    2)将flex项排成一列

    可以通过(在 flex 容器中)设置 flex-direction: column 使 flex 项垂直布局。也可以通过设置 flex-direction: column-reverse 或 flex-direction: row-reverse 来使 flex 项以相反的顺序排列。
    (2)新手

    1)靠右对齐的flex项
    每个 Flexbox 模型都有 flex 方向(主轴)。justify-content 用于指定 flex 项在 flex 方向(direction)上的对齐位置。在上面的例子中,justify-content:flex-end 表示 flex 项在水平方向上靠 flex 容器的末端对齐。这就是为什么他们被放在了右边
    .flex-container {
    display: flex;
    justify-content: flex-end;
    }
    2)居中对齐flex项
    .flex-container {
    display: flex;
    justify-content: center;
    }

    6、正则表达式/^d**[^d]*[w]{6}$/,下面的字符串中哪个能正确匹配?(A)
    A. ***abcABCD_89 B.abc*abcABCDEF C.123*abcABCD-89 D. 123*ABCabcd-89

    7、(function(){var a=b=5})();console.log(b)console.log(a);

    上述代码输出结果是(程序抛错)

    (function(){
    var a=b=5;
    console.log(b);
    console.log(a)
    })()
    结果为//5 5

    js中连等赋值的执行顺序是 从右向左

    8、http 状态码有哪些,分别代表什么意思?

    1**(信息类):表示接收到请求并且继续处理

    100——客户必须继续发出请求
    101——客户要求服务器根据请求转换HTTp协议版本
    2** (响应成功):表示动作被成功接收、理解和接受

    200——表明该请求被成功地完成,所请求的资源发送回客户端
    201——提示知道新文件的URL
    202——接受和处理、但处理未完成
    203——返回信息不确定或不完整
    204——请求收到,但返回信息为空
    205——服务器完成了请求,用户代理必须复位当前已经浏览过的文件
    206——服务器已经完成部分用户的GET请求

    3**(重定向类):为了完成指定的动作,必须接受进一步处理
    300——请求的资源可在多处得到
    301——本网页被永久性转移到另一个URL
    302——请求的网页被转移到一个新的地址,但客户访问仍继续通过原始URL地址,重定向,新的URL会在response中的Location中返回,浏览器将会使用新的URL发出新的Request。
    303——建议客户访问其他URL或访问方式
    304——自从上次请求后,请求的网页未修改过,服务器返回此响应时,不会返回网页内容,代表上次的文档已经被缓存了,还可以继续使用
    305——请求的资源必须从服务器指定的地址得到
    306——前一版本HTTP中使用的代码,现行版本中不再使用
    307——申明请求的资源临时性删除

    4**(客户端错误类):请求包含错误语法或不能正确执行
    400——客户端请求有语法错误,不能被服务器所理解
    401——请求未经授权,这个状态代码必须和WWW-Authenticate报头域一起使用
    HTTP 401.1 - 未授权:登录失败
      HTTP 401.2 - 未授权:服务器配置问题导致登录失败
      HTTP 401.3 - ACL 禁止访问资源
      HTTP 401.4 - 未授权:授权被筛选器拒绝
    HTTP 401.5 - 未授权:ISAPI 或 CGI 授权失败
    402——保留有效ChargeTo头响应
    403——禁止访问,服务器收到请求,但是拒绝提供服务
    HTTP 403.1 禁止访问:禁止可执行访问
      HTTP 403.2 - 禁止访问:禁止读访问
      HTTP 403.3 - 禁止访问:禁止写访问
      HTTP 403.4 - 禁止访问:要求 SSL
      HTTP 403.5 - 禁止访问:要求 SSL 128
      HTTP 403.6 - 禁止访问:IP 地址被拒绝
      HTTP 403.7 - 禁止访问:要求客户证书
      HTTP 403.8 - 禁止访问:禁止站点访问
      HTTP 403.9 - 禁止访问:连接的用户过多
      HTTP 403.10 - 禁止访问:配置无效
      HTTP 403.11 - 禁止访问:密码更改
      HTTP 403.12 - 禁止访问:映射器拒绝访问
      HTTP 403.13 - 禁止访问:客户证书已被吊销
      HTTP 403.15 - 禁止访问:客户访问许可过多
      HTTP 403.16 - 禁止访问:客户证书不可信或者无效
    HTTP 403.17 - 禁止访问:客户证书已经到期或者尚未生效
    404——一个404错误表明可连接服务器,但服务器无法取得所请求的网页,请求资源不存在。eg:输入了错误的URL
    405——用户在Request-Line字段定义的方法不允许
    406——根据用户发送的Accept拖,请求资源不可访问
    407——类似401,用户必须首先在代理服务器上得到授权
    408——客户端没有在用户指定的饿时间内完成请求
    409——对当前资源状态,请求不能完成
    410——服务器上不再有此资源且无进一步的参考地址
    411——服务器拒绝用户定义的Content-Length属性请求
    412——一个或多个请求头字段在当前请求中错误
    413——请求的资源大于服务器允许的大小
    414——请求的资源URL长于服务器允许的长度
    415——请求资源不支持请求项目格式
    416——请求中包含Range请求头字段,在当前请求资源范围内没有range指示值,请求也不包含If-Range请求头字段
    417——服务器不满足请求Expect头字段指定的期望值,如果是代理服务器,可能是下一级服务器不能满足请求长
    5**(服务端错误类):服务器不能正确执行一个正确的请求
    HTTP 500 - 服务器遇到错误,无法完成请求
      HTTP 500.100 - 内部服务器错误 - ASP 错误
      HTTP 500-11 服务器关闭
      HTTP 500-12 应用程序重新启动
      HTTP 500-13 - 服务器太忙
      HTTP 500-14 - 应用程序无效
      HTTP 500-15 - 不允许请求 global.asa
      Error 501 - 未实现
    HTTP 502 - 网关错误
    HTTP 503:由于超载或停机维护,服务器目前无法使用,一段时间后可能恢复正常

    10、PNG、GIF、JPG 的区别即及如何选?

    Gif:色彩效果最低,但是体积小,有着几号的压缩效果,支持动画,并且支持透明
    的效果(不支持半透明哦),如果图片只是很单调的色彩,没有渐变色,选Gif最好。

    JPG:是数码相机最常用的格式,色彩还原好,可以在招聘不明显失真情况下,大福降低体积。
    缺点是不支持透明

    PNG:是最适合网络的图片!PNG的优点是,清晰,无损压缩,压缩比率很高,
    可渐变透明,具备几乎所有GIF的特点,缺点是没有JPG的颜色丰富。同样的
    图片体积也比JPG略大,8位的PNG完全可以替代掉GIF。

    11、如何判断一个对象是否属于某个类

    例子:
    class Animal {
    constructor(){
    this.type = 'animal'
    }
    says(say){

    setTimeout(()=>{

    console.log(this.type + ' says ' + say)
    }, 1000)
    }
    }
    var animal = new Animal();
    判断animal 这个对象是否属于Animal 的方法:
    animal instanceof Animal
    animal.constructor === Animal

    12、请尽可能多的列举浏览器兼容性问题

    问题一:不同浏览器,标签默认的外间距和内间距不同
    问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。
    碰到频率:100%
    解决方案:CSS里 *{margin:0;padding:0;}
    备注:这个是最常见的也是最易解决的一个浏览器兼容性问题,几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。

    问题二:行内属性标签,设置display:block后采用float布局,又有横行的margin的情况,IE6间距bug
    问题症状:IE6里的间距比超过设置的间距
    碰到几率:20%
    解决方案:在display:block;后面加入display:inline;display:table;
    备注:行内属性标签,为了设置宽高,我们需要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的margin后,在IE6下,他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签,所以我们再加上display:inline的话,它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。

    问题三:设置较小高度标签(一般小于10px),在IE6,IE7中高度超出自己设置高度

    问题症状:IE6、7里这个标签的高度不受控制,超出自己设置的高度
    碰到频率:60%
    解决方案:给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
    备注:这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的,这个标签的高度还是会达到默认的行高。

    问题四:图片默认有间距
    问题症状:几个img标签放在一起的时候,有些浏览器会有默认的间距,加了问题一中提到的通配符也不起作用。
    碰到几率:20%
    解决方案:使用float属性为img布局
    备注:因为img标签是行内属性标签,所以只要不超出容器宽度,img标签都会排在一行里,但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。

    13、请用css实现一个100x100的div横向和纵向的居中

    .div{
    100px;
    height: 100px;
    border:4px solid red;
    position:absolute;
    text-align: center;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    }

    14、有一个数组,var a= ['1','2','3'...];a的长度是100,内容填充随机整数的字符串,请
    先构造此数组a,然后将其内容去重
    const a = new Set();
    function random(){
    var num = Math.floor(Math.random()*100+1);
    return ''+num;
    }

    for(var i=0;i<100;i++){
    a.add(random());
    }

    console.log(a)

    15、编写一个函数,将列表子元素顺序反转

    <ul id='list'>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    </ul>
    var ul = $('#list');
    var lis = $('li');
    console.log(lis);
    var arr=[];
    for(var i =0;i<lis.length;i++){
    arr.push(lis[i].innerText);
    }
    console.log(arr);
    arr = arr.reverse();
    console.log(arr);
    ul.empty();
    for(var i=0;i<arr.length;i++){
    ul.append(`<li>${arr[i]}</li>`)
    }

    16、input的属性为placeholder时,怎样改变placeholder里字体的颜色?
    <style>
    input::-webkit-input-placeholder{
    color:red;
    }
    input::-moz-placeholder{ /* Mozilla Firefox 19+ */
    color:red;
    }
    input:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */
    color:red;
    }
    input:-ms-input-placeholder{ /* Internet Explorer 10-11 */
    color:red;
    }
    </style>

    17、写出下面代码的输出结果

    class Junjia{
    static fn(){
    console.log(this.age+'28');
    }
    constructor(age){
    this.age = age;
    this.fn = function(){
    console.log(this.age);
    }
    }
    }
    let test = new Junjia('28');
    test.fn() // 28
    Junjia.fn();// undefined28

    18、输出一下代码的运行结果

    var bar = 0;
    var obj = {
    bar:1,
    foo:function(){
    console.log(this.bar);
    }
    }
    var obj2 = {
    Bar:2,
    foo:obj.foo
    }
    var obj3 = {
    bar:3,
    foo:function(){
    return obj.foo
    }
    }
    var tempFoo = obj2.foo;
    obj.foo(); //1
    obj2.foo(); //undefined
    obj3.foo() //function(){console.log(this.bar)}
    tempFoo(); // 0

    19、图片懒加载原理

      1) 什么是图片懒加载

       就是当访问一个页面的时候,先把img元素或其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次),只有

    当图片出现在浏览器的可是区域内时,才设置图片真正的路径,让图片显示出来。这就是图片懒加载

     2)为什么使用图片懒加载

         比如一个页面中有很多图片,如淘宝、京东首页等,如果一上来就发送那么多请求,页面加载就会很漫长,更要命的是一上来就发送百八十个请求,服务可能就吃不消了(因为不是一两个人在访问这个页面),因此图片懒加载不仅可以减轻服务器压力,而且可以让加载好的页面更快的呈现在用户面前(用户体验好)

        

  • 相关阅读:
    HITCON Training lab14 magic heap 堆技巧unsroted bin attack
    堆技巧Unsorted Bin Attack
    2014-hack-lu-oreo 堆技巧house of spirit
    极客时间JVM虚拟机
    堆技巧 housr_of_spirit 绕过检查源码分析
    babyheap_0ctf_2017 堆技巧 fastbin-attack
    gyctf_2020_borrowstack wp
    SqlServer Where后面Case When语句的写法
    EasyUI TextBox的onkeypress事件
    SQL
  • 原文地址:https://www.cnblogs.com/WEI-web/p/8532690.html
Copyright © 2020-2023  润新知