面试web前端工程师的两个星期的心路历程及面试题
发布在前端全栈2018年9月28日view:2389JavaScript原型面试
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

毕业接近3年半了,年初公司进行了一次业务调整,hr小姐姐明里暗里让我们自动滚蛋,但是我牛脾气上来了你不说可能我自己会走,你这一说我偏不走了,于是乎,生生熬到9月份。。。

9月中旬开始改简历,投递简历。。。小姐姐我并不是大神,简简单单的一个小前端,主要做官网类型的开发,主要使用html,css3,javascript,jquery外加一点儿vue.js,后端语言稍微了解一点儿php,没办法,原来php小哥哥走了,没人做了,我就硬着头皮改着。个人感觉可以了,就挑了几个合适的公司开始投简历,过了两天开始接到面试电话,然后开始了长达一个多星期的面试。

一开始什么准备都没有,直接去面试,基本都被虐的不行,但也是自己略菜,有些基本的js问题都忘了,回来好好复习了一下之后,后面的面试基本没什么问题,但是总能碰到一些我无法描述的问题。下面我把我面试过程中遇到的问题分享给大家:

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>

个人浅理解,浅拷贝就是复制这个对象及属性值,并没有重新开一个内存出来,所以原来属性变了复制过来的也跟着一起变;深拷贝,直接复制整个对象,开辟一个新的内存;

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 enter image description here

12、js变量的提升

13、js作用域

14、js原型与原型链

15、for循环 (。。错了)

16、settimeout

17、js回收垃圾

18、数组去重

19、数组查重

20、单例模式和观察者模式用代码表示出来(我一脸懵逼,这我要怎么用代码描述。。。)

21、两个数组相加(做错了)

22、js继承

构造继承、原型继承

携程面试题,可是我也不知道当时在抽什么风,构造函数居然写不出来,我估计是去搞笑的,生生浪费了这次机会 总结 以上就是我要说的内容,希望以上的内容可以帮助到正在默默艰辛的大家,希望大家在往后的工作与 面试中一切顺利。

那如何学习才能快速入门并精通呢?

当真正开始学习的时候难免不知道从哪入手,导致效率低下影响继续学习的信心。

但最重要的是不知道哪些技术需要重点掌握,学习时频繁踩坑,最终浪费大量时间,所以有一套实用的视频课程用来跟着学习是非常有必要的。

本次给大家推荐一个免费的学习群,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。

对web开发技术感兴趣的同学,欢迎加入Q群:866109386,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频文件资料。

最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。 enter image description here

评论
发表评论
暂无评论
PUBLISHED IN
前端全栈

不定时推送有价值,干货的前端文章

友情链接 大搜车前端团队博客
我的收藏