初中级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)团队. 在很多公司会认为,合格的产品经 ...
随机推荐
- 骗分大法之-----分块||迷之线段树例题a
什么是分块呢? 就是一种可以帮你骗到不少分的神奇的算法. 分块的写法有几种,我所知道的有①预处理②不预处理 不预处理的代码我看得一脸懵逼 所以我在这里就谈一下预处理的版本www 首先看一道题: 给定一 ...
- 技术管理zz
1.管理者最重要的是规划Roadmap 技术管理者并不能完全脱离技术.最少要把握最新技术的发展,了解团队当前技术现状和不足.用于规划的时间应该不少于50%的工作时间.具体而言,规划又分为业务规划和团队 ...
- python面向对象-1方法、构造函数
类是指:描述一种事物的定义,是个抽象的概念 实例指:该种事物的一个具体的个体,是具体的东西 打个比方: “人”是一个类.“张三”是人类的一个具体例子 在编程时也是同样的道理,你先自己定义一个“类”,当 ...
- flac3d自定义变量输出云图
定义单元体能量为微单元体的应变比能,即当应力和应变满足线性关系时,微单元体在三向应力状态下的应变比能为: (3.1) 下面代码为用户自定义云图显示变量. Flac3d Code new gen zon ...
- IntelliJ IDEA 2017版 导入项目项目名称为红色
1.导入的项目全部是红色的,原因是版本控制问题,所以修改如下:(File--->settings) 2.找到如图位置的字样,选中当前项目,选择铅笔位置 选择铅笔 弹出对话框(默认选择的是proj ...
- 51Nod 1376 最长递增子序列的数量 (DP+BIT)
题意:略. 析:dp[i] 表示以第 i 个数结尾的LIS的长度和数量,状态方程很好转移,先说长度 dp[i] = max { dp[j] + 1 | a[i] > a[j] && ...
- ArcGIS Desktop python Add-in 创建一个插件
1)创建一个项目 首先创建一个插件项目,本节介绍如何利用向导创建一个插件项目. 创建任何一个ArcGIS插件产品的过程都是一样的. 创建一个Python插件项目包括2个步骤: a) 选择一个插件项目文 ...
- mac下svn无法上传.a文件的问题
Xcode自带的svn和Versions以及一些其它工具都默认ignore".a"文件. 解决办法有两个: 方法一:使用命令行添加文件([转]原文在这) 1.打开终端,输入cd,空 ...
- Reactor 模式在Netty中的应用
Reactor 模式在Netty中的应用 典型的Rector模式 mainReactor 服务端创建成功后,会监听Accept操作,其中ServerSocketchannel中的PipeLine中现在 ...
- Hibernate的查询方式汇总
分别是HQL查询,对象化查询Criteria方法,动态查询DetachedCriteria,例子查询,sql查询,命名查询. 如果单纯的使用hibernate查询数据库只需要懂其中的一项就可以完成想要 ...