佛系前端面试题记录--第六周

1.link 和@import 的区别是？
2.浏览器的内核分别是什么?
3.HTML5的离线储存有几种方式？
- 1.web storage
- 2.LocalStorage
- 3.SessionStorage
- 4.离线缓存（application cache）
4.请描述一下 cookies，sessionStorage 和 localStorage 的区别？
5.CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有哪些？
6.为什么要初始化CSS样式？
7.css定义的权重
8.写出几种IE6 BUG的解决方法
9.call和apply的区别
10.解释jsonp的原理，以及为什么不是真正的ajax
11.javascript的本地对象，内置对象和宿主对象
12.javascript的同源策略
13.什么叫优雅降级和渐进增强？
14.一次完整的HTTP事务是怎样的一个过程？

1.link 和@import 的区别是？

1.从属关系区别

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

2.加载顺序区别

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

3.兼容性区别

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

4.DOM可控性区别

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

2.浏览器的内核分别是什么?

1.Trident内核（IE内核）
使用浏览器有：
IE6、IE7、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）
360安全浏览器（1.0-5.0为Trident，6.0为Trident+Webkit，7.0为Trident+Blink）
2345浏览器
搜狗高速浏览器（1.x为Trident，2.0及以后版本为Trident+Webkit）
糖果浏览器
UC浏览器（Webkit内核+Trident内核）
猎豹极轻浏览器，猎豹安全浏览器（1.0-4.2版本为Trident+Webkit，4.3及以后版本为Trident+Blink）
傲游浏览器（傲游1.x、2.x为IE内核，3.x为IE与Webkit双核）
百度浏览器（早期版本）

2.Gecko（Firefox内核）
使用浏览器有：
Mozilla Firefox
Mozilla SeaMonkey
waterfox（Firefox的64位开源版）
K-Meleon。

3.Presto（Opera前内核）–已废弃

Opera12.17及更早版本曾经采用的内核，现已停止开发并废弃，该内核在2003年的Opera7中首次被使用，该款引擎的特点就是渲染速度的优化达到了极致，然而代价是牺牲了网页的兼容性。

4.Webkit（Safari内核，Chrome内核原型，开源）
苹果公司的内核，使用浏览器有：
Apple Safari
Google Chrome
Symbian手机浏览器
Android 默认浏览器

5.Blink
Blink是一个由Google和Opera Software开发的浏览器排版引擎，Google计划将这个渲染引擎作为Chromium计划的一部分
使用浏览器有：
Chrome
Opera

3.HTML5的离线储存有几种方式？

html5在引入webStorage之前，主要用cookies.

1.web storage

html5的webstorage 分两种：LocalStorage 和SessionStorage，两者的差别主要在生命周期不同。

2.LocalStorage

LocalStorage用于持久化的本地存储，存储资料在客户端（client）的浏览器上，除非主动删除数据，否则数据是永远不会过期的。LocalStorage使用键值对的方式进行存储，存储的方式只能是字符串。存储内容可以有图片、json、样式、脚本等只要可以序列化为字符串的。

localstorage API基本使用方法：

使用localStorage.setItem(key,value)设置数据，如下：

 for(var i=0; i<10; i++){localStorage.setItem(i,i);}

使用localStorage.getItem(key) 获取数据，使用localStorage.valueOf()获取全部数据，如下：

  for(var i=0; i<10; i++){localStorage.getItem(i);}

使用localStorage.removeItem(key)删除数据，如下：

 for(var i=0; i<5; i++){localStorage.removeItem(i);}

使用localStorage.clear()清空全部数据，使用localStorage.length 获取本地存储数据数量，
使用localStorage.key(N)获取第 N 个数据的 key 键值。

3.SessionStorage

SessionStorage用于本地存储一个会话中的数据，这些数据只有在同一个会话中的页面才能访问并且会话结束，例如关闭窗口后，，数据也会随之被销毁。它是一种会话级别的存储。

SessionStorage的使用方法与localstorage的使用方法相似。

