Web常见前端面试题及答案_webgl面试题
由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求（因为同源策略不阻止动态脚本插入，并且将脚本看作是从提供 Web 页面的域上加载的），然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。原型最后指向的是null。在编程中，例如C/C++中，所有的局部变量都是从栈中分配内存空间，实际上
3、前端性能优化
减少HTTP请求、使用内容发布网络、压缩组件、使用Expire头、JS放底部、CSS放顶部、避免CSS表达式等。
具体可以参考：http://www.jianshu.com/p/4bd6bb0bb49e
4、JSONP是什么？它是如何实现跨域的？为什么它可以实现跨域？
JSONP(JSON with Padding)是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问。
由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求（因为同源策略不阻止动态脚本插入，并且将脚本看作是从提供 Web 页面的域上加载的），然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。
跨域的4种方式：
①通过动态添加script标签，然后指定callback函数，可以获取到传过来的json数据，这时候要自己写一个callback函数来处理数据；
②使用jquery封装好的getJson方法，传入不同域的url?callback=?,好处是不需要手动的插入script标签以及定义回掉函数。jquery会自动生成一个全局函数来替换callback=?中的问号，之后获取到数据后又会自动销毁，实际上就是起一个临时代理函数的作用。$.getJSON方法会自动判断是否跨域，不跨域的话，就调用普通的ajax方法；跨域的话，则会以异步加载js文件的形式来调用jsonp的回调函数。
③通过设置window.domain来处理跨域，但是只适用于不同子域的框架间的交互。所以使用的时候可以用一个隐藏的iframe来做一个代理，让这个iframe载入一个与你想要通过ajax获取数据的目标页面处在相同的域的页面。
④window.name是可以跨域的。window.name的值只能是字符串的形式，这个字符串的大小最大能允许2M左右甚至更大的一个容量，具体取决于不同的浏览器，但一般是够用了。所以可以转化成字符串的数据都可以使用window.name来传递，比如json数据。
5、浏览器兼容问题
css兼容性问题：①不同浏览器的标签默认的外补丁和内补丁不同，解决方案：用通配符*来设置各个标签的内外补丁是0（即设置margin和padding为0）；②div的垂直居中问题 vertical-align：middle；文字居中：将行距增加到和整个div一样，高line-height=行高；③margin加倍问题：设置为float的div在ie下的margin会加倍。解决方案：为这个div设置样式：display:inline;
js兼容性问题：①在标准的事件绑定中绑定事件的方法函数为addEventListener，而IE使用的是attachEvent；②事件处理中event属性的获取不同。标准浏览器是作为参数带入，然后通过e.target获取目标元素；而IE是通过window.event方式获得，通过e.srcElement获取目标元素；
6、JS和JAVA的作用域有什么区别
java是块级作用域，js是函数作用域，没有块级作用域。
var name="global"; if(true){ var name="local"; console.log(name) } console.log(name);这段都输出是“local",如果有块级作用域，明显if语句将创建局部变量name,并不会修改全局name,可是没有这样，所以Js没有块级作用域。
7、闭包问题
闭包：函数能被外部调用到，则该作用连上的所有变量都会被保存下来。
作用：①可以读取函数内部的变量；②相当于划出了一块私有作用域，避免数据污染；③让变量始终保存在内存中
使用全局变量被认为是不好的习惯，而且容易造成错误并且维护成本较高，所以js可以采用闭包的方式读取函数的内部变量。但是如果大量使用闭包就会造成过多的变量始终保存在内存中，会造成内存泄漏。
一个简单的闭包例子：
function f1(){
var n=999;
function f2(){
alert(n);
}
return f2;
}
var result=f1();
result(); // 999
8、js中this的工作原理
①全局范围内：指向全局对象；
this;
②函数调用：指向全局对象
foo();
③方法调用：this指向test对象
test.foo();
④调用构造函数：this指向新创建的对象
new foo();
⑤显示的设置this：使用call或者apply方法时，this指向第一个参数
function foo(a, b, c) {}
var bar = {};
foo.apply(bar, [1, 2, 3]); // 数组将会被扩展，如下所示
foo.call(bar, 1, 2, 3); // 传递到foo的参数是：a = 1, b = 2, c = 3
10、模块化编程
①AMD（异步模块定义） requirejs
defined(id,deps,factory)
require([dependency],function(){})
异步加载，浏览器不会失去响应
它指定的回调函数，只有前面的模块都加载完成后，才会运行，解决了依赖性问题
②CMD（通用模块定义） seajs
模块定义方式和模块加载时机处理不同
defined(id,deps,factory)
function(require,exports,module)
module.exports = ______;
③区别：AMD依赖前置，在定义模块的时候就要声明其依赖的模块；CMD就近依赖，只有在用到哪个模块的时候再去require；
11、JS继承与原型问题
Js所有的函数都有一个prototype属性，这个属性引用了一个对象，即原型对象，也简称原型。每一个对象都有原型，在浏览器中它体现在一个隐藏的proto属性上。
当一个对象需要调用某个方法时，它回去最近的原型上查找该方法，如果没有找到，它会再次往下继续查找。这样逐级查找，一直找到了要找的方法。 这些查找的原型构成了该对象的原型链条。原型最后指向的是null。我们说的原型继承，就是将父对像的方法给子类的原型。子类的构造函数中不拥有这些方法和属性。
12、少用float？
①使用float可能会造成兼容性问题，比如在ie6以下，float元素margin加倍问题；②使用float之后会影响左右元素，有可能造成错位问题（float之后都要clear）
解决：可用display、position转化
①无序链接（ul、li），设定li标签属性：display:inline
②div左右结构，比如在右侧要放一个more（更多）来显示更多信息的时候用到了float:right，可以用定位来做。给包裹more的div设定position：relative，然后more这个标签right：0即可。结构更为清晰一点。
13、一个页面从URL到加载显示完成，都发生了什么？
①通过DNS将该地址解析成IP地址；
②发起网络连接，进行http协议会话：客户端发送报头（请求报头），服务端回馈报头（响应报头）
③返回一个页面（根据页面上的外链的URL重新发送请求获取）
④接收文件完毕，对加载到的资源进行语法解析，以及相应的内部数据结构（网页渲染）
14、队列、堆、栈的区别？
队列是先进先出：就像一条路，有一个入口和一个出口，先进去的就可以先出去。而栈就像一个箱子，后放的在上边，所以后进先出。堆是在程序运行时，而不是在程序编译时，申请某个大小的内存空间。即动态分配内存，对其访问和对一般内存的访问没有区别。
栈(Stack)是操作系统在建立某个进程时或者线程为这个线程建立的存储区域。在编程中，例如C/C++中，所有的局部变量都是从栈中分配内存空间，实际上也不是什么分配，只是从栈顶向上用就行，在退出函数的时候，只是修改栈指针就可以把栈中的内容销毁，所以速度最快。
堆（Heap)是应用程序在运行的时候请求操作系统分配给自己内存，一般是申请/给予的过程。由于从操作系统管理的内存分配所以在分配和销毁时都要占用时间，所以用堆的效率低的多！但是堆的好处是可以做的很大，C/C++对分配的Heap是不初始化的。
在Java中除了简单类型（int,char等）都是在堆中分配内存，这也是程序慢的一个主要原因。但是跟C/C++不同，Java中分配Heap内存是自动初始化的。在Java中所有的对象（包括int的wrapper Integer）都是在堆中分配的，但是这个对象的引用却是在Stack中分配。也就是说在建立一个对象时从两个地方都分配内存，在Heap中分配的内存实际建立这个对象，而在Stack中分配的内存只是一个指向这个堆对象的指针（引用）而已。
15、如何居中div？如何居中一个浮动元素？
给div设置一个宽度，然后添加margin:0 auto;
div{
width:200px;
margin:0 auto;
}
居中一个浮动元素
div{
width:500px;
height:500px;
magin:-150px 0 0 -250px;
position:relative;
left:50%;
top:50%;
}
16、什么是线程？进程和线程的关系是什么？
线程可定义为进程内的一个执行单位，或者定义为进程内的一个可调度实体。 在具有多线程机制的操作系统中，处理机调度的基本单位不是进程而是线程。一个进程可以有多个线程，而且至少有一个可执行线程。
打个比喻:进程好比工厂(计算机)里的车间，一个工厂里有多个车间(进程)在运转,每个车间里有一个或多个工人（线程）在协同工作，这些工人就可以理解为线程。
线程和进程的关系:
1.线程是进程的一个组成部分.
2.进程的多个线程都在进程地址空间活动.
3.系统资源是分配给进程的，线程需要资源时，系统从进程的资源里分配给线程.
4.处理机调度的基本单位是线程.
17、React为什么这么火？
18、CSS3中的transform属性和transition属性？
transform：
功能：使元素变形的属性，其配合rotate（旋转角度）、scale（缩放倍数）、skew（扭曲元素）等参数一起使用
语法：
transform:rotate(旋转角度)；//正数为顺时针、负数为逆时针；
transform:rotate(30deg);//顺时针旋转30度
transform:rotate(-20deg);//逆时针旋转20度
transform:scale(缩放倍数)；
transform:scale(1.20);//放大1.2倍
transition：
功能：设置元素由样式一变为样式二所需要的一些变化效果
语法：transition: property duration timing-function delay;
值 描述 transition-property 规定设置过渡效果的 CSS 属性的名称。 transition-duration 规定完成过渡效果需要多少秒或毫秒。 transition-timing-function 规定速度效果的速度曲线。 transition-delay 定义过渡效果何时开始。
注：使用这两个属性时应考虑到浏览器的兼容性，所以要针对不同的浏览器都添加一次样式，如下：
-webkit-transform:rotate(0deg) scale(1.20);
-moz-transform:rotate(0deg) scale(1.20);
transform:rotate(0deg) scale(1.20);
19、什么是MVVM框架？
MVVM是Model-View-ViewModel的简写。
MVVM 是 Web 前端一种非常流行的开发模式，利用 MVVM 可以使我们的代码更专注于处理业务逻辑而不是去关心 DOM 操作。目前著名的 MVVM 框架有 vue, avalon, angular 等，这些框架各有千秋，但是实现的思想大致上是相同的：数据绑定 + 视图刷新。跟MVC一样，主要目的是分离视图（View）和模型（Model）。View可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
在MVVM中，数据是核心，由于VIewModel与View之间的双向绑定，操作了ViewModel中的数据（当然只能是监控属性），就会同步到DOM，我们透过DOM事件监控用户对DOM的改动，也会同步到ViewModel。
### 最后前端到底应该怎么学才好？
如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。
不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。学习编程并不是每天光看视频，你学习编程最重要的目的是为了编写软件产品，提供给大众使用，所以用手写出代码实现功能才是我们要做的事情。
**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
技术共进，成长同行——讯飞AI开发者社区
更多推荐
21
0- 0
已为社区贡献3条内容
所有评论(0)