牛客笔记

最新推荐文章于 2024-05-17 14:47:47 发布

原创最新推荐文章于 2024-05-17 14:47:47 发布 · 273 阅读

CC 4.0 BY-SA版权

12.11

https://www.nowcoder.com/test/question/done?tid=20384076&qid=14747#summary

（1）cookie 是靠谱的浏览器都支持；localStorge 比 cookie 存的更多，获取更方便，而且存储内容不会随请求发送给服务器；session 虽然需要 cookie 支持（通常存放加密过的 sessionId），但是不在浏览器端存放主要信息，排除；IE 支持 userData 存储数据，但是基本很少使用到，除非有很强的浏览器兼容需求。

（2）浏览器端：

WebStorage(localStorage、sessionStorage)

userData

indexedDB

服务器端：

session

（3）有时需要将网页中的一些数据保存在浏览器端，这样做的好处是，当下次访问页面时，不需要再次向服务器请求数据，直接就可以从本地读取数据。目前常用的有以下几种方法：

cookie

cookie会随着每次HTTP请求头信息一起发送，无形中增加了网络流量，另外，cookie能存储的数据容量有限，根据浏览器类型不同而不同，IE6大约只能存储2K。

Flash ShareObject

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

缺点：需要安装Flash插件。

Google Gear

Google开发出的一种本地存储技术。

缺点：需要安装Gear组件。

userData

IE浏览器可以使用userData来存储数据，容量可达到640K，这种方案是很可靠的，不需要安装额外的插件。缺点：它仅在IE下有效。

sessionStorage

使用于Firefox2+的火狐浏览器，用这种方式存储的数据仅窗口级别有效，同一个窗口（或者Tab）页面刷新或者跳转，都能获取到本地存储的数据，当新开窗口或者页面时，原来的数据就失效了。

缺点：IE不支持、不能实现数据的持久保存。

globalStorage

使用于Firefox2+的火狐浏览器，类似于IE的userData。

1 //赋值 2 globalStorage[location.hostname]['name'] = 'tugai'; 3 //读取 4 globalStorage[location.hostname]['name']; 5 //删除 6 globalStorage[location.hostname].removeItem('name');

缺点：IE不支持。

localStorage

localStorage是Web Storage互联网存储规范中的一部分，现在在Firefox 3.5、Safari 4和IE8中得到支持。

缺点：低版本浏览器不支持。

结论：
Flash shareobject是不错的选择，如果你不想在页面上嵌入Flash，可以结合使用userData(IE6+)和globalStorage(Firefox2+)和localStorage(chrome3+)实现跨浏览器。

https://www.nowcoder.com/test/question/done?tid=20384076&qid=15015#summary

History 对象包含用户（在浏览器窗口中）访问过的 URL。
History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。

Location 对象包含当前URL的信息

提供了与当前打开的url一起工作的方法和属性，是一个静态的对象

Window对象表示浏览器打开的窗口

Navigator 对象包含有关浏览器的信息

Document 包含与文档元素一起工作的对象，它将这些元素封装起来供编程人员使用

CSS3新增属性用法整理：

1、box-shadow（阴影效果）

2、border-color（为边框设置多种颜色）

3、border-image（图片边框）

4、text-shadow（文本阴影）

5、text-overflow（文本截断）

6、word-wrap（自动换行）

7、border-radius（圆角边框）

8、opacity（透明度）

9、box-sizing（控制盒模型的组成模式）

10、resize（元素缩放）

11、outline（外边框）

12、background-size（指定背景图片尺寸）

13、background-origin（指定背景图片从哪里开始显示）

14、background-clip（指定背景图片从什么位置开始裁剪）

15、background（为一个元素指定多个背景）

16、hsl（通过色调、饱和度、亮度来指定颜色颜色值）

17、hsla（在hsl的基础上增加透明度设置）

18、rgba（基于rgb设置颜色，a设置透明度）

http://blog.sina.com.cn/s/blog_a01a36330101doc0.html

2018/12/13

https://www.nowcoder.com/questionTerminal/2dec2efe4bed495fad8eeaa722bc34ea

选择E

IndexdDB 是 HTML5 的本地存储，把一些数据存储到浏览器（客户端）中，当与网络断开时，可以从浏览器中读取数据，用来做一些离线应用。

Cookie 通过在客户端 ( 浏览器 ) 记录信息确定用户身份，最大为 4 kb 。

url 参数用的是 get 方法，从服务器上获取数据，大小不能大于 2 kb 。

Session 是服务器端使用的一种记录客户端状态的机制。