webstorage 与cookie的区别

cookie数据始终在同源的http请求中携带，cookie在浏览器和服务器端来回传递，而localstorage和sessionstorage不会自动把数据传送给服务器端，仅在本地保存。
存储大小限制不同，cookie的存储数据大小要求不能超过4k，每次的http请求都会携带cookie，所以保存的数据需要比较小。sessionstorage和localstorage存储数据大小限制比cookie要大，可以达到5m或者更大，不同浏览器设置可能不同。
数据生命周期有所不同。cookie的生命周期一般在其设置的过期时间之前有效。而sessionstorage仅在关闭窗口前有效，localstorage持久有效，直到手动删除。
作用域不同，sessionstorage不在不同浏览器中共享，即使是同一页面也不支持。而localstorage在所有同源窗口中都是共享的，同样，cookie在所有同源窗口中也是可以共享的。
cookie的数据还有路径的概念，可以通过设置限制cookie只属于某一个路径。
web storage支持事件通知机制，可以将数据更新的通知发送给监听者。

使用webstorage的好处：

减少网络流量：使用webstorage将数据保存在本地中，不用像cookie那样，每次传送信息都需要发送cookie，减少了不必要的数据请求，同时减少数据在浏览器端和服务器端来回传递。
快速显示数据：从本地获取数据比通过网络从服务器获取数据效率要高，因此网页显示也要比较快。
临时存储：很多时候数据只需要在用户浏览一组页面期间使用，关闭窗口后数据就可以丢弃了，这种情况使用sessionStorage非常方便。
不影响网站效能：因为web storage只作用在客户端的浏览器，不会占用频宽，不想网站效能，所以可以把size大，安全性低的资料存储在web storage中，提ga高网站效能。

4.离线缓存（application cache）

HTML5引入了应用程序缓存器，可对web进行缓存，在没有网络形况下使用，通过创建cache manifest文件,创建应用缓存。

参考链接：http://blog.csdn.net/molly_xu/article/details/51147236（转载）

还有Web SQL、IndexedDB等存储方式详情点这里

参考
https://blog.csdn.net/qq_32524751/article/details/74079668
https://blog.csdn.net/litfer/article/details/7572616

4.请描述一下 cookies，sessionStorage 和 localStorage 的区别？

cookie数据始终在同源的http请求中携带，cookie在浏览器和服务器端来回传递，而localstorage和sessionstorage不会自动把数据传送给服务器端，仅在本地保存。
存储大小限制不同，cookie的存储数据大小要求不能超过4k，每次的http请求都会携带cookie，所以保存的数据需要比较小。sessionstorage和localstorage存储数据大小限制比cookie要大，可以达到5m或者更大，不同浏览器设置可能不同。
数据生命周期有所不同。cookie的生命周期一般在其设置的过期时间之前有效。而sessionstorage仅在关闭窗口前有效，localstorage持久有效，直到手动删除。
作用域不同，sessionstorage不在不同浏览器中共享，即使是同一页面也不支持。而localstorage在所有同源窗口中都是共享的，同样，cookie在所有同源窗口中也是可以共享的。
cookie的数据还有路径的概念，可以通过设置限制cookie只属于某一个路径。
web storage支持事件通知机制，可以将数据更新的通知发送给监听者。

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

CSS 选择符有哪些？

1.id选择器（#id）

2.类选择器（.class）

3.标签选择器（div，h1，p）

4.相邻选择器（h1 + p）

5.子选择器（ul > li）

6.后代选择器（li a）

7.通配符选择器（ * ）

8.属性选择器（a[title]）

9.伪类选择器（a:hover，li:nth-child）

可继承的样式

1.字体系列属性 font，font-family，font-weight，font-size，font-style，font-variant，font-stretch，font-size-adjust

2.文本系列属性 text-indent，text-align，line-height，word-spacing，letter-spacing，text-transform，direction，color

3.元素可见性 visibility

