牛客网前端错题总结一

一.link和@import的区别

1.从属关系区别

@import是 CSS 提供的语法规则,只有导入样式表的作用;link是HTML提供的标签,不仅可以加载 CSS 文件,还可以定义 RSS、rel 连接属性等。

2.加载顺序区别

加载页面时,link标签引入的 CSS 被同时加载;@import引入的 CSS 将在页面加载完毕后被加载。

3.兼容性区别

@import是 CSS2.1 才有的语法,故只可在 IE5+ 才能识别;link标签作为 HTML 元素,不存在兼容性问题。

4.DOM可控性区别

可以通过 JS 操作 DOM ,插入link标签来改变样式;由于 DOM 方法是基于文档的,无法使用@import的方式插入样式。

5.权重区别(该项有争议,下文将详解)

link引入的样式权重大于@import引入的样式。

   二.

     

    里面只能放
  • 但是
  • 里面可以放

    等标签。

    三.

    当margin-top、padding-top的值是百分比时,分别是如何计算的?

                                 相对最近父级块级元素的width,相对最近父级块级元素的width

    四.DOM中的事件对象

    DOM中的事件对象:(符合W3C标准)

       preventDefault()        取消事件默认行为

       stopImmediatePropagation() 取消事件冒泡同时阻止当前节点上的事件处理程序被调用。

       stopPropagation()      取消事件冒泡对当前节点无影响。

    IE中的事件对象:

       cancelBubble()          取消事件冒泡

       returnValue()             取消事件默认行为

    五.选择器的优先级

    ID选择器>Class选择器=伪类>标签名称选择器

    六.Number转换

    Number转换类型的参数如果为对象返回的就是NaN,

    那么Number({})返回的就是NaN。

    所以console.log(({}==false)?true:false)    返回值为false

    七.异步情况

    JS的运行机制! 事件(click,focus等等),定时器(setTimeout和setInterval),ajax,都是会触发异步属于异步任务;js是单线程的,一个时间点只能做一件事,优先处理同步任务; 按照代码从上往下执行,遇到异步,就挂起,放到异步任务里,继续执行同步任务,只有同步任务执行完了,才去看看有没有异步任务,然后再按照顺序执行! 

    八.label属性

    html5规范不允许加id,但是浏览器厂商却实现了这个功能,

    label标签只有两个属性

    for( 规定 label 绑定到哪个表单元素。 )

    form(规定 label 字段所属的一个或多个表单)

    九.页面性能

    白屏时间first paint 和可交互时间dom ready的关系是

    先触发first paint,后触发dom ready

    页面的性能指标详解:

    白屏时间(first Paint Time)——用户从打开页面开始到页面开始有东西呈现为止

    首屏时间——用户浏览器首屏内所有内容都呈现出来所花费的时间

    用户可操作时间(dom Interactive)——用户可以进行正常的点击、输入等操作,默认可以统计domready时间,因为通常会在这时候绑定事件操作

    总下载时间——页面所有资源都加载完成并呈现出来所花的时间,即页面 onload 的时间

    十.生成器

    yield关键字使生成器函数执行暂停,yield关键字后面的表达式的值返回给生成器的调用者。它可以被认为是一个基于生成器的版本的return关键字。

    yield关键字实际返回一个IteratorResult对象,它有两个属性,value和done。value属性是对yield表达式求值的结果,而done是false,表示生成器函数尚未完全完成。

    一旦遇到yield 表达式,生成器的代码将被暂停运行,直到生成器的next()方法被调用。每次调用生成器的next()方法时,生成器都会恢复执行,直到达到以下某个值

    如果只是单独调用生成器,不适用next(),则返回一个Generator{}对象

    function*countAppleSales(){

    varsaleList=[3,7,5];

    for(vari=0;i

    yieldsaleList[i];

    }

    }

    一旦生成器函数已定义,可以通过构造一个迭代器来使用它。

    varappleStore=countAppleSales();// Generator { }

    console.log(appleStore.next());// { value: 3, done: false }

    console.log(appleStore.next());// { value: 7, done: false }

    console.log(appleStore.next());// { value: 5, done: false }

    console.log(appleStore.next());// { value: undefined, done: true }

    十一.位运算

    function a(a)

    {

      a^=(1<<4)-1;

    return a;

    }

    1<<4   左移相当于1*2^4=16

    a^=16-1=15

    a=a^15=10^15

    ^ 异或运算:

    10的二进制00001010

    15的二进制00001111

    ========>00000101  转成十进制:5

    (按位异或运算,同为1或同为0取0,不同取1)

    十二.js判断一个对象是否是Array

    如何判断一个js对象是否是Array,arr为要判断的对象,其中最准确的方法是:Object.prototype.toString.call(arr) === '[object Array]';

        typeof(arr) 返回的是 Object

        instanceof 在跨 frame 对象构建的场景下会失效

        arr.toString 没有这种用法,正确的用法是 arr.toString() 返回的是数组的内容

    详细参考:

    http://www.nowamagic.net/librarys/veda/detail/1250 

    十三.form表单中input元素的readonlydisabled属性

    1.如果一个输入项的disabled设为true,则该表单输入项不能获取焦点,用户的所有操作(鼠标点击和键盘输入等)对该输入项都无效,最重要的一点是当提交表单时,这个表单输入项将不会被提交。

    2.而readonly只是针对文本输入框这类可以输入文本的输入项,如果设为true,用户只是不能编辑对应的文本,但是仍然可以聚焦焦点,并且在提交表单的时候,该输入项会作为form的一项提交。

    十四.浏览器Response Headers字段

        1)请求(客户端->服务端[request]) 

            GET(请求的方式) /newcoder/hello.html(请求的目标资源) HTTP/1.1(请求采用的协议和版本号) 

            Accept: */*(客户端能接收的资源类型) 

            Accept-Language: en-us(客户端接收的语言类型) 

            Connection: Keep-Alive(维护客户端和服务端的连接关系) 

            Host: localhost:8080(连接的目标主机和端口号) 

            Referer: http://localhost/links.asp(告诉服务器我来自于哪里) 

            User-Agent: Mozilla/4.0(客户端版本号的名字) 

            Accept-Encoding: gzip, deflate(客户端能接收的压缩数据的类型) 

            If-Modified-Since: Tue, 11 Jul 2000 18:23:51 GMT(缓存时间)  

            Cookie(客户端暂存服务端的信息) 

            Date: Tue, 11 Jul 2000 18:23:51 GMT(客户端请求服务端的时间)

        2)响应(服务端->客户端[response])

            HTTP/1.1(响应采用的协议和版本号) 200(状态码) OK(描述信息)

            Location: http://www.baidu.com(服务端需要客户端访问的页面路径)

            Server:apache tomcat(服务端的Web服务端名)

            Content-Encoding: gzip(服务端能够发送压缩编码类型)

            Content-Length: 80(服务端发送的压缩数据的长度)

            Content-Language: zh-cn(服务端发送的语言类型)

            Content-Type: text/html; charset=GB2312(服务端发送的类型及采用的编码方式)

            Last-Modified: Tue, 11 Jul 2000 18:23:51 GMT(服务端对该资源最后修改的时间)

            Refresh: 1;url=http://www.it315.org(服务端要求客户端1秒钟后,刷新,然后访问指定的页面路径)

            Content-Disposition: attachment; filename=aaa.zip(服务端要求客户端以下载文件的方式打开该文件)

            Transfer-Encoding: chunked(分块传递数据到客户端)

            Set-Cookie:SS=Q0=5Lb_nQ; path=/search(服务端发送到客户端的暂存数据)

            Expires: -1//3种(服务端禁止客户端缓存页面数据)

            Cache-Control: no-cache(服务端禁止客户端缓存页面数据)

            Pragma: no-cache(服务端禁止客户端缓存页面数据)

            Connection: close(1.0)/(1.1)Keep-Alive(维护客户端和服务端的连接关系)

            Date: Tue, 11 Jul 2000 18:23:51 GMT(服务端响应客户端的时间)

        在服务器响应客户端的时候,带上Access-Control-Allow-Origin头信息,解决跨域的一种方法。

    十五.怎么能够取得 ”class=wrapper” 中全部项的集合?

        错误答案:$(‘#wrapper’).html();  //返回的是dom结构。而不是集合

        正确答案:$(‘#wrapper’).contents();

    十六.运算符

    +"2"   =  2(+"2"中的加号是一元加操作符,+"2"会变成数值2)

    十七.解释型语言的特性有什么?

    非独立、效率低

    十八.null instanceof Object  返回false

    在js中 typeof  null会返回object,这并不意味着null是object类型,只是遗留错误。null不是object创建的实例对象

    十九.var a=b=3 相当于 var a = 3;b = 3;b是全局的

你可能感兴趣的:(牛客网前端错题总结一)