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

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

BUG集散地

2018-09-11 08:39 阅读 33 喜欢 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


如果对你有用的话,请赏给作者一个馒头吧 ...或帮点下页面底部的广告,感谢!!

赞赏支持
提交评论
评论信息(请文明评论)
暂无评论,快来快来写想法...
推荐
codewars上的一个题目,这里记录下解决方法。
现象:在IOS中,jsp页面绑定的点击事件,点击后延迟很大,接近1000ms,反应很慢
在页面中不同的frame之间进行相互调用的话,我们可以通过frame获取对应的window然后进行调用,但是如果是浏览器不同的tab之间呢?
在我们通过canvs画图的时候经常会用到圆,且需要计算出圆上某点的坐标,由于我数学没学好,总是记不得怎么获取,这里记录下,加深记忆
java 对象中有很多引用,甚至会出现循环引用,比如 user 对象中有 school 对象,school 对象中又有 user 对象,这样在对 user 对象序列化的时候,就会出现死循环,导致内存溢出。通过一定的方式,将每个对象增加ID 和 REF 引用标识最终可以解决这个问题
jsQR 是一款纯粹的由javascript实现的二维码识别库,可以在浏览器端使用,也可以在后端node.js环境使用。我之前使用过其他的识别库,例如:qrcode-reader 或其他,在使用上都比较麻烦,而且识别率并不高。jsQR是后来发现的,感觉(没有实际对比验证)jsQR识别率要更高些,使用起来也更简单,不需要安装其他依赖软件。
开发的项目中有使用到微信开发,由于之前偶尔才用一次,也是用的别人的地址和测试号,这里记录下自己的操作。防止后续遗忘。
this 是 JavaScript 的一大难点,多年经验的前端程序员都可能对这方面模糊。this 在大量的函数、类库中都有使用,理清显式绑定和隐式绑定有助于理解或书写这类函数。