2018前端面试

最新推荐文章于 2024-08-15 15:54:59 发布

球球之家/carver

最新推荐文章于 2024-08-15 15:54:59 发布

阅读量617

点赞数

分类专栏：前端开发文章标签：前端面试

本文链接：https://blog.csdn.net/wm5920/article/details/80561839

版权

前端开发专栏收录该内容

24 篇文章 0 订阅

订阅专栏

1.jquery中 $.extend和$ .fn.extend区别

前者是针对类的，后者是针对原型的

2.响应式布局怎么理解的，响应式布局是通过什么实现?

根据不同的屏幕加载不同的css样式

1)移动端适配

2)一套代码适配pc端移动端多个

3.js创建对象有哪几种方式?

1）自面量

如a={}

2）new Object

3）构造函数

javascript对象分类：

本地对象，内置对象和宿主对象

本地对象为array obj regexp等可以new实例化

内置对象为gload Math 等不可以实例化的

宿主为浏览器自带的document,window 等

4.es6有哪些新特性?

1）.let const

2）.模板字符串

3）.方法的简写属性的简写

4）.三点运算符

5）.解构赋值

6）.箭头函数

7）.set map

8）.class 类

9）.模块化

5.行内元素块元素的区别?

1）块元素默认独占一行，行内元素默认情况不独占一行，行内元素的的宽度就是内容的宽度

2）默认情况块元素可以设置宽度高度默认情况行内元素不可以设置宽度高度

3）默认可以margin 上下左右，行内默认只能margin 左右不能上下。

行内元素: a b br i span input select

块级元素：div p h1 h2 h3 h4 form ul

6.网站加载速度优化?

1）.图片不失真尽量小

2）.多个背景图片合并

3）.代码压缩代码合并

4）.js写到页面最底部

5）.懒加载

6).不要有冗余代码

7).服务器带宽款一些

8).服务器固态硬盘

9).开启缓存

7.CSS选择符有哪些?内联和important哪个优先级高?

标签选择符类选择符 id选择符

important优先级高

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

Ie(Ie内核) 火狐（Gecko）谷歌（webkit）

9.CSS引入的方式有哪些?

内联内嵌外链导入

link和@import的区别是?
链接式和导入式的区别

1、属于XHTML
2、优先加载CSS文件到页面
@import
1、属于CSS2.1
2、先加载HTML结构在加载CSS文件。

10.闭包是什么

在爷爷的环境中执行了爸爸，爸爸中返回了孙子，本来爸爸被执行完了，爸爸的环境应该被清除掉，但是孙子引用了爸爸的环境，导致爸爸释放不了。这一坨就是闭包。
简单来说，闭包是指可以访问另一个函数作用域变量的函数，一般是定义在外层函数中的内层函数。
为什么需要闭包？
局部变量无法共享和长久的保存，而全局变量可能造成变量污染，所以我们希望有一种机制既可以长久的保存变量又不会造成全局污染。

11.JavaScript中的函数运行在它们被定义的作用域里，而不是它们被执行的作用域里

var name = 'Schopenhauer'
function getName () {
 console.log(name)
}
function myName () {
 var name = 'wangxi'
 getName()
}
myName() // Schopenhauer

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

动态创建script标签，回调函数
一句话就是利用script标签绕过同源策略，获得一个类似这样的数据，jsonpcallback是页面存在的回调方法，参数就是想得到的json。
jsonpcallback({“name”:”球球之家”})
Ajax是页面无刷新请求数据操作

13.”==”和“===”的不同

前者会自动转换类型
后者不会

14..javascript的同源策略

一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合
跨域通信的几种方式
● JSONP
● Hash
● postMessage
● WebSocket
● CORS

15.编写一个数组去重的方法

function oSort(arr)
{
  var result ={};
  var newArr=[];
  for(var i=0;i<arr.length;i++)
  {
    if(!result[arr])
    {
      newArr.push(arr)
      result[arr]=1
    }
  }
  return newArr
}

16.js声明提升

变量提升，
函数声明与函数表达式，
函数声明会优先执行，函数表达式不会
变量声明不会覆盖，函数声明会覆盖

17.JS中的call()方法和apply()方法用法总结

都是在特定的作用域中调用函数，等于设置函数体内this对象的值，以扩充函数赖以运行的作用域。

18.什么是 TypeScript？

