记录下前端面试的几个问题

记录下前端面试的几个问题

月光魔力鸭

2018-09-11 08:39 阅读 647 喜欢 0 前端面试

之前一直没面试过前端,今天有一个,先整理下需要问的问题和答案。

ps:下面有些问题的答案是个人的理解写的,有不对的地方请指正。 主要是js/css/html以及一些框架上的东西。

基本

上面的都是一些基本问题,没有答案。

原生JS

number string boolean null undefined Symbol(es6)
null : 是一个“没有值”的值
undefined : 是变量未声明
appendChild insertBefore
相同之处:都是改变函数内的指向,替换上下文。
不同之处:call 在调用传参的时候,可以传递多个参数,apply 第二个参数是数组
每个对象都会在其内部初始化一个属性,就是prototype(原型),当我们访问一个对象的属性时,
 如果这个对象内部不存在这个属性,那么他就会去prototype里找这个属性,这个prototype又会有自己的prototype,
 于是就这样一直找下去,也就是我们平时所说的原型链的概念。
javascript创建对象简单的说,无非就是使用内置对象或各种自定义对象,当然还可以用JSON;但写法有很多种,也能混合使用。


 1、对象字面量的方式

     person={firstname:"Mark",lastname:"Yun",age:25,eyecolor:"black"};

 2、用function来模拟无参的构造函数

     function Person(){}
     var person=new Person();//定义一个function,如果使用new"实例化",该function可以看作是一个Class
     person.name="Mark";
     person.age="25";
     person.work=function(){
     alert(person.name+" hello...");
     }
     person.work();

 3、用function来模拟参构造函数来实现(用this关键字定义构造的上下文属性)

     function Pet(name,age,hobby){
        this.name=name;//this作用域:当前对象
        this.age=age;
        this.hobby=hobby;
        this.eat=function(){
           alert("我叫"+this.name+",我喜欢"+this.hobby+",是个程序员");
        }
     }
     var maidou =new Pet("麦兜",25,"coding");//实例化、创建对象
     maidou.eat();//调用eat方法


 4、用工厂方式来创建(内置对象)

      var wcDog =new Object();
      wcDog.name="旺财";
      wcDog.age=3;
      wcDog.work=function(){
        alert("我是"+wcDog.name+",汪汪汪......");
      }
      wcDog.work();


 5、用原型方式来创建

     function Dog(){

      }
      Dog.prototype.name="旺财";
      Dog.prototype.eat=function(){
      alert(this.name+"是个吃货");
      }
      var wangcai =new Dog();
      wangcai.eat();


 5、用混合方式来创建

     function Car(name,price){
       this.name=name;
       this.price=price;
     }
      Car.prototype.sell=function(){
        alert("我是"+this.name+",我现在卖"+this.price+"万元");
       }
     var camry =new Car("凯美瑞",27);
     camry.sell();
闭包是指有权访问另一个函数作用域中变量的函数,创建闭包的最常见的方式就是在一个函数内创建另一个函数,通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域,将函数内部的变量和方法传递到外部。

 闭包的特性:

 1.函数内再嵌套函数
 2.内部函数可以引用外层的参数和变量---一般是这个原因
 3.参数和变量不会被垃圾回收机制回收---一般是这个原因

jquery

val prop
$(selector).on('click',selector2,function(){
    
})
$.extend({});
$.fn.extend({});

css

