初中级web前端工程师的面试题分享
1、html三栏布局有几种(就是左右固定,中间自适应)
浮动布局float、定位布局、flex布局、表格布局、css3栅栏布局
<style media="screen"> //浮动布局float
.layout.float .left{
float:left;
width:300px;
background: red;
}
.layout.float .center{
background: yellow;
}
.layout.float .right{
float:right;
width:300px;
background: blue;
}
</style> <style>
.layout.absolute .left-center-right>div{ //定位布局
position: absolute;
}
.layout.absolute .left{
left:0;
width: 300px;
background: red;
}
.layout.absolute .center{
left: 300px;
right: 300px;
background: yellow;
}
.layout.absolute .right{
right:0;
width: 300px;
background: blue;
}
</style> <style>
.layout.flexbox{ //flex布局
margin-top: 110px;
}
.layout.flexbox .left-center-right{
display: flex;
}
.layout.flexbox .left{
width: 300px;
background: red;
}
.layout.flexbox .center{
flex:1;
background: yellow;
}
.layout.flexbox .right{
width: 300px;
background: blue;
}
</style> <style>
.layout.table .left-center-right{ //表格布局
width:100%;
height: 100px;
display: table;
}
.layout.table .left-center-right>div{
display: table-cell;
}
.layout.table .left{
width: 300px;
background: red;
}
.layout.table .center{
background: yellow;
}
.layout.table .right{
width: 300px;
background: blue;
}
</style>
2、html5有哪些新特性
字体样式、圆角、视频、音频、canvas、svg、sessionstorge、localstorage........
3、css3位移怎么做
transform:translate(x,y)
4、垂直居中有几种方法?
定位,表格下(text-justify),display:flex(align-item,text-justify)
5、如何提升网站性能?SEO优化?
减少http请求;图片、样式、js压缩再使用;使用cdn;样式、脚本尽量使用外链;减少dom操作;html语义化;
网站头部title,keywords,description正确描述;html语义化;
6、js里面关于数组的操作有哪些?
jion;concat;pop;push;splice;slice;
7、js数组操作pop返回值是什么?push操作返回值是什么?
pop返回删掉数组最后的那个元素;push增加元素返回长度
8、http协议返回码的含义
4xx:客户端错了;5xx:服务端错了;2xx:成功
9、js深拷贝和浅拷贝的问题
<script type="text/javascript">
var a={
name:'aa'
};
var b = a;
a.name = "cc";
console.log(b.name); //浅拷贝cc
</script>
个人浅理解,浅拷贝就是复制这个对象及属性值,并没有重新开一个内存出来,所以原来属性变了复制过来的也跟着一起变;深拷贝,直接复制整个对象,开辟一个新的内存;
怎么实现js深拷贝?
10、关于typeof
console.log(typeof(a)) //object
console.log(typeof('a')) //string
console.log(typeof(1)) //number
console.log(typeof(null)) //object
console.log(typeof(undefined)) //undefined
console.log(typeof(false)) //boolean
11、关于null、undefined
console.log(!!0) //false
console.log(null==null) //true
console.log(null!=null) //false
console.log(!! undefined) //false
console.log(!! "") //false
console.log(!! null) //false
console.log(null == undefined) //true
console.log(null == 0) //false
console.log(null == "") //false
console.log(0 == undefined) //false
console.log(0 == “”) //true
其实很好理解的,0,null,undefined,“”单独存在的时候,都是表示false;但是null表示为空值;undefined表示未定义的;0和“”也表示空值,我理解为都是字符串。
!取反;!!取反之后再取反
12、js变量的提升
看下面的,最后执行结果————tt/undefined
b(); //tt
console.log(a); //undefined
var a = "bb";
function b(){
console.log("tt");
}
解释一下,js中js在执行过程中,变量和函数的声明会提升,声明是声明!!!表达式不会提升。提升到当前作用域下,如果变量和函数重名了,函数说了算,然后理解一下,上面的代码,就可以解释了。
13、js作用域
这个很好理解,就是还真不知道怎么说,答曰全部变量和局部变量,网上查一下,官方说法如下:在 JavaScript 中, 作用域为可访问变量,对象,函数的集合。
14、js原型与原型链
每个对象创建都会有一个prototype的原型属性,当这个对象的某个属性不存在时就会去他的prototype上查找,而prototype又有自己的prototype,然后如此循环,就是原型链。。。
个人理解:只有函数才有prototype属性,可能这个说法不大准确,但大多数用的时候就这意思,如
scar.color==car.prototype //true 具体我也不多说,大家可以自己查一下
function car(){
this.name = "bmw";
}
car.prototype.color="#f00";
var scar = new car();
console.log(scar.color==car.prototype);
15、for循环 ,衍生问题,for...in...,forEach...,map
主要还是要注意for循环里面函数作用域的问题,看清楚循环里面是函数还是对象。。。
for...in...可以循环输出一个对象的属性
forEach 比较轻便...可以看出不用定义变量计算数组的长度,但是,他不能中断循环,这就忧桑了,讲真,我基本不用
map map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。返回的指定函数一定要有返回值,不然他哪来的值组成新数组呢,不都得undefined
16、settimeout(携程)
js是单线程的,从上到下开始执行,遇到setTimeout、鼠标点击等事件,异步执行它们,同步任务就先执行完毕(我这里都是简而言之的)
下面执行结果:333,444,222
setTimeout(function(){
console.log(222);
},100);
console.log(333);
console.log(444);
那么,问题又来了,settimeout,一定是在100ms后执行的么?显然不是的,具体参考:https://www.cnblogs.com/zichi/p/4604053.html
17、js垃圾机制
18、js数组去重
19、js数组查重
20、单例模式和观察者模式用代码表示出来
21、两个数组相加
22、js继承
构造继承、原型继承(携程)
23、js判断字母大小写
24、一个div里实现3个三角形
css设置div三边边框和高度同样大小,div设置box-sizing,三边框中其中两边颜色设置transprent,就可以获得一个小三角;
::after
::before
同样来两份,就可以了
25、js闭包
简而言之,函数里面的一些变量和函数表达式,可以通过里面的函数访问这个函数的变量,防止全局变量的污染以及变量的改变
26、ES6使用过吗?使用箭头函数有什么好处?
箭头函数的this指向
27、this指向问题
28、浏览器存储的问题(cookie、localstorage、sessionstorage区别,cookie是如何实现的)
29、原生js的增删改查是如何实现的
30、删除数组中出现次数最多的元素并将其输出;
31、谈谈eventloop
32、js事件委托事件冒泡如何实现的
33、ajax怎样修改头部信息
34、localstorage和什么绑定在一起?
初中级web前端工程师的面试题分享的更多相关文章
- web前端工程师全套教程免费分享
这是我自己早前听课时整理的前端全套知识点,适用于初学者,也可以适用于中级的程序员,你们可以下载下来.我自认为还是比较系统全面的,可以抵得上市场上90%的学习资料.讨厌那些随便乱写的资料还有拿出来卖钱的 ...
- Web前端工程师成长之路——知识汇总
一.何为Web前端工程师? 前端工程师,也叫Web前端开发工程师.他是随着web发展,细分出来的行业.Web前端开发工程师,主要职责是利用(X)HTML/CSS/JavaScript ...
- Web前端工程师成长之路
一.何为Web前端工程师? 前端工程师,也叫Web前端开发工程师.他是随着web发展,细分出来的行业.Web前端开发工程师,主要职责是利用(X)HTML/CSS/JavaScript/D ...
- (转)国内外优秀的Web前端工程师
1. 国内外优秀的Web前端工程师 寻找Github.微博.知乎等技术社区上比较活跃.影响力大的圈内大神,供大家膜拜! 视野所限,未必全面,欢迎大家推荐.自荐. 排名不分先后,序号只为标记方便. 提供 ...
- 一个Web前端工程师或程序员的发展方向,未来困境及穷途末路
如果你刚好是一个Web前端工程师,或者你将要从事web前端工作.你应该和我有同样的感慨,web前端技术到了自己的天花板,前端工作我能做多少年?3年或5年?自己的职业规划应该怎么样?收入为什么没有增长? ...
- WEB前端工程师如何做职业规划?
对于一个WEB前端的职业规划,其实是有各种的答案,没有哪种答案是完全正确的,全凭自己的选择,只要是自己选定了,坚持去认真走,就好.在这里, 我只是 简要说一下自己对于这块儿内容的理解.有一个观点想要分 ...
- 谈谈Web前端工程师的定位
原文地址:http://www.360doc.com/content/10/0708/17/1277406_37692580.shtml 2010-07-08 锋子chans 阅 1116 转 ...
- web前端工程师在移动互联网时代里的地位问题
支付宝十周年推出了一个新产品:支付宝的十年账单,我也赶个时髦查看了一下我的支付宝十年账单,哎,感慨自己真是太屌丝了,不过这只是说明我使用淘宝少了,当我大规模网上购物时候,我很讨厌慢速的快递,所以我大部 ...
- 互联网产品团队中Web前端工程师的重要性
国内外各大互联网公司,都有UEx/d|UCD|CDC(Customer Research & User Experience Design Center)团队. 在很多公司会认为,合格的产品经 ...
随机推荐
- jQuery 用$.param(json) 将 Json 转换为 Url queryString
如: var params = { param1: 'bar', param2: 'foo' }; var queryString = $.param(params); // queryString ...
- Executor(二)ThreadPoolExecutor、ScheduledThreadPoolExecutor 及 Executors 工厂类
Executor(二)ThreadPoolExecutor.ScheduledThreadPoolExecutor 及 Executors 工厂类 Java 中的线程池类有两个,分别是:ThreadP ...
- iOS沙盒机制介绍
一.沙盒机制 沙盒的概念:沙盒是每一个iOS应用程序都会自动创建的一个文件系统目录(文件夹),而且沙盒还具有独立.封闭.安全的特点. 沙盒机制 iOS中的沙盒不仅仅是一个文件目录,TA其实更是一种安全 ...
- 首页焦点图myFocus插件
首页焦点图myFocus插件 myFocus特性 小巧却高效强大 myFocus v2.0.min版只有9.89KB,却能使你的网页上可以运行超过30款风格各异的焦点图,在互联网独一无二哦~ 极其 ...
- delphi XE7 数组操作中缺少的find(POS)功能
delphi xe7 中对数组操作做了很多扩充,比如加入了类似字符串处理的功能. 例如,数组相加 var A: array of integer; B: TBytes = [1,2,3,4]; //I ...
- redis学习-事务命令
multi:开启事务 exec:提交事务 discard:取消事务 1.开启事务之后,每次执行命令之后,都要先进入事务队列中,只有在执行 exec之后才开始执行 2.开启事务之后,每次执行命令之后,都 ...
- 使用bat批处理文件备份mysql数据库
@echo offset date_string=%date:~0,4%_%date:~5,2%_%date:~8,2% //日期set time_string=%time:~0,2%_%time: ...
- gj9 迭代器和生成器
9.1 python的迭代协议 list内部实现了__iter__()协议(魔法函数),是可迭代对象,但还不是迭代器(迭代器需要实现__next__协议) 生成器实现了__iter__(),__nex ...
- js限制上传文件的类型和大小
var maxsize = 6*1024*1024;//6M var errMsg = "上传的附件文件不能超过6M!!!"; var tipMsg = "您的浏览器暂不 ...
- SSH:Struts + Spring + Hibernate 轻量级Java EE企业框架
Java EE(Java Platform,Enterprise Edition)是sun公司(2009年4月20日甲骨文将其收购)推出的企业级应用程序版本.这个版本以前称为 J2EE.能够帮助我们开 ...