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

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

月光魔力鸭

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

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

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

基本

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

原生JS

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();

jquery

$(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 服务器端暂时无法处理请求(可能是过载或维护)。
      ]

1.stackoverflow api 文档 2.mdn - https://developer.mozilla.org/zh-CN/

```

最后的最后

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

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

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


感谢支持!

赞赏支持
提交评论
评论信息 (请文明评论)
暂无评论,快来快来写想法...
推荐
业务中有一段涉及到处理canvas的图片然后将内容进行上传,后测试发现在IE中不好使哎...
web网站上总会有在文本域中提交代码的操作,那么如何处理呢?
突然来了一个调研任务,想要实现一个类似3D虚拟展厅类似的需求,主要就是放一些学生的作品,然后预览啥的,效果还是要全景的效果。 经过一番调查,最终锁定了以前从未接触过的krpano。
通过修改数据库编码处理存储emoj表情导致的报错问题。
最大公因数,也称最大公约数、最大公因子,指两个或多个整数共有约数中最大的一个。a,b的最大公约数记为(a,b),同样的,a,b,c的最大公约数记为(a,b,c),多个整数的最大公约数也有同样的记号。求最大公约数有多种方法,常见的有质因数分解法、短除法、辗转相除法、更相减损法。与最大公约数相对应的概念是最小公倍数,a,b的最小公倍数记为[a,b]。
如何通过js调用本地摄像头呢?获取后如何对视频进行截图呢?在这里跟大家做一个简易的Demo来实现以上几个功能。
最近做个nodejs的项目,使用了thinkjs 3.0 的框架,编辑器为vs code ,之前用的好好的,每次 . 后都有提示的,可是使用了多模块后发现.. model的提示没有了..
jsQR 是一款纯粹的由javascript实现的二维码识别库,可以在浏览器端使用,也可以在后端node.js环境使用。我之前使用过其他的识别库,例如:qrcode-reader 或其他,在使用上都比较麻烦,而且识别率并不高。jsQR是后来发现的,感觉(没有实际对比验证)jsQR识别率要更高些,使用起来也更简单,不需要安装其他依赖软件。