JavaScript相关面试题

1.说说你对盒子模型的理解？

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性，分为标准模型和IE模型，标准模型的宽度不包括内边距，IE模型的宽度要包括内边距。
标准盒模型宽度=width + 内边距+边框+外边距
怪异盒模型=width+外边距

2.说说javascript都有哪些数据类型，如何存储的？

原始数据类型（Primitive data types）：

数字（Number）：用于表示数值，如1、2.5等。
字符串（String）：用于表示文本数据，如"hello"、'world’等。
布尔值（Boolean）：用于表示真（true）或假（false）。
null：表示一个空值。
undefined：表示一个未定义的值。
Symbol（ES6新增）：表示具有唯一标识符的值。
引用数据类型（Reference data types）：

对象（Object）：用于存储键值对的集合，如{ name: ‘Alice’, age: 20 }。
数组（Array）：用于存储多个值的有序列表，如[1, 2, 3]。
函数（Function）：用于封装可执行的代码块，可以被调用执行。
JavaScript的数据类型存储方式有不同：

原始数据类型存储在栈内存中，直接存储变量的值。
引用数据类型存储在堆内存中，变量存储的是对象在堆内存中的地址。

总结:基础数据类型存放在栈中，引用数据类型是栈地址堆值。

3.如何理解响应式，实现响应式的方法有哪些？有什么区别？

1.媒体查询
2.rem em
3.vw vh
4.display 百分比
5.第三方插件flexible.js

4.Css性能优化有哪些常见的方法？具体如何实现？

加载性能
1、css压缩：将写好的css进行打包，可以减少很多的体积。
2、css单一样式：在需要下边距和左边距的时候，很多时候选择：margin:top 0 bottom 0,但是margin-bottom:bot tom;margin-left:left;执行效率更高。
3、减少@import,而建议使用link,因为后者在页面加载时一起加载，前者是等待页面加载完成之后再进行加载。

2.2、选择器性能
1、关键选择器：选择器的最后面的部分为关键选择器。css选择器是从右向左进行匹配的。当使用后代选择器的时候，浏览器会遍历所有子元素来确定是否是指定的元素等等。
2、如果规则拥有ID选择器作为其关键选择器，则不要为规则增加标签。过滤掉无关的规则。
3、避免使用通配符规则，如果*{}，计算次数惊人，只对需要用到的元素进行选择。
4、尽量少的区队标签进行选择，而使用class。
5、了解哪些属性是可以通过继承而来的，然后避免对这些属性重复指定规则。

2.3、渲染性能
1、慎重使用高性能属性：浮动，定位。
2、尽量减少页面的重排和重绘。
3、去除控规则，{}。空规则的产生的原因一般来说是为了预留样式。去除这些空规则则无疑能减少css文档体积。
4、属性值为0时，不加单位。
5、属性值为浮动小数0.***，可以省略小数点之前的0。
6、标准化各种浏览器前缀，带浏览器前缀的在前。标准属性在后。
7、不使用@import前缀，它会影响css的加载速度。
8、选择器优先嵌套，尽量避免层级过深。
9、css雪碧图：同一页面相近部分的小图标，方便使用，减少页面的请求次数，但是同时图片本身不变大，使用时，优劣考虑清楚使用。
10、正确使用display的属性，由于display的作用，某一些样式组合会无效，徒增样式体积的同时也影响性能。

2.4、可维护性和健壮性
1、将具有相同内容的样式抽离出来，整合并通过class在页面中进行使用，提高css的可维护性。
2、样式和内容分离，将css代码定义到外部css中。

5.判断数据类型的方法有哪些？有什么区别？

1. typeof判断
   typeof返回的类型都是字符串形式
2. Constructor
   实例constructor属性指向构造函数本身
   constructor 判断方法跟instanceof相似,但是constructor检测Object与instanceof不一样,constructor还可以处理基本数据类型的检测,不仅仅是对象类型