4.表格布局属性 caption-side，border-collapse，border-spacing，empty-cells，table-layout

5.列表布局属性 list-style-type，list-style-image，list-style-position，list-style

6.生成内容属性 quotes

7.光标属性 cursor

8.页面样式属性 page，page-break-inside，windows，orphans

9.声音样式属性 speak，speak-punctuation，speak-numeral，speak-header，speech-rate，volume，voice-family，pitch，pitch-range，stress，richness，azimuth，elevation

优先级算法如何计算？

1.优先级就近原则，同权重情况下样式定义最近者为准；

2.载入样式以最后载入的定位为准；

3.!important > id > class > tag；

4.important 比内联优先级高，但内联比id要高；

CSS3新增伪类有哪些

:first-of-type

p:first-of-type 选择属于其父元素的首个<p>元素
:last-of-type

p:last-of-type 选择属于其父元素的最后 <p>元素

:only-of-type

p:only-of-type 选择属于其父元素唯一的 <p>元素

:only-child

p:only-child 选择属于其父元素的唯一子元素的每个<p>元素。

:nth-child(n)

p:nth-child(2) 选择属于其父元素的第二个子元素的每个

元素。

:nth-last-child(n)

p:nth-last-child(2) 同上，从最后一个子元素开始计数。

:nth-of-type(n)

p:nth-of-type(2) 选择属于其父元素第二个<p>元素

:nth-last-of-type(n)

p:nth-last-of-type(2) 同上，但是从最后一个子元素开始计数。

:last-child

p:last-child 选择属于其父元素最后一个子元素的<p>元素。

:root

:root 选择文档的根元素。

:empty

p:empty 选择没有子元素的每个 <p>元素（包括文本节点）。

:target

#news:target 选择当前活动的 #news 元素。

:enabled

input:enabled 选择每个启用的 <input>元素。

:disabled

input:disabled 选择每个禁用的<input>元素

:checked

input:checked 选择每个被选中的 <input>元素。

:not(selector)

:not ( p) 选择非 <p>元素的每个元素。

6.为什么要初始化CSS样式？

首先是因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

其次初始化CSS样式可以提高编码质量，保持代码的统一性，如果不初始化整个页面做完很糟糕，重复的CSS样式很多。去掉标签的默认样式如：margin,padding，其他浏览器默认解析字体大小，字体设置。

7.css定义的权重

标签的权重为1，class的权重为10，id的权重为100，

优先级的顺序如下：

important > 内联(style) > ID > 类(class) > 标签(li…) | 伪类(:hover,:focus…) | 属性选择[attr=’’] > 伪对象(:before,:after) > 通配符(*) > 继承(inherit)

8.写出几种IE6 BUG的解决方法

1.双边距BUG float引起的使用display：inline
2.3像素问题使用多个float和注释引起的使用dislpay:inline -3px
3.超链接hover 点击后失效使用正确的书写顺序 link visited hover active
4.Ie z-index问题给父级添加position:relative
5.Png 透明使用js代码改
6.Min-height 最小高度！Important 解决’
7.select 在ie6下遮盖使用iframe嵌套
8.为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）

9.call和apply的区别

JavaScript中的每一个Function对象都有一个apply()方法和一个call()方法，它们的语法分别为：

/*apply()方法*/
function.apply(thisObj[, argArray])/*call()方法*/
function.call(thisObj[, arg1[, arg2[, [,...argN]]]]);

它们各自的定义：

apply：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.apply(A, arguments);即A对象应用B对象的方法。

call：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.call(A, args1,args2);即A对象调用B对象的方法。

它们的共同之处：

都“可以用来代替另一个对象调用一个方法，将一个函数的对象上下文从初始的上下文改变为由thisObj指定的新对象”。

它们的不同之处：

apply：最多只能有两个参数——新this对象和一个数组argArray。如果给该方法传递多个参数，则把参数都写进这个数组里面，当然，即使只有一个参数，也要写进数组里。如果argArray不是一个有效的数组或arguments对象，那么将导致一个TypeError。如果没有提供argArray和thisObj任何一个参数，那么Global对象将被用作thisObj，并且无法被传递任何参数。

