资讯专栏INFORMATION COLUMN

前端面试题目汇总

lastSeries / 3077人阅读

摘要:线程在执行过程中与进程还是有区别的。但是线程不能够独立执行,必须依存在应用程序中,由应用程序提供多个线程执行控制。从逻辑角度来看,多线程的意义在于一个应用程序中,有多个执行部分可以同时执行。

关于js

1.原型链
2.AJAX请求数据时解决缓存的办法
3.js的继承
4.简单谈谈事件冒泡和事件捕获
5.闭包什么时候会用到有什么好处
6.三目运算符
7.图表的使用
8.AJAX跨域如何解决
9.谈谈Promise的理解
10.递归
11.ES6

关于前端框架

1.angular和jquery有什么区别
2.三大框架的区别和特性,项目案列VUE REACT ANGULAR
3.三大框架实战演练
4.angular路由
5.俩个angular之间如何传值
6.VUE的写法

关于JAVASCRIPT自动化构建工具

1.GULP GRUNT WEBPACK的了解
2.搭建项目步骤的演示

移动端兼容性问题

1.IE opacity不起作用解决办法
2.Placeholder不起作用解决办法
3.input被键盘遮挡解决办法
4.audio在微信里音乐无法自动播放

关于CSS3 HTML5

1.CSS3 HTML5新属性
2.LESS SASS和css的区别
3.rem和px的区别
4.微信登录 第三方支付 分享
5.地图 Geolocation
6.WEbsockt

关于版本控制系统 1.GIT 更新/提交代码

cd kake/ 项目名

sh.git

pull/push

update_1/描述用英文并用下划线分割
注: 更新之前可使用git status查看是否有修改,git diff查看所修改文件

更新完 source下面 npm run all

修改host文件

sudo vim /ect/hosts

i 键盘修改

Esc :

wq 保存并退出

解决冲突

CONFLICT
cd 目录名
git add 文件冲突路径
kake/frontend/less/detail/index.less

2.SVN

关于数据结构与算法## box-sizing: border-box的作用

当你设置一个元素为 box-sizing: border-box; 时,此元素的内边距和边框不再会增加它的宽度。
例如:

举个例子

.box {

width: 500px;     
height:100px;  
border: 1px solid #000;
-webkit-box-sizing: border-box;     
    -moz-box-sizing: border-box;
              box-sizing: border-box;

}
如果这时候你加上一个内边距属性,padding: 10px;
这个div不会撑开,即你所见的边框位置没有任何变动,但是“举个例子”这句话会和div边框有10px的间距。
一般在写页面的时候用这个属性就不会再考虑边框和内边距会改变整体所占宽度,即不用再根据盒子模型再去计算,省去很多麻烦。

在不使用第三个变量的情况下使俩个变量的值互换

算术运算
int a,b;
a=10;b=12;
a=b-a; //a=2;b=12
b=b-a; //a=2;b=10
a=b+a; //a=10;b=10
它的原理是:把a、b看做数轴上的点,围绕两点间的距离来进行计算。
具体过程:第一句“a=b-a”求出ab两点的距离,并且将其保存在a中;第二句“b=b-a”求出a到原点的距离(b到原点的距离与ab两点距离之差),并且将其保存在b中;第三句“a=b+a”求出b到原点的距离(a到原点距离与ab两点距离之和),并且将其保存在a中。完成交换。
此算法与标准算法相比,多了三个计算的过程,但是没有借助临时变量。(以下称为算术算法)

this的指向:

1、作为普通函数调用(this指向全局对象window对象)
2、作为对象的方法调用(this指向该对象)
3、构造器调用(this指向用new返回的这个对象)
4、call、apply、bind的调用(this指向第一个参数对象)

new操作符具体干了什么呢?

1、创建一个新对象
2、将构造函数的作用域赋给新对象(因此this就指向了这个新对象)
3、执行构造函数中的代码(为这个新对象添加属性)
4、返回新对象

null和undefined的区别?

1、null是一个表示”无”的对象,转为数值时为0;undefined是一个表示”无”的原始值,转为数值时为NaN。
2、undefined表示”缺少值”,就是此处应该有一个值,但是还没有定义。
3、null表示”没有对象”,即该处不应该有值。

call、apply、bind的区别

三者都是用来改变函数的this对象的指向的。
三者第一个参数都是this要指向的对象,也就是想指定的上下文。
call 传入的参数数量不固定,第二部分参数要一个一个传,用,隔开。
apply 接受两个参数,第二个参数为一个带下标的集合,可以为数组,也可以为类数组。
bind 是返回一个改变了上下文的函数副本,便于稍后调用;apply 、call 则是立即调用 。
本地存储

sessionStorage和localStorage的区别

sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。
localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。
具体参见:本地存储sessionStorage与localStorage

cookie 和session

1、cookie数据存放在客户的浏览器上,session数据放在服务器上。
2、cookie不是很安全,别人可以分析存放在本地的COOKIE并进行COOKIE欺骗,考虑到安全应当使用session。
3、session会在一定时间内保存在服务器上。当访问增多,会比较占用你服务器的性能,考虑到减轻服务器性能方面,应当使用COOKIE。
4、单个cookie保存的数据不能超过4K,很多浏览器都限制一个站点最多保存20个cookie。每次请求一个新的页面的时候Cookie都会被发送过去,与服务器进行交互。

XML和JSON的区别?

1、数据体积方面。
JSON相对于XML来讲,数据的体积小,传递的速度更快些。
2、数据交互方面。
JSON与JavaScript的交互更加方便,更容易解析处理,更好的数据交互。
3、数据描述方面。
JSON对数据的描述性比XML较差。
4、传输速度方面。
JSON的速度要远远快于XML。

如何实现浏览器内多个标签页之间的通信?

调用localstorge、cookies等本地存储方式

线程与进程的区别

1、一个程序至少有一个进程,一个进程至少有一个线程.
2、线程的划分尺度小于进程,使得多线程程序的并发性高。
3、进程在执行过程中拥有独立的内存单元,而多个线程共享内存,从而极大地提高了程序的运行效率。
4、线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行,必须依存在应用程序中,由应用程序提供多个线程执行控制。
5、从逻辑角度来看,多线程的意义在于一个应用程序中,有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用,来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。

渐进增强和优雅降级

渐进增强 :针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 :一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。

性能优化

网页内容
减少 http请求次数
减少 DNS查询次数
避免页面跳转
缓存 Ajax
延迟加载
提前加载
减少 DOM元素数量
避免 404
服务器
使用CDN(内容分发网络)
添加Expires或Cache-Control报文头
Gzip压缩传输文件
CSS
将样式表置顶
用代替@import
JavaScript
把脚本置于页面底部
使用外部JavaScript和CSS
精简JavaScript和CSS
去除重复脚本
减少DOM访问
图片
优化图像
优化CSS Spirite
不要在HTML中缩放图片
favicon.ico要小而且可缓存

如何解决跨域问题?

jsonp、CORS、document.domain+iframe、window.name、window.postMessage

jsonp的原理就是利用了

阅读需要支付1元查看
<