post 是向服务器传送数据，数据量较大。

local Storage 也是 HTML5 的本地存储，将数据保存在客户端中（一般是永久的）。

https://www.nowcoder.com/questionTerminal/52c41b84e32a4158883cb112a1d1f850

1）filter属于数组的迭代方法。而data是对象,对象无法调用数组的方法。keys方法可以取得所有可以“枚举的”的“实例属性”。

console.log(Object.keys(data)) = ["a", "b", "c", "d"]； //对象data的可枚举实例属性的集合。

2）此时式子变成了下面这样：

console.log(["a", "b", "c", "d"].filter(function(x) { return x > 2;})) //输出空，因为字母字符串与数值比较，还会被转化成NaN，

此时应该通过最开始的对象 data结合对象的属性数组，取对象的值。 x是当前元素的值:

x = "a" data["a"] = 1,

x = "b" data["b"] = 2,

x = "c" data["c"] = 3,

x = "d" data["d"] = 4,

ps：filter方法的用法：http://www.runoob.com/jsref/jsref-filter.html

3）总结过程如下：①对象的属性组成数组

②通过对象的属性数组，去调用对象的值

Object.keys(Object)

Array.filter(function)

Object是包含属性和方法的对象，可以是创建的对象或现有文档对象模型 (DOM) 对象。

Object.keys(object)的返回值是一个数组，其中包含对象的可枚举属性和方法的名称。

Array.filter(function)对数组进行过滤返回符合条件的数组。

Object.keys(data)的返回值为数组["a","b","c","d"]，经过 filter(function(x) { return ; })过滤，返回值大于2的key的数组。x为返回数组的属性名称即“a"、"b"、"c"、“d”，则对应的属性值为data[x]，比较语句为data[x]>2。

浮动元素只对后面元素有影响，浮动元素本身并不浮动，只是脱离文档流，后面的元素会上移而占据浮动元素的位置。

2018/12/14

1.https://www.nowcoder.com/test/question/done?tid=20446307&qid=44711#summary

https://blog.youkuaiyun.com/sakurallj/article/details/48277463

2.https://www.nowcoder.com/questionTerminal/04ba5a0b20db4dfe9f777a1049149d26

display: none和visibility:hidden的区别就是visibility:hidden会保留元素的空间


repaint(重绘) ，repaint发生更改时，元素的外观被改变，且在没有改变布局的情况下发生，如改变outline,visibility,background color，不会影响到dom结构渲染。

reflow(渲染)，与repaint区别就是他会影响到dom的结构渲染，同时他会触发repaint，他会改变他本身与所有父辈元素(祖先)，这种开销是非常昂贵的，导致性能下降是必然的，页面元素越多效果越明显。

所以display:none才会产生reflow

visibility:hidden只会出发repaint

3.https://www.nowcoder.com/questionTerminal/42723269e25b478ca0ea8f7d37d8e57c

2018/12/16

DOM中的事件对象：（符合W3C标准）

preventDefault() 取消事件默认行为

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

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

IE中的事件对象：

cancelBubble() 取消事件冒泡

returnValue() 取消事件默认行为

浅谈javascript中stopImmediatePropagation函数和stopPropagation函数的区别

2018/ 12/17

1.document.write和 innerHTML的区别

document.write只能重绘整个页面,
innerHTML可以重绘页面的一部分。

2018/12/18

1. https://www.nowcoder.com/questionTerminal/4cac6f48df3245a797d9b527bb34ed11

数组中也有for……in，相较于对象中的用法是有区别的：

数组中

var arr = ['曹操','曹植','曹丕']

for(i in arr){

console.log(i) //0 1 2

console.log(arr[i]) //曹操曹植曹丕

}

对象中

var obj = new Object();

obj = {

father:'曹操',

son:'曹植'

}

for(i in obj){

console.log(i) ; //代表key值 father son

console.log(obj[i]) ; //代表vulue值曹操曹植

}

2.https://www.nowcoder.com/profile/4990299/test/20489545/50407?onlyWrong=0

setTimeout不是JavaScript的全局函数，而是宿主环境（即浏览器）的全局函数

3.https://www.nowcoder.com/questionTerminal/18a62dda87234ff3ad255f0d6177ab15

web storage有以下几种对象：

sessionStorage：存储特定于某个会话的数据，该数据只保留到浏览器关闭。

globalStorage：目的是跨越会话存储数据，不过要指定哪些域可以访问该数据。如果不使用 removeItem() 或 delete 删除，或者用户未清除浏览器缓存，存储在globalStorage上的数据会一直保留在磁盘上。所以globalStorage非常适合在客户端存储文档或长期保留用户偏好设置。

