本帖最后由 逆风TO 于 2018-7-25 11:51 编辑
公司名称：西安易谷网络科技有限公司 公司地址：西安市高新区高新六路38号腾飞创新中心B座 公司规模：中等规模 主要业务：软件服务外包
以下是技术面试环节的问题的整理： 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） 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。
| 
收藏
淘帖
踩