TypeScript 是一种由微软开发的自由和开源的编程语言，它是JavaScript的一个超集，扩展了JavaScript的语法。
语法特性
● 类 Classes
● 接口 Interfaces
● 模块 Modules
● 类型注解 Type annotations
● 编译时类型检查 Compile time type checking
● Arrow 函数 (类似 C# 的 Lambda 表达式)

19.CSS的盒模型

● Margin(外边距) - 清除边框外的区域，外边距是透明的。
● Border(边框) - 围绕在内边距和内容外的边框。
● Padding(内边距) - 清除内容周围的区域，内边距是透明的。
● Content(内容) - 盒子的内容，显示文本和图像。

20.DOM事件类

DOM 被分为不同的部分（核心、XML及HTML）和级别（DOM Level 1/2/3）
DOM分类
● DOM核心：针对任何结构化文档的标准模型
● DOM XML ：只针对XML文档的标准模型
● DOM HTML：只针对HTML文档的标准模型
DOM级别（请参考：http://blog.segmentfault.com/gothic/1190000000366311）
DOM Level 1:于1998年10月成为W3C的推荐标准。DOM 1级由两个模块组成：DOM核心（DOM Core）和DOM HTML。
DOM Level 2:对DOM level 1做了扩展
DOM Level 3:对DOM level 2做了进一步的扩展
DOM Level 0: 首先我们的确定的是在DOM标准中并没有DOM 0级的。所谓的DOM 0级是DOM历史坐标中的一个参照点而已，具体说呢，DOM 0级指的是IE4和Netscape 4.0这些浏览器最初支持的DHTML。

DOM事件的级别
● DOM0，element.onclick = function(){}
● DOM2，element.addEventListener(‘click’, function(){}, false);
DOM事件模型是什么：指的是冒泡和捕获
DOM事件流是什么：捕获阶段 -> 目标阶段 -> 冒泡阶段
描述DOM事件捕获的具体流程
window –> document –> documentElement(html标签) –> body –> …. –> 目标对象

在JS中，绑定的事件默认的执行时间是在冒泡阶段执行，而非在捕获阶段（重要）

21.下面输出什么

var undefined;
undefined==null;//true
1==true;//true
2==true;//false
0==false;//true
0=='';//true
NaN==NaN;//false
[]==false;//true
[]==![];//true
var foo="11"+2-"1";//"111"

22.Js中caller和callee的区别

1 ：caller 返回一个调用当前函数的引用如果是由顶层调用的话则返回null
（举个栗子哈 caller给你打电话的人谁给你打电话了谁调用了你很显然是下面a函数的执行只有在打电话的时候你才能知道打电话的人是谁所以对于函数来说只有caller在函数执行的时候才存在）
var callerTest = function() {
console.log(callerTest.caller) ;
} ;
function a() {
callerTest() ;
}
a() ;//输出function a() {callerTest();}
callerTest() ;//输出null

2 ：callee 返回一个正在被执行函数的引用（这里常用来递归匿名函数本身但是在严格模式下不可行）
callee是arguments对象的一个成员表示对函数对象本身的引用它有个length属性（代表形参的长度）
var c = function(x,y) {
console.log(arguments.length,arguments.callee.length,arguments.callee)
} ;
c(1,2,3) ;//输出3 2 function(x,y) {console.log(arguments.length,arguments.callee.length,arguments.callee)}

23.sessionStorage什么时候失效

关闭窗口与标签页

24.浏览器的渲染过程

1) 处理HTML标签建立DOM树
2) 处理CSS标签建立CSSOM树
3) 连接CSSOM树和DOM树形成一个render（渲染）树
4) 在render树上运行布局来计算每个节点的形状
5) 在屏幕上画每一个节点

25.重构、回流

浏览器的重构指的是改变每个元素外观时所触发的浏览器行为，比如颜色，背景等样式发生了改变而进行的重新构造新外观的过程。重构不会引发页面的重新布局，不一定伴随着回流，
回流指的是浏览器为了重新渲染页面的需要而进行的重新计算元素的几何大小和位置的，他的开销是非常大的，回流可以理解为渲染树需要重新进行计算，一般最好触发元素的重构，避免元素的回流；比如通过通过添加类来添加css样式，而不是直接在DOM上设置，当需要操作某一块元素时候，最好使其脱离文档流，这样就不会引起回流了，比如设置position：absolute或者fixed，或者display：none，等操作结束后在显示

26.两种实现前端路由的方式

HTML5 History两个新增的API：history.pushState 和 history.replaceState，两个 API 都会操作浏览器的历史记录，而不会引起页面的刷新。
Hash就是url 中看到 # ,我们需要一个根据监听哈希变化触发的事件( hashchange) 事件。我们用 window.location 处理哈希的改变时不会重新渲染页面，而是当作新页面加到历史记录中，这样我们跳转页面就可以在 hashchange 事件中注册 ajax 从而改变页面内容。

27.UTF-8和Unicode的区别

UTF-8就是在互联网上使用最广的一种unicode的实现方式。
Unicode的出现是为了统一地区性文字编码方案，为解决unicode如何在网络上传输的问题，于是面向传输的众多 UTF（UCS Transfer Format）标准出现了，顾名思义，UTF-8就是每次8个位传输数据，而UTF-16就是每次16个位。
ASCII –> 地区性编码（GBK） –> Unicode –> UTF-8