1.id选择器( # myid)
2.类选择器(.myclassname)
3.标签选择器(div, h1, p)
4.相邻选择器(h1 + p)
5.子选择器(ul > li)
6.后代选择器(li a)
7.通配符选择器( * )
8.属性选择器(a[rel = "external"])
9.伪类选择器(a:hover, li:nth-child)
*   可继承的样式: font-size font-family color, UL LI DL DD DT;
*   不可继承的样式:border padding margin width height ;
<div style="width:500px;margin:0px auto;"></div>
有空格或回车造成的;把空格移除或者把font-size设置为0即可消除。
flex 
js--判断滚动条高度变更css
1.meta viewport 和缩放
2.媒体查询 media

html

nodejs

有用nodejs做过开发么?都用nodejs做什么?
对nodejs了解么? 适合在什么场景使用?

最后

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

(8) 避免在页面的主体布局中使用table,table要等其中的内容完全下载之后才会显示出来,显示比div+css布局慢。
对普通的网站有一个统一的思路,就是尽量向前端优化、减少数据库操作、减少磁盘IO。向前端优化指的是,在不影响功能和体验的情况下,能在浏览器执行的不要在服务端执行,能在缓存服务器上直接返回的不要到应用服务器,程序能直接取得的结果不要到外部取得,本机内能取得的数据不要到远程取,内存能取到的不要到磁盘取,缓存中有的不要去数据库查询。减少数据库操作指减少更新次数、缓存结果减少查询次数、将数据库执行的操作尽可能的让你的程序完成(例如join查询),减少磁盘IO指尽量不使用文件系统作为缓存、减少读写文件次数等。程序优化永远要优化慢的部分,换语言是无法“优化”的。
简单版
      [
          100  Continue	继续,一般在发送post请求时,已发送了http header之后服务端将返回此信息,表示确认,之后发送具体参数信息
          200  OK 		正常返回信息
          201  Created  	请求成功并且服务器创建了新的资源
          202  Accepted 	服务器已接受请求,但尚未处理
          301  Moved Permanently  请求的网页已永久移动到新位置。
          302 Found  		临时性重定向。
          303 See Other  	临时性重定向,且总是使用 GET 请求新的 URI。
          304  Not Modified 自从上次请求后,请求的网页未修改过。

          400 Bad Request  服务器无法理解请求的格式,客户端不应当尝试再次使用相同的内容发起请求。
          401 Unauthorized 请求未授权。
          403 Forbidden  	禁止访问。
          404 Not Found  	找不到如何与 URI 相匹配的资源。

          500 Internal Server Error  最常见的服务器端错误。
          503 Service Unavailable 服务器端暂时无法处理请求(可能是过载或维护)。
      ]
myeclipse sublime text2/3 visualstudio webstorm 等等
nodejs 写过轮子么?
js做过什么?
有自己的网站或博客么?
有github么
1.stackoverflow api 文档
2.mdn - [https://developer.mozilla.org/zh-CN/](https://developer.mozilla.org/zh-CN/)

最后的最后

还有什么想问的么?没有,请等电话。

以上问题都是根据要面试的这个人来写的,同时由于本人不会vue react,上面就没涉及这块内容。

转载请注明出处: https://chrunlee.cn/article/web-interview-question.html


感谢支持!

赞赏支持
提交评论
评论信息 (请文明评论)
暂无评论,快来快来写想法...
推荐
在web开发过程中,现在JSON 已经到了俯拾皆是的地步了,操作JSON对于JS来说非常简单,那么我们对于JSON的转化是如何应对的呢?
有时候浏览网页经常会看见一些页面出现一些打字的效果,那么是怎么实现的呢?
在今天之前,我对canvas中rotate其实是一脸蒙逼的... 虽然之前有做过图片旋转,但那是在他人的基础上直接修改的,至于为啥会这样..讲真,还真没注意过,但是今天又需要用到这块了,实在搞不定了,找了各种资料,终于明白了.. 坐标系的问题。
今天小程序上传体验版本后莫名无法获取用户数据,但是本地开发环境是正常的,通过开发工具的真机进行测试也正常,但是通过开发工具的预览又不正常,初步来看代码是没有问题的,可能是哪里设置有问题。
问题是由一个BUG引起的,功能中有使用国际化组件,用的是jquery.i18n,在chrome上、ff上都没有什么问题,问题出在了IE上。万恶的IE..
java 对象中有很多引用,甚至会出现循环引用,比如 user 对象中有 school 对象,school 对象中又有 user 对象,这样在对 user 对象序列化的时候,就会出现死循环,导致内存溢出。通过一定的方式,将每个对象增加ID 和 REF 引用标识最终可以解决这个问题
现象:在IOS中,jsp页面绑定的点击事件,点击后延迟很大,接近1000ms,反应很慢
我们经常会有判断一个数值是素数的需求,那么我们如何来实现呢?