localStorage：在HTML5中作为持久保持客户端数据的方案取代了globalStorage。它不能被指定访问规则，要访问localStorage，页面必须来自同一个域名，使用同一种协议，在同一个端口上。它的数据也保留到通过JavaScript删除或用户清除浏览器缓存。

onload事件触发时，页面上所有的DOM，样式表，脚本，图片，flash都已经加载完成了，domContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flash；
所有浏览器都支持冒泡，但只有标准的浏览器如:chrome,firfox,safari支持捕获，IE和opera不支持捕获；

301是永久重定向，302是临时重定向。

2018/12/19

1. https://www.nowcoder.com/questionTerminal/3e0c2783e44c448c86daf2435f1f7be4

想法1：这是一个闭包，闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。闭包中被引用的变量不会被回收，f1，f2函数执行时创建了各自的活动对象用来保存变量，互不干扰
这里的局部变量i，对f1()来说是全局变量，对f2()来说也是全局变量，但是f1()的i跟f2()的i又是相互独立相互不可见的，f1()每执行一次，f1()的i就加一，f2（）每次执行一次，f2()的i就加1，但是相互之间不影响，因此结果是010

想法2：当函数被创建时，内部[scope]属性被存储，在这个属性中保存一个包含全局变量对象的作用域链。

当函数被调用时，会创建一个执行环境及相应的作用域链，argument和实参为其进行初始化。

这里f1()函数和f2()函数在调用时会创建两个执行环境，保存各自的变量对象，结果是没有关系的。而同一个函数在多次调用时返回值会被保存在同一个变量对象中。

2.https://www.nowcoder.com/questionTerminal/da4115e308c948169a9a73e50d09a3e7

每个li标签的onclick事件执行时，本身onclick绑定的function的作用域中没有变量i ,则解析引擎会寻找父级作用域，发现父级作用域中有i，且for循环绑定事件结束后，i已经赋值为4，所以每个li标签的onclick事件执行时，alert的都是父作用域中的i，也就是4。这是作用域的问题。

为什么是4？
一般是先渲染Dom元素，然后绑定事件；所以元素渲染完后，就会立即绑定事件，即执行这段代码
var elements=document.getElementsByTagName('li');
    var length=elements.length;
    for(var i=0;i<length;i++){
        elements[i].οnclick=function(){
        alert(i);
    }
；用户触发onclick事件时，这段绑定事件的方法肯定执行完啦，此时，这个for循环已经结束了，并且i的值刚好为4，并退出了循环。

备注：

闭包允许内层函数引用父函数中的变量，但是该变量是最终值

另一个我觉得好的解释

（《JavaScript高级程序设计》解释：）这是由于作用域链的这种配置机制引出的一个副作用，即闭包只能取得包含函数中任何变量的最后一个值。闭包所保存的是整个变量对象，而不是某个特殊的变量。

1	`这里的闭包函数elements[i].onclick=function(){alert(i);}`

的作用域链中保存着闭包的活动对象（这里为空）和全局变量对象（主要是i）,

所以，它们引用的是同一个变量i；当点击完成后，变量i=4,也就是每个内部函数i的值都是4；

可以通过创建另一个匿名函数强制让闭包的行为符合预期：

window.onload = function() {

var elements=document.getElementsByTagName('li');

var length=elements.length;

for(var i=0;i<length;i++){

elements[i].onclick=function(num){

return function() {

alert(num);

};

}(i);

}

在调用匿名函数时，我们传入变量i，由于参数是按值传递的，所以就会将变量i的当前值复制给参数num。而这个匿名函数内部，又创建并alert了一个访问num的闭包。这样，每一次点击都有num变量的一个副本，因此可以返回各自不同的数值。

2018/12/20

1. :last-child与:last-of-type的区别

关于:last-child手册中是这么解释的：

The :last-child CSS pseudo-class represents the last element among a group of sibling elements.

CSS伪类 :last-child 代表在一群兄弟元素中的最后一个元素。

举个栗子：
从代码和图可以看出:last-child选择了最后一个li标签。

同时，我们换另外一段代码，看看是否还有这样的效果。
从代码和图可以看出，:last-child并没有起到我们想要的作用。如果，这个时候去掉最后的div标签，再看看效果。
这时，效果出来了，那么，可以总结了。

:last-child表示其父元素的最后一个子元素，且这个元素是css指定的元素，才可以生效。

END

:last-of-type

关于:last-of-type手册中是这么解释的：

The :last-of-type CSS pseudo-class represents the last element of its type among a group of sibling elements.

CSS伪类:last-of-type代表在一群兄弟元素中的最后一个指定类型的元素。

直接用上面两个栗子。

没有干扰元素，OK。

有干扰元素，OK。
:last-of-type表示其父元素下的最后一个指定类型的元素。

2018/12/22

1.https://www.nowcoder.com/test/question/done?tid=20532835&qid=14757#summary

页面中使用CSS的方式主要有3种：行内添加定义style属性值，页面头部内嵌调用和外面链接调用，其中外面引用有两种：link和@import。外部引用CSS两种方式link和@import的方式分别是：

XML/HTML代码
<link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" />
XML/HTML代码
<style type="text/css" media="screen">
@import url("CSS文件");
</style>

两者都是外部引用CSS的方式，但是存在一定的区别：

区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。

补充：@import最优写法
@import的写法一般有下列几种：

@import 'style.css' //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
@import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4不识别
@import url(style.css) //Windows NS4, Macintosh NS4不识别
@import url('style.css') //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
@import url("style.css") //Windows NS4, Macintosh NS4不识别
由上分析知道，@import url(style.css) 和@import url("style.css")是最优的选择，兼容的浏览器最多。从字节优化的角度来看@import url(style.css)最值得推荐。

2.https://www.nowcoder.com/test/question/done?tid=20532835&qid=49833#summary

(1)可以对元素的margin设置百分数，百分数是相对于父元素的width计算，不管是margin-top/margin-bottom还是margin-left/margin-right。（padding同理）

如果没有为元素声明width，在这种情况下，元素框的总宽度包括外边距取决于父元素的width，这样可能得到“流式”页面，即元素的外边距会扩大或缩小以适应父元素的实际大小。如果对这个文档设置样式，使其元素使用百分数外边距，当用户修改浏览窗口的宽度时，外边距会随之扩大或缩小。

为什么margin-top/margin-bottom的百分数也是相对于width而不是height呢？

CSS权威指南中的解释：

我们认为，正常流中的大多数元素都会足够高以包含其后代元素（包括外边距），如果一个元素的上下外边距时父元素的height的百分数，就可能导致一个无限循环，父元素的height会增加，以适应后代元素上下外边距的增加，而相应的，上下外边距因为父元素height的增加也会增加，如果循环。

(2)滥用硬件加速会导致严重性能问题，因为它增加了内存使用，并且它会导致移动端电池寿命减少。

3.https://www.nowcoder.com/questionTerminal/13b78a778d324989a29c4a69030d68c2

A 项，访问者的信息一般都可以处理成 kv 键值对的形式，故可以保存在 Cookie 中，正确。

B 项，通过设置 Cookie 的 path 等属性，可以在特定域名或 URI 下共享 Cookie 信息，正确。

C 项，通过在 Cookie 中保存用户uid、服务器会话sid等方法，可以记录用户登录状态，正确。

D 项，Cookie 是保存在用户浏览器上的小文本文件，不是数据库，也没有提供操作数据库的 API，故此项错误。

p:last-of-type 选择其父元素的最后的一个P元素

p:last-child 选择其父元素的最后子元素(一定是P才行)

p:first-of-type 选择其父元素的首个P元素

p:first-child 选择其父元素的首个p元素(一定是p才行)

p:only-child　　　　选择其父元素的只有一个元素(而且这个元素只能是p元素，不能有其他元素)

p:only-of-type　　　选择其父元素的只有一个p元素(不能有第二个P元素，其他元素可以有)

选第N个

p:nth-child(n) 　　选择其父元素的第N个刚好是p的元素

p:nth-last-child(n) ..............................................从最后一个子元素开始计数

p:nth-of-type(n)　选择其父元素的n个元素

p:nth-last-of-type(n) ........................从最后一个子元素开始计数

5.https://www.nowcoder.com/profile/4990299/test/20512498/145429?onlyWrong=0

js中的栈与堆的讲解/基本数据类型与引用类型的讲解

1、栈（stack）和堆（heap）

　　stack为自动分配的内存空间，它由系统自动释放；而heap则是动态分配的内存，大小不定也不会自动释放。　　　　　　　

2、基本类型和引用类型

　　基本类型：存放在栈内存中的简单数据段，数据大小确定，内存空间大小可以分配。

　　5种基本数据类型有Undefined、Null、Boolean、Number 和 String，它们是直接按值存放的，所以可以直接访问。

　　引用类型：存放在堆内存中的对象，变量实际保存的是一个指针，这个指针指向另一个位置。每个空间大小不一样，要根据情况开进行特定的分配。

　　当我们需要访问引用类型（如对象，数组，函数等）的值时，首先从栈中获得该对象的地址指针，然后再从堆内存中取得所需的数据。

3、传值与传址

　　前面之所以要说明什么是内存中的堆、栈以及变量类型，实际上是为下文服务的，就是为了更好的理解什么是“浅拷贝”和“深拷贝”。

　　基本类型与引用类型最大的区别实际就是传值与传址的区别。测试用例：

 1     var a = [1,2,3,4,5];
 2     var b = a;//传址 ,对象中传给变量的数据是引用类型的，会存储在堆中；
 3     var c = a[0];//传值，把对象中的属性/数组中的数组项赋值给变量，这时变量C是基本数据类型，存储在栈内存中；改变栈中的数据不会影响堆中的数据
 4     alert(b);//1,2,3,4,5
 5     alert(c);//1
 6     //改变数值        
 7     b[4] = 6;
 8     c = 7;
 9     alert(a[4]);//6
10     alert(a[0]);//1

　　从上面我们可以得知，当我改变b中的数据时，a中数据也发生了变化；但是当我改变c的数据值时，a却没有发生改变。

　　这就是传值与传址的区别。因为a是数组，属于引用类型，所以它赋予给b的时候传的是栈中的地址（相当于新建了一个不同名“指针”），而不是堆内存中的对象。而c仅仅是从a堆内存中获取的一个数据值，并保存在栈中。所以b修改的时候，会根据地址回到a堆中修改，c则直接在栈中修改，并且不能指向a堆内存中。

3、浅拷贝

　　前面已经提到，在定义一个对象或数组时，变量存放的往往只是一个地址。当我们使用对象拷贝时，如果属性是对象或数组时，这时候我们传递的也只是一个地址。因此子对象在访问该属性时，会根据地址回溯到父对象指向的堆内存中，即父子对象发生了关联，两者的属性值会指向同一内存空间。

 1 　　var a = {
 2         key1:"11111"
 3     }
 4     function Copy(p) {
 5         var c = {};
 6         for (var i in p) { 
 7         　　c[i] = p[i];
 8         }
 9         return c;
10 　　}
11     a.key2 = ['小辉','小辉'];
12     var b = Copy(a);
13 　　 b.key3 = '33333';
14     alert(b.key1);     //1111111
15     alert(b.key3);    //33333
16     alert(a.key3);    //undefined

　　a对象中key1属性是字符串，key2属性是数组。a拷贝到b，12属性均顺利拷贝。给b对象新增一个字符串类型的属性key3时，b能正常修改，而a中无定义。说明子对象的key3（基本类型）并没有关联到父对象中，所以undefined。

1 b.key2.push("大辉");
2 alert(b.key2);    //小辉，小辉，大辉
3 alert(a.key2);    //小辉，小辉，大辉

　　但是，若修改的属性变为对象或数组时，那么父子对象之间就会发生关联。从以上弹出结果可知，我对b对象进行修改，a、b的key2属性值（数组）均发生了改变。其在内存的状态，可以用下图来表示。

　　原因是key1的值属于基本类型，所以拷贝的时候传递的就是该数据段；但是key2的值是堆内存中的对象，所以key2在拷贝的时候传递的是指向key2对象的地址，无论复制多少个key2，其值始终是指向父对象的key2对象的内存空间。

4、深拷贝

　　或许以上并不是我们在实际编码中想要的结果，我们不希望父子对象之间产生关联，那么这时候可以用到深拷贝。既然属性值类型是数组和或象时只会传址，那么我们就用递归来解决这个问题，把父对象中所有属于对象的属性类型都遍历赋给子对象即可。测试代码如下：

 1 　　function Copy(p, c) {
 2         var c = c || {};
 3         for (var i in p) {
 4         　　if (typeof p[i] === 'object') {
 5         　　　　　c[i] = (p[i].constructor === Array) ? [] : {};
 6         　　　　　Copy(p[i], c[i]);
 7         　　} else {
 8         　　　　　c[i] = p[i];
 9         　　}
10         }
11         return c;
12 　　}    
13     a.key2 = ['小辉','小辉'];
14     var b={};
15     b = Copy(a,b);        
16     b.key2.push("大辉");
17     alert(b.key2);    //小辉，小辉，大辉
18     alert(a.key2);    //小辉，小辉

　　由上可知，修改b的key2数组时，没有使a父对象中的key2数组新增一个值，即子对象没有影响到父对象a中的key2。其存储模式大致如下：