3. Instanceof
   instanceof可以判类型是否是实例的构造函数
   instanceof 后面一定要是对象类型，并且大小写不能错，该方法适合一些条件选择或分支。
4. Object.prototype.toString.call()
   判断类型的原型对象是否在某个对象的原型链上
5. 通过object原型上的方法判断
   比如array.isArray()来判断是不是一个数组
6. ===（严格运算符）
   通常出现在我们的条件判断中，用来判断数据类型的话就会非常的有局限性，比如判断一个变量是否为空,变量是否为数据等

6.说说你对BOM的理解，BOM的核心都有哪些？作用是什么

浏览器 对象 模型 ,BOM是为了操作浏览器对象出现的API
window对象
window对象是浏览器中的Global对象

var newWindow = window.open(URL,name,specs); 返回一个新窗口
URL：打开页面的URL，没有指定URL将打开新的空白窗口
name：_blank 新窗口打开，默认
_self 当前页面打开
…
specs：一个逗号分隔的项目列表。支持以下值：
width=pixels height=pixels 最小值为100
left=pixels top=pixels …
示例 window.open(‘’,‘’,‘width=200,height=200’);

window.close() 方法用于关闭浏览器窗口(新打开的)；

调整窗口大小 window.resizeTo(width,height);
调整窗口大小 window.resizeBy(width,height);
注：此功能在一些标签型浏览器中无效。

window.screenLeft 属性返回窗口相对于屏幕的X坐标
window.screenTop 属性返回窗口相对于屏幕的Y坐标
window.screenX 属性返回窗口相对于屏幕的X坐标
window.screenY 属性返回窗口相对于屏幕的Y坐标

window.setInterval ( 函数/名称 , 毫秒数 )
表示每经过一定的毫秒后，执行一次相应的函数(重复)
window.setTimeout ( 函数/名称 , 毫秒数 )
表示经过一定的毫秒后，只执行一次相应的函数(不重复)
清除计时器：clearInterval( ); clearTimeout( );

提示框 alert (“ ”);
用户必须先关闭该消息框然后才能继续进行操作
确认框 confirm(“ ”);
confirm(“需要确认的内容”);
选择“确定”返回true 选择“取消”返回false
输入框 prompt(“ ”,“ ”);
prompt(“对话框的提示文本”,“默认的输入文本”);
单击取消，则返回 null；单击确认，则返回输入的文本

window.onbeforeunload = function(e){// 离开当前页面触发事件
　　var e = window.event || e;
e.returnValue = false;
}

history对象包含有关用户的访问历史记录
length 返回浏览器历史列表中的 URL 数量
forward() 加载 history 列表中的下一个 URL
back() 加载 history 列表中的上一个 URL
go() 加载 history 列表中的某个具体页面
history.go(-1) 后退一页
history.go(1) 前进一页

location对象包含有关当前页面的URL信息
host 属性设置或返回主机名和当前 URL 的端口号
port 属性设置或返回当前 URL 的端口号
href 属性设置或返回完整的 URL ……
assign() 方法加载新的文档
reload() 方法重新加载当前文档（刷新）
replace() 方法用新的文档替换当前文档

navigator对象用于提供与用户浏览器相关的信息
appCodeName 属性返回浏览器的代码名
appName 属性返回浏览器的名称
cookieEnabled 属性返回指明浏览器中是否启用cookie的布尔值
platform 属性返回运行浏览器的操作系统平台

appVersion 属性返回浏览器的平台和版本信息
userAgent 属性返回用户浏览器发送服务器的user-agent头部的值

识别浏览器
var str1=window.navigator.userAgent;
var str2=window.navigator.appVersion;
结合indexOf( )和toLowerCase( )方法可识别用户浏览器

screen对象包含有关客户端显示屏幕的信息
width 属性返回显示器屏幕的宽度
height 属性返回显示器屏幕的高度
availHeight 属性返回显示屏幕的高度 (除 Windows 任务栏之外)
availWidth 属性返回显示屏幕的宽度 (除 Windows 任务栏之外)