• 2018前端个人面试总结


     前言:

        最近一直在面试,我把面试的5家公司面试题,选择了一些来总结说明,如有问题,欢迎各位小伙伴给与指正

       有些题的答案是百度,有些则是我自己的理解,有些题是开放题,没有标准答案,根据自己实际情况回答即可

         下面这些题都很基础,更多更全的面试题我会在最后把链接发出来,那些链接是我准备面试收集的不错的面试题合集

      

      HTML

           问题1:你怎么理解web语义化?

        要合理使用语义化的标签,比如,段落用P标签,标题用H1-H6;这样不仅利于SEO,也利于后期维护

          问题2:HTML5新增语义化 / 结构元素有哪些?

        header, main, nav, side, article, section, footer

          问题3:<img>标签的title和alt属性有什么区别?

         前者是在图片正常加载,鼠标指上去显示的文本值;后者是在图片加载失败以后显示的提示文字信息

      CSS

       问题1:display:none和visibility:hidden;的区别?

        前者让元素从DOM树中消失,不占据任何空间;后者不会让元素从DOM树中消失,仍占据空间,只是内容不可见。 

      

        问题2:css定位有几种方式?分别是什么?有什么区别?

        4种;static,relative,absolute,fixed;

        static:是默认值(静态定位); 

          relative:相对定位,相对于自身偏移,不会脱离文档流

        absolute:绝对定位,相对于父元素偏移,脱离文档流

        fixed:固定定位,相对于浏览器可视区域定位,脱离文档流

      

       问题3:什么是css的盒子模型?

          盒子模型是指:外边距(margin)+ border(边框) + 内边距(padding)+ content(内容)

         可以把每一个容器,比如div,都看做是一个盒子模型

         比如你给一个div设置宽高为500px,但实际你设置的只是content

       之后你又设置了padding:10px;border:1px solid red;

         这时div的宽高就会变为544px(content 500px + padding 40px + border 4px)

         相当于一个元素的实际宽高是由: padding + border + content  组成

     JS

      问题1:location.replace()和location.assign()有什么区别?

       前者是直接替换原来的URL地址,没有返回;后者是在原来的URL地址后面插入新的URL地址,有返回

      问题2:创建JavaScript对象的三种方法?

      1️⃣:创建一个空对象

       var obj = {};

      2️⃣:对象字面量

      var obj = {

      name: "Tom", 

      age: 21 

     }

      3️⃣:使用new关键字(不推荐,尽量不要用这种方式创建对象)

      var obj = new Object();

     

      问题3:事件绑定的三种方法?

      1️⃣:直接绑定在HTML元素上,不推荐这种,耦合太高

      <div  onclick="doSomeThing()"></div

      2️⃣: 通过DOM获取到元素,然后绑定事件(绑定多个事件时不适用)

       var ele = document.getElementById("element");

       ele.click = function(){}

      3️⃣:绑定多个事件时推荐这种方式

      addEventListener('click','element',function(){})

      问题4: 说一说你对闭包的理解(什么是闭包,用处)  

       我的理解是闭包可以看作是一种方法,这个方法可以帮助我们从外部获取到函数内部的变量

        闭包的用处主要有2个

        一是可以从外部获取到函数内部的变量;

        二是让变量一直存在,不被js的回收机制回收,但滥用闭包会造成内存泄漏

      问题5:typeof null 和 typeof undefiind 的结果是什么?它们的区别?

      结果都是object

      前者表示一个空值,是一个特殊的对象,但null成为对象是历史遗留造成的(感兴趣的小伙伴可自行百度)

        后者的出现也是为了和null做区分,表示未定义,比如一个变量只声明没有赋值 var x;

       问题6:es6的 let 和 const 的区别?

       let用于声明变量,相当于es5里的 var,并且有块级作用域

       const用于声明常量

      问题7:说一说你对promise对象的认识(es6)

      Promise是 CommonJS 提出来的这一种规范,有多个版本,在 ES6 当中已经纳入规范,原生支持 Promise 对象;

      非 ES6 环境可以用类似 Bluebird、Q 这类库来支持。

      详见:http://es6.ruanyifeng.com/?search=promise&x=4&y=2#docs/promise  (阮一峰)

      问题8:在浏览器输入地址按回车以后,发生了什么?(简述)

        1:DNS服务器对该域名进行解析(这个域名解析出来的IP地址就是要请求资源的服务器地址)

       2:尝试向该服务器建立连接,经过三次握手成功建立连接

       3:向服务器发送 HTTP 请求

       3:服务器收到、处理并返回 HTTP 请求

       4:浏览器得到返回内容(这个时候返回的内容都是字符串,需要浏览器解析,也就是浏览器渲染的过程)

      问题9:简述浏览器渲染的过程?(这个说起来文字较多,所以就说几个要点)

       1:根据 HTML 结构生成 DOM 树

      2:根据 CSS 生成 CSSOM

      3:将 DOM 和 CSSOM 整合形成 RenderTree(渲染树)

      4:根据 RenderTree 开始渲染和展示

      5:遇到<script>时,会执行并阻塞渲染

      注:这也是为什么link引入的CSS文件要放在<head>头部,这样便于浏览器快速解析完成css样式,生CSSOM;

        而引入的js文件要放在底部就是为了避免阻塞页面加载,导致页面空白

      问题10:new操作符到底做了什么?

      1:创建一个空对象,用来返回实例对象

      2:把这个空对象的原型指向构造函数的prototype属性

        3:让构造函数的this指向实例对象

      4:返回创建的实例对象

       性能优化

        什么是SEO?SEO要怎么做?

       https://www.cnblogs.com/tu-0718/p/9545372.html  这是我之前写的一篇关于seo基础的博客

         如果让你从前端的角度做性能优化,你会怎么做

         https://www.cnblogs.com/tu-0718/p/6170463.html   这是我之前写的一篇关于前端性能优化的博客

      

      HTTP

        问题1:说一说状态码301和302的区别?

        301:永久重定向,访问的地址永久被迁移到其它地址

        302:临时重定向,访问的地址临时被迁移到其它地址

        详见:https://blog.csdn.net/u013474436/article/details/48138707

           

         问题2:cookie 和 localStorage 有何区别?

         cookie

             1:存储量太小,只有 4KB

           2:所有 HTTP 请求都带着,会影响获取资源的效率

           3:API 简单,需要封装才能用

        localStorage

            1:存储量增大到 5MB

          2:不会带到 HTTP 请求中

          3:API 适用于数据存储 localStorage.setItem(key, value)localStorage.getItem(key)

        问题3:sessionStorage和 localStorage 有何区别?

         前者为临时存储,当网页或浏览器关闭时,缓存会自动清除

          后者为永久存储,除非手动自行清除缓存,否则,缓存永久有效

     

         问题4:什么是同源策略?

        同源策略就是指协议,端口,域名全部都要相同。这是浏览器为安全性考虑实施的安全策略 

        详见:http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html  

      开放性问题(没有答案)

      1: 你觉得JS有哪些优点?你怎么理解JS的面向对象编程?
      2:能否一个人独立开发?
      3:如果和另一个人一起开发,怎么让工作效率更高?
      4:如果和另一个人一起开发,他技术比你好,你会怎么办?
      5:如果和另一个人一起开发,你技术比他好,你会怎么办?
      6:有没有了解过小程序,说说你对小程序的认识?
      7:你觉得vue和原生js相比有什么好处?
      8:说一说你遇到过的兼容性问题(PC和移动端各说一个)
      9:使用过flex布局吗,有什么优点?
      10:你对加班是怎么看的?

      

      附:个人收集的不错的面试题链接分享

          1:https://blog.csdn.net/xm1037782843/article/details/80708533  2018面试题 

        2:https://blog.csdn.net/xllily_11/article/details/70899191   2017年前端面试题最新汇总
        3:https://blog.csdn.net/kebi007/article/details/54882425   2017年前端面试题整理汇总100题

        5:https://blog.csdn.net/qq_22944825/article/details/78169321   前端面试题300道~~熬夜吐血整理

        6:https://segmentfault.com/a/1190000011091907   我遇到的前端面试题2017
        7:https://segmentfault.com/a/1190000015863923    JavaScript面试
        8:https://segmentfault.com/a/1190000011038090    你不能错过的前端面试题合集
        9:https://segmentfault.com/a/1190000015861382   VUE合集面试题
        10:https://www.jianshu.com/p/e54a9a34a773   VUE合集面试题
          11: https://www.qdfuns.com/article/47855/dad8d910a0a6ea455a8319a827aaad7b.html   (没有答案)
        12: https://www.cnblogs.com/nuannuan7362/p/6070401.html    别的程序员是怎样读你的简历的(仅供参考)

        13:https://blog.csdn.net/dick3741/article/details/78854443    如何准备一次技术面试(附一套前端面试题)

      

         

  • 相关阅读:
    Spring bean的自动装配
    JSP三大指令
    JSP九大内置对象
    Java异常的捕获顺序(多个catch)
    Integer.parseInt(s)和Integer.valueOf(s)之间的区别
    mysql忘记密码(MySQL5.7)
    java的四种内部类
    内存泄露查询
    深度优先和广度优先比较
    循环队列
  • 原文地址:https://www.cnblogs.com/tu-0718/p/9811979.html
Copyright © 2020-2023  润新知