黑马程序员技术交流社区

标题: web前端开发面试经验分享【易谷网络】 [打印本页]

作者: 就业高冷派 时间: 2018-5-21 16:46
标题: web前端开发面试经验分享【易谷网络】
本帖最后由逆风TO 于 2018-7-25 11:51 编辑

公司名称：西安易谷网络科技有限公司

公司地址：西安市高新区高新六路38号腾飞创新中心B座

公司规模：中等规模

主要业务：软件服务外包

公司官网：http://www.egoonet.com

以下是技术面试环节的问题的整理：

l Q：那些操作会造成HTML页面回流与重绘

A：调整窗口大小；改变字体大小；样式表变动；元素内容变化，尤其是输入控件；CSS伪类激活；DOM操作；offsetWidth, width, clientWidth, scrollTop/scrollHeight的计算，会使浏览器将渐进回流队列Flush，立即执行回流。

l 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)开始向后查找

l Q：css3怎么实现平移，旋转，缩放，倾斜以及过渡效果

A：transform:translate(100px,100px);

transform: rotate(7deg);

transform: scale(1.1);

transform:skew(10deg,10deg);

transition: all 2s;

l Q：简述src和href的区别

A：src是source的缩写，是在页面中引入某种资源,当浏览器解析到src时，会暂停浏览器的渲染，直到该资源加载完毕；href用于在当前文档和引用资源之间建立联系。

l Q：new Object()的原理是什么？

A：

1)创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。

2)属性和方法被加入到 this 引用的对象中。

3)新创建的对象由 this 所引用，并且最后隐式的返回 this

l Q：typescript和javascript有和异同？

A：typescript是javascript的超集，它可以编译成纯javascript；typescript是对es6的具体实现，引入了数据类型的概念，声明一个变量的时候如果指定了数据类型，那么赋值的时候要给其对应数据类型的值，否则程序会报错。Typescript中使用class来声明一个类，通过extends关键字来实现继承。简言之typescript使得前端开发和后端开发越来越接近。

l Q：简述Javascript的垃圾回收机制

A：现在各大浏览器通常用采用的垃圾回收有两种方法：标记清除、引用计数。

标记清除：

这是javascript中最常用的垃圾回收方式。当变量进入执行环境是，就标记这个变量为“进入环境”。从逻辑上讲，永远不能释放进入环境的变量所占用的内存，因为只要执行流进入相应的环境，就可能会用到他们。当变量离开环境时，则将其标记为“离开环境”。垃圾收集器在运行的时候会给存储在内存中的所有变量都加上标记。然后，它会去掉环境中的变量以及被环境中的变量引用的标记。而在此之后再被加上标记的变量将被视为准备删除的变量，原因是环境中的变量已经无法访问到这些变量了。最后。垃圾收集器完成内存清除工作，销毁那些带标记的值，并回收他们所占用的内存空间。

引用计数：

另一种不太常见的垃圾回收策略是引用计数。引用计数的含义是跟踪记录每个值被引用的次数。当声明了一个变量并将一个引用类型赋值给该变量时，则这个值的引用次数就是1。相反，如果包含对这个值引用的变量又取得了另外一个值，则这个值的引用次数就减1。当这个引用次数变成0时，则说明没有办法再访问这个值了，因而就可以将其所占的内存空间给收回来。这样，垃圾收集器下次再运行时，它就会释放那些引用次数为0的值所占的内存。

l Q：JS中判断变量类型是否为数组？

A：1. 使用instanceof运算符

2. 使用Array.isArray(arr);

3. 使用arr.constructor == Array;

l Q：vue 前后端分离项目怎么进行seo优化？

A：spa开发模式的最大问题就是搜索引擎无法爬取页面内容，因为页面是通过http请求服务端接口数据动态渲染的，但是搜索引擎不会等待这个过程，这就导致前后端分离项目的seo优化成为一个问题。对于vue项目来说，一般有两种解决方案：

1. 开启服务端渲染：首先安装 ssr 支持： npm i -D vue-server-renderer；重要的是 vue-server-renderer 与 vue 版本必须一致匹配

优点：可以做到真实数据实时渲染，完全可供SEO小蜘蛛尽情的爬来爬去；完全前后端同构，路由配置共享，不再影响服务器404请求。

缺点：依旧只支持h5 history的路由模式，配置比较麻烦、处理流程比较复杂 (比对预渲染插件，复杂太多)；约束较多，不能随心所欲的乱放大招；对服务器会造成较大的压力，既然让浏览器更快的渲染了，那就得以占用服务器的性能来买单了

2. 使用prerender-spa-plugin插件进行预渲染：严格上来说，此种实现方式并非叫做 SSR，而是预渲染。不过效果上是一样的，甚至某种程度上来说可能要比 SSR 更好。相比官方提供的 SSR 繁琐配置，prerender 配置更简单快捷，如无特殊要求只需在webpack 中加一个 plugin 的配置即可。但是此方式只支持 history方式的路由，不支持hash方式的路由，因为hash路由不会请求服务器资源。

优点：简单、易上手、无需配置即可满足基本的 SEO 要求，因为一般来说一个项目不是所有页面都希望被搜索引擎收录，我们只需要对希望搜索引擎抓取的页面进行预渲染即可。