call：它可以接受多个参数，第一个参数与apply一样，后面则是一串参数列表。这个方法主要用在js对象各方法相互调用的时候，使当前this实例指针保持一致，或者在特殊情况下需要改变this指针。如果没有提供thisObj参数，那么 Global 对象被用作thisObj。

实际上，apply和call的功能是一样的，只是传入的参数列表形式不同。

基本用法

function add(a,b){return a+b;
}
function sub(a,b){return a-b;
}
var a1 = add.apply(sub,[4,2]);　　//sub调用add的方法
var a2 = sub.apply(add,[4,2]);
alert(a1);  //6
alert(a2);  //2/*call的用法*/
var a1 = add.call(sub,4,2);

10.解释jsonp的原理，以及为什么不是真正的ajax

jsonp的原理:就是利用浏览器可以动态地插入一段js并执行的特点完成的。

2.为什么不是真正的 ajax?

ajax的核心是 ： 通过XmlHttpRequest获取非本页内容，jsonp的核心 ： 动态添加<script>标签来调用服务器提供的js脚本。

3.ajax和jsonp的调用方式很像，目的一样，都是请求url，然后把服务器返回的数据进行处理，因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装；

还是有不同点的：

实质不同
　ajax的核心是通过xmlHttpRequest获取非本页内容
　jsonp的核心是动态添加script标签调用服务器提供的js脚本
ajax通过服务端代理一样跨域
　jsonp也不并不排斥同域的数据的获取

7 .jsonp是一种方式或者说非强制性的协议
　ajax也不一定非要用json格式来传递数据

.jsonp只支持get请求，ajax支持get和post请求

转自 https://blog.csdn.net/qq_41696819/article/details/81384230

11.javascript的本地对象，内置对象和宿主对象

本地对象
ECMA-262 把本地对象（native object）定义为“独立于宿主环境的 ECMAScript 实现提供的对象”。简单来说，本地对象就是 ECMA-262 定义的类（引用类型）。它们包括：

Object
Function
Array
String
Boolean
Number
Date
RegExp
Error
EvalError
RangeError
ReferenceError
SyntaxError
TypeError
URIError

内置对象
ECMA-262 把内置对象（built-in object）定义为“由 ECMAScript 实现提供的、独立于宿主环境的所有对象，在 ECMAScript 程序开始执行时出现”。这意味着开发者不必明确实例化内置对象，它已被实例化了。ECMA-262 只定义了两个内置对象，即 Global 和 Math （它们也是本地对象，根据定义，每个内置对象都是本地对象）。

宿主对象
所有非本地对象都是宿主对象（host object），即由 ECMAScript 实现的宿主环境提供的对象。

所有 BOM 和 DOM 对象都是宿主对象。

https://www.w3school.com.cn/js/pro_js_object_types.asp

12.javascript的同源策略

同源的定义
如果两个 URL 的 protocol、port (如果有指定的话)和 host 都相同的话，则这两个 URL 是同源。这个方案也被称为“协议/主机/端口元组”，或者直接是 “元组”。（“元组” 是指一组项目构成的整体，双重/三重/四重/五重/等的通用形式）。

下表给出了与 URL http://store.company.com/dir/page.html 的源进行对比的示例:

详情点击这里

13.什么叫优雅降级和渐进增强？

渐进增强 progressive enhancement：
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation：
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：

a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给

b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要

c. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带

转自 https://www.cnblogs.com/crazycode2/p/10652457.html

14.一次完整的HTTP事务是怎样的一个过程？

a. 域名解析

b. 发起TCP的3次握手

c. 建立TCP连接后发起http请求

d. 服务器端响应http请求，浏览器得到html代码

e. 浏览器解析html代码，并请求html代码中的资源

f. 浏览器对页面进行渲染呈现给用户