黑马程序员技术交流社区
标题: 创业互联网企业需要什么样的web前端工程师 [打印本页]
作者: 就业高冷派 时间: 2017-12-22 14:33
标题: 创业互联网企业需要什么样的web前端工程师
本帖最后由 就业高冷派 于 2017-12-22 15:22 编辑
公司名称：谷雨网络科技
公司地址：科技二路清华科技园309
公司规模：创业型公司（办公室大开间，一百多平的样子）
主要业务：准备或正在研发自己的产品
面试之前，简单登记了一下面试的相关信息，主要包括，面试者姓名、联系方式、面试岗位、面试时间等等。清华科技园的办公室总体来说比较有年代感，环境一般，内部环境远不及整个大楼外部光鲜亮丽。
以下是技术面试环节的问题的整理：
Q：a标签能不能嵌套？为什么？
A：a标签不能嵌套；若a标签中嵌套了a标签，浏览器会自动添加结束符号。
Q：请列举字符串和数据常用操作方法
A：字符串常用操作方法：
split：将字符串分割成数组
substring方法返回位于String对象中指定位置的子字符串。
charAt:返回字符串指定位置的字符
substr方法返回一个从指定位置开始的指定长度的子字符串。
indexOf方法放回String对象内第一次出现子字符串位置。如果没有找到子字符串，则返回-1。
lastIndexOf方法返回String对象中字符串最后出现的位置。如果没有匹配到子字符串，则返回-1。
toLowerCase方法返回一个字符串，该字符串中的字母被转换成小写。
toUpperCase方法返回一个字符串，该字符串中的所有字母都被转换为大写字母。
数组常用方法：
join():将数组转换成字符串
push()方法可以接收任意数量的参数，把它们逐个添加到数组末尾,并返回修改后数组的长度
pop()方法则从数组末尾移除最后一项,减少数组的length值,然后返回移除的项.
shift()移除数组中第一个项并返回改项,同时将数组长度减1.
unshift()在数组前端添加任意个项并返回新数组的长度.
sort()方法回按升序排列数组项
reverse()反转数组
splice()删除数组中的某一项会插入某一项
lastIndexOf():从数组的末尾开始向前查找
indexOf()：从数组的开头(位置0)开始向后查找
Q：js怎么获取url上的参数并以{key:value}形式返回（面试官只要求说出原理即可，下面给出了具体代码实现，主要是根据关键字符切割字符串）
A：
Q：简述css盒模型；css伪类有哪些？Position定位方法？清除浮动方法?（下面给出了盒模型的示例图，个人觉得图片更形象）
A：盒模型：
Css伪类：
锚伪类：a:link、a:visited、a:active、a:hover
:first-child、:last-child、first-of-type、last-of-type、nth-child(n)、
Position定位方式：abosolute、relative、fixed、static
清除浮动：伪元素法、额外标签法、overflow:hidden
Q：css3怎么实现平移，旋转，缩放，倾斜以及过渡效果
A：transform:translate(100px,100px);
transform: rotate(7deg);
transform: scale(1.1);
transform:skew(10deg,10deg);
transition: all 2s;
Q：js怎么将一个时间戳格式化成YYYY-MM-DD的格式（也是简述实现过程即可，下面同样给出了具体代码实现）
A：
function dataFmt(timestamp){
var date=new Date(timestamp);
var year=date.getFullYear();
var month=date.getMonth()+1;
var day=date.getDate();
return year+'-'+month+'-'+day;
}
Q：简单描述一下ajax交互流程
A：
1、客户端浏览器->通过js触发事件
2、创建XHR对象
3、与服务器建立连接->设置连接方式->发送数据
4、注册回调方法
5、执行回调->判断响应结果
Q：简述src和href的区别
A：src是source的缩写，是在页面中引入某种资源,当浏览器解析到src时，会暂停浏览器的渲染，直到该资源加载完毕；href用于在当前文档和引用资源之间建立联系。
Q：说明一下css选择器权重计算规则
A：第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为0100。
第三等：代表类，伪类和属性选择器，如.content，权值为0010。
第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。
通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
继承的样式没有权值。
Q：new Object()的原理是什么？
A：
1)创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
2)属性和方法被加入到 this 引用的对象中。
3)新创建的对象由 this 所引用，并且最后隐式的返回 this
Q：对ES678了解吗？如果了解请列举
A：ES6中新增的特性：
箭头操作符（箭头函数）
类的支持（class关键字）
增强的对象字面量
字符串模板
let与const 关键字
模块
Q：请列举项目中常见的性能优化问题
A：
1)减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。
2)前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
3)用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
4)当需要设置的样式很多时设置className而不是直接操作style。
5)少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
6)避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
7)图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。
关于js前后端分离开发框架（vue、angular）的东西没有太深入的提问，但SPA或前后端分离开发模式依然是大部分公司现在或将来所要求的必备技能。
面试总结：虽然临近年末，依然有很多公司在储备技术人才，所以依然有很多岗位虚位以待。
作者: 逆风TO 时间: 2017-12-25 10:48
赞赞赞！
作者: 小西姐姐 时间: 2017-12-26 10:27
666 这波很精彩
作者: 大安 时间: 2017-12-26 10:42
手动点赞支持！你们很赞！
作者: 渐暖 时间: 2017-12-26 11:11
很详细，感谢分享~
作者: 就业高冷派 时间: 2018-1-5 10:50
啦啦啦啦啦
作者: 就业高冷派 时间: 2018-1-5 10:50
啦啦啦啦啦
作者: 就业高冷派 时间: 2018-1-5 10:50
啦啦啦啦
作者: 就业高冷派 时间: 2018-1-5 10:50
应该的
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |