基础面试题-非宝典（1）人生无常,大肠包小肠！！！！西游记告诉我们：凡是有后台的妖怪都被接走了，凡是没后台的都被一棒

1.页面导入样式时，使用 link 和@import 有什么区别？

（1）页面被加载的时，link 会同时被加载，而@import引用的 CSS 会等到页面被加载完再加载;

（2）link 属于 XHTML 标签，除了加载 CSS 外，还能用于定义 RSS, 定义 rel 连接属性等作用；而@import 是 CSS 提供的，只能用于加载 CSS;

（3）import 是 CSS2.1 提出的，只在 IE5 以上才能被识别，而 link 是 XHTML 标签，无兼容问题;

2.对浏览器内核的理解？

浏览器内核的主要分成两部分：渲染引擎(layout engineer 或 Rendering Engine)和 JS 引擎。

（1）渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

（2）JS 引擎：负责解析和执行 javascript 来实现网页的动态效果。最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。

3.开发过程中遇到的浏览器的兼容性有哪些？产生的原因，解决方法是什么，常用的技巧有哪些？

（1）png24 位的图片在 iE6 浏览器上出现背景，解决方案是做成 PNG8.

（2）浏览器默认的 margin 和 padding 不同。解决方案是加css通配符。

*{
    margin:0;padding:0;
}

（3）IE6双边距bug:块属性标签float后，又有横行的 margin 情况下，在 ie6 显示 margin比设置的大。浮动 ie 产生的双倍距离

#box{ 
        float:left; 
        width:10px; 
        margin:0 0 0 100px;}
}

这种情况之下 IE 会产生 20px 的距离，解决方案是在 float 的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有 ie6 会识别)

(4)IE 下,可以使用获取常规属性的方法来获取自定义属性,也可以使用 getAttribute()获取自定义属性;

Firefox 下,只能使用 getAttribute()获取自定义属性。

解决方法:统一通过 getAttribute()获取自定义属性。

(5) Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,

解决方案可通过加入 CSS 属性 -webkit-text-size-adjust: none;

4.对BFC 块级格式化上下文(block formatting context)的理解？

（1）BFC是W3C CSS 2.1 规范中的一个概念,它是一个独立容器，决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。

（2）一个页面是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型。不同类型的 Box,会参与不同的 Formatting Context（决定如何渲染文档的容器）,因此Box内的元素会以不同的方式渲染,也就是说BFC内部的元素和外部的元素不会互相影响。

5.怎么让 Chrome 支持小于 12px 的文字？

（1）用图片：如果是内容固定不变情况下，使用将小于 12px 文字内容切出做图片，这样不影响兼容也不影响美观。

（2）使用 12px 及 12px 以上字体大小：为了兼容各大主流浏览器，建议设计美工图时候设置大于或等于 12px 的字体大小，如果是接单的这个时候就需要给客户讲解小于12px 浏览器不兼容等事宜。

（3）继续使用小于 12px 字体大小样式设置：如果不考虑 chrome 可以不用考虑兼容，同时在设置小于 12px 对象设置-webkit-text-size-adjust:none，做到最大兼容考虑。

（4）使用 12px 以上字体：为了兼容、为了代码更简单从新考虑权重下兼容性。

6.网页制作会用到的图片格式有哪些？

有png-8，png-24，jpeg，gif，svg。但是上面的那些都不是面试官想要的最后答案。面试官希望听到是 Webp。（是否有关注新技术，新鲜事物）

Webp：WebP 格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。

Facebook Ebay 等知名网站已经开始测试并使用 WebP 格式。在质量相同的情况下，WebP 格式图像的体积要比 JPEG 格式图像小 40%

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

cookie 是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。

cookie 数据始终在同源的 http 请求中携带（即使不需要），记会在浏览器和服务器间来回传递。

sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存。

存储大小：

cookie 数据大小不能超过 4k。

sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以达到 5M 或大。

有期时间：

localStorage :存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；

sessionStorage: 数据在当前浏览器窗口关闭后自动删除。

cookie :设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭。

8. 在浏览器地址栏键入URL，按下回车之后会经历以下流程：

（1）浏览器向 DNS 服务器请求解析该 URL 中的域名所对应的 IP 地址;

（2）解析出 IP 地址后，根据该 IP 地址和默认端口80，和服务器建立TCP连接;

（3）浏览器发出读取文件(URL中域名后面部分对应的文件)的HTTP请求，该请求消息作为 TCP三次握手的第三个报文的数据发送给服务器;

（4）服务器对浏览器请求作出响应，并把对应的 html 文本发送给浏览器

（5）释放TCP连接;

（6）浏览器加载该 html 文本并显示内容

9.call / apply / bind 有什么区别？

都是替换函数中不想要的this, call 和 apply 是临时的, bind 是永久的

call: call(thisObj, obj1, obj2...)要求传入函数的参数是参数列表

apply: apply(thisObj, [argArray])要求传入函数的参数必须放入数组中整体传入

bind: .bind(thisObj,arg1,arg2,...)

共同点 : 都可以改变this指向
不同点:
- call 和 apply 会立即调用函数, 并且改变函数内部this指向.
- call 和 apply传递的参数不一样,call传递参数使用逗号隔开,apply使用数组传递
- bind 不会立即调用函数, 可以改变函数内部this指向.

应用场景
1. call 经常做继承.
2. apply 经常跟数组有关系. 比如借助于数学对象实现数组最大值最小值
3. bind 不调用函数,但是还想改变this指向. 比如改变定时器内部的this指向.

10. JavaScript的基本规范？

（1）不要在同一行声明多个变量

（2）使用 ===或!==来比较true/false或者数值

（3） switch必须带有default分支

（4）函数应该有返回值

（5）for if else 必须使用大括号

（6）语句结束加分号

（7）命名要有意义，使用驼峰命名法

基础面试题-非宝典（1）