缺点：只支持history模式，不适合频繁变动的页面，如果这个页面希望做SEO优化。

l 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）图片预加载，将样式表放在顶部，将脚本放在底部加上时间戳。

作者: 逆风TO 时间: 2018-5-22 17:51
赞赞赞感谢老师分享

作者: 半个程序员 时间: 2018-7-25 13:51
西安黑马最牛逼。

作者: 1098018910 时间: 2018-7-25 13:58

西安黑马最牛逼。

作者: 同心筑梦1 时间: 2018-7-25 14:08

作者: 小西西哦 时间: 2018-7-25 14:24
666666666666666666666666666

作者: JavaEE风清扬 时间: 2018-7-25 14:24
不错不错加油.............

作者: 致橡树 时间: 2018-7-25 14:26
疫苗事件持续发酵，黑马程序员带你认识就业潜规则

作者: duanshaobo 时间: 2018-7-25 14:32
生活给了你一匹黑马，你却不会骑

作者: hello！！！ 时间: 2018-7-25 14:48
感谢分享

作者: 从容微笑 时间: 2018-7-25 14:52
感谢分享，谢谢

作者: 小公举 时间: 2018-7-25 14:56
感谢楼主的分享，祝您工作愉快，身体健康

作者: yy1134787753 时间: 2018-7-25 14:57
感谢分享

作者: ruoquan 时间: 2018-7-25 15:03

作者: wangxue123456 时间: 2018-7-25 15:18
西安黑马最牛逼

作者: 760486198 时间: 2018-7-25 15:18
牛，力哈

作者: little_superman 时间: 2018-7-25 15:34

6666666666666666

作者: superbaby 时间: 2018-7-25 15:42
不错不错加油.............

作者: 专找bug 时间: 2018-7-25 16:01

西安黑马最牛逼。

作者: 兮兮哈哈 时间: 2018-7-25 16:24
6666666666666

作者: 耙丫丫 时间: 2018-7-25 16:37

感谢分享

作者: zhaosongzhi 时间: 2018-7-25 16:53

不错不错加油.............

作者: kdhdjdj 时间: 2018-7-25 17:03

作者: 小伙啊 时间: 2018-7-25 18:04

西安黑马最牛逼。

作者: 举个栗子 时间: 2018-7-25 18:09

作者: xuanxushuai01 时间: 2018-7-25 18:14
asdfasdfasdfasfdsadf

作者: xiaoheizi 时间: 2018-7-25 18:19
6666666666666666666666666666666666666666

作者: zplxwl 时间: 2018-7-25 18:59
非常不错哦,....

作者: 仙人掌Sandy1 时间: 2018-7-25 19:10
生活给了你一匹黑马，你却不会骑

作者: 黑马程序员啊 时间: 2018-7-25 22:14
不错不错加油.............

作者: yujq 时间: 2018-7-25 22:33

作者: json0314 时间: 2018-7-26 00:07
赞赞赞~~~

作者: fujiangbo 时间: 2018-7-26 00:34
不错，加油~~~~~

作者: 疯言峰语 时间: 2018-7-26 08:41
相当不错。

作者: 小黑马王子abc 时间: 2018-7-26 08:56

作者: zhuyanting 时间: 2018-7-26 09:46

作者: 多喝点热水~ 时间: 2018-7-26 09:48

作者: ouweina 时间: 2018-7-26 10:56
66666666666666666666666666666

厉害了

作者: 18309299426 时间: 2018-7-26 12:27
棒棒的！大家都是无最好的

作者: 凯凯小王子 时间: 2018-7-26 12:27
66666666666

作者: 殷凯老师 时间: 2018-7-26 15:19
感谢分享!!!

作者: 淡写薰衣草的香 时间: 2018-7-26 16:06

作者: huochao 时间: 2018-7-26 16:07
66666666666666666666

作者: mydorling11 时间: 2018-7-26 17:12
梁启超的肾。。。。梁启超的肾。。。。梁启超的肾。。。。

作者: 零度☆黎明 时间: 2018-7-26 17:15
感谢分享....................

作者: #风萧萧# 时间: 2018-7-26 17:23
谢谢楼主,辛苦了...........

作者: #风萧萧# 时间: 2018-7-26 17:31
666666666666666666666

作者: 谢先森 时间: 2018-7-26 18:11
大家加油666

作者: 哦嗨呦 时间: 2018-7-27 09:05
顶！！！！！！！！！！！！

作者: 温柔一刀！喵！ 时间: 2018-7-27 09:09
干货干货，辛苦了，谢谢分享！

作者: 疯子小花花 时间: 2018-7-27 09:14

作者: 巴拉拉小魔仙 时间: 2018-7-27 09:43
6666666666666

作者: 就业高冷派 时间: 2018-7-27 09:47
感谢分享

作者: 小丹子 时间: 2018-7-27 09:47
感谢楼主霸气分享

1

作者: 小航子 时间: 2018-7-27 09:52
6666666666666

作者: SunYan 时间: 2018-7-27 09:53

赞赞赞感谢老师分享

作者: hongping 时间: 2018-7-27 10:53