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

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

月光魔力鸭

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


感谢支持!

赞赏支持
提交评论
评论信息(请文明评论)
暂无评论,快来快来写想法...
推荐
整理下关于axios的使用,一些常用的调用、处理以及其他。
需求如下:有一张大图,需要显示大图中的一小部分,目前能知道的时候小图的宽高和坐标,同时大图有一个旋转角度可以知道,目标就是把小图正确的显示出来。
在开发过程中经常会碰到跨frame 去操作的需求,那么如何获得这个frame呢,这里写了一个工具类,用来通过name获得frame的jq对象
在使用echarts 来做统计报表的时候,由于数量较多,准备将同类型的相同属性抽取出来,然后用来做默认属性的。结果发现一个问题
web开发中,前台有时候会需要一个随机数或序列,通常来说,这个随机数可能只在当前页面中使用,并不需要太过严格,大体上重复率低即可。
现象:在IOS中,jsp页面绑定的点击事件,点击后延迟很大,接近1000ms,反应很慢
项目中需要使用treegrid,找了下easyui 和 ext都有,但是项目用的框架是 byyui,如果为了treegrid 就把这些都加载的话,感觉不太合算。找了大家常用的基于jquery的treegrid.
关于jquery,他的核心特点就是无new构造和链式调用,这里根据网上的资料,自己简单理解下,有助于消化核心代码。