高频前端开发面试题笔记（一）

css的相关问题

    &  display：none和visibility:hidden的区别？

• display:none 隐藏对应的元素，是彻底消失，不在文档流中占位，浏览器也不会解析该元素；
• visibility:hidden 也是隐藏对应的元素，是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素，使用visibility:hidden比display:none性能上要好。

     &  display的属性有哪些？

• inherit：从父元素继承 display 属性的值。
• none：隐藏该元素，不占空间。
• inline：变成行内元素，元素的宽度就是它内容的宽度，不可改变。
• block：变成块元素，单独占一行，可设置width，height，maigin，padding；
• inline-block：变成行内块元素，和内联元素在同一行，但自身相当于块级元素，可设置width,height等属性。
• list-item：列表显示。
• table：块级表格来显示（ < table >），表格前后带有换行符。
• table-row：表格行显示（ < tr >）。
• table-cell：表格单元格显示（ < td > 、 < th >）。

　　&  (浏览器)CSS盒子模型？

• 盒子模型（Box Model）就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。盒模型通过四个边界来描述：内容(content)、内边距（padding）、边框（border）和外边距（margin）组成。
• 盒子模型特性：　每个盒子都有：边界、边框、填充、内容 4个属性；

每个属性都包括4个部分：上、右、下、左。属性的4部分可以同时设置，也可以分别设置。

• 浏览器兼容性（在每个浏览器中呈现是一样的吗？）：大多数浏览器都会按照平常的图示呈现内容。然但是IE 5 和 IE6 不同

根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。

　　　　　　　　　　　　　　　　　　　　width:margin*2+border*2+padding*2+width;

　　　　　　　　　　　　　　　　　　　　height:margin*2+border*2+padding*2+height;

但是IE5.X 和 IE6在怪异模式中使用自己的非标准模型，这些浏览器的 width =margin*2+width;height:margin*2+height;

 

JS的相关问题

 

　&  Js的数组方法有哪些？

• concat()：将参数添加到原数组中。
• reverse()：向数组追加新元素。
• sort() ：将数组从大到小排序
  
• join(): 将数组的元素组起一个字符串
• push(): 添加到数组末尾，并返回修改后数组的长度。
• pop()：从数组末尾开始删除，然后返回移除的项。
• unshift()：将参数添加到原数组开头，返回新数组的长度
• shift() ：删除原数组第一项，并返回删除元素的值
• reverse()：反转数组项的顺序。
• slice()：返回从原数组中指定开始下标到结束下标之间的项组成的新数组。
• splice()：可以实现删除、插入和替换。
• indexOf()：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。从数组的开头（位置 0）开始向后查找。
• lastIndexOf：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。从数组的末尾开始向前查找。
• forEach()：对数组进行遍历循环，对数组中的每一项运行给定函数。这个方法没有返回值。
• ........................................................................
   
   

 

JQ的相关问题

 

　&  jQuery的链式调用？

• 通过return this的形式来实现，通过对象上的方法最后加上return this，把对象再返回（返回的都是对象本身，所以没有返回值），对象就可以继续调用方法，实现链式操作。
• 优点：节省代码量，代码看起来更优雅。

 

 

 

H5的相关问题

　 &  H5新特性有哪些？

• 新增选择器 ：document.querySelector、document.querySelectorAll。
• 语义化标签：header、footer、section、nav、aside、article等。
• 增强型表单：input 的calendar、data、time、url、search等。
• 新增表单元素：datalist、keygen、output。
• 新增表单属性：placehoder、required、multiple、min 和 max等。
• 音频视频：audio、video。
• canvas画布。
• 地理定位：Geolocation。
• 拖拽释放API：Drag and drop。
• 本地存储：localStorage - 持久化的本地储存，除非主动删除数据，否则数据永远不会过期；sessionStorage - 当用户关闭浏览器窗口后，数据 会被销毁。
• 历史管理：history
• 全双工通信协议：WebSocket，单个 TCP 连接上进行全双工通讯的协议。
• 多任务：webworker。
• 离线应用：manifest。
• 页面可见性改变事件：visibilitychange。
• ............................................................

 

ES6的相关问题

　 &  es6新特性有哪些？

• 声明变量的关键字const和let

　　　const声明一个只读的常量，一旦声明常量的值不可改变。

　　　const声明一个变量，必须立即初始化，不能留到后面赋值。

　　　let声明变量只有所在的代码块内有效。

　　　let不存在变量提升，要在声明后使用，不然报错。

　　　let存在暂时性死区，使用let声明之前不可用。

• 模板字符串

          是增强版字符串，用反引号（``）标识，注：如果是多行字符串就在反引号里把“+”改为“，”就可以。

　　　　　　　　　　　　　　　ES5：

　　　　　　　　　　　　　　　ES6：

 

 

 

• 解构赋值

 

• 针对数组或者对象进行模式匹配，然后对其中的变量进行赋值
• 数组模型的解构（Array）：    

 

　　

• 对象模型的解构（Object）：

 

　　　

 

• 箭头函数：（参数）=>{函数体}
• Promise
• 未完待续......