一.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元素的readonly与disabled属性
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是全局的