编程知识点

辣些经典的web前端面试题

2017-02-09  本文已影响475人  风花花

前记

啊，快乐的时光总是很短暂。
2017年的第一场面试，比想的要更早些 :-D
好呢！总有辣么几个问题，面试总要问！
嘛！想起几个总结几个，答案肯定不标准，随时改，基本就是这样。

谈一谈对性能优化的认识？

前端优化的途径有很多,大致可以分为两类，第一类是页面级别的优化，例如 HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等 ;第二类则是代码级别的优化，例如 Javascript中的DOM 操作优化、CSS选择符优化、图片优化以及 HTML结构优化等等。

摘自：Web前端应该从哪些方面来优化网站?

另外：

  1. 减少http请求次数
    80%的响应时间花在下载网页内容(images, stylesheets, javascripts, scripts, flash等)。减少请求次数是缩短响应时间的关键！可以通过简化页面设计来减少请求次数。
  2. 减少DNS查询次数
    DNS查询也消耗响应时间，如果我们的网页内容来自各个不同的domain (比如嵌入了开放广告，引用了外部图片或脚本)，那么客户端首次解析这些domain也需要消耗一定的时间。DNS查询结果缓存在本地系统和浏览器中一段时间，所以DNS查询一般是对首次访问响应速度有所影响。下面是我清空本地dns后访问博客园主页dns的查询请求。
  3. 缓存Ajax
    Ajax可以帮助我们异步的下载网页内容，但是有些网页内容即使是异步的，用户还是在等待它的返回结果，例如ajax的返回是用户联系人的下拉列表。所以我们还是要注意尽量应用以下规则提高ajax的响应速度。
  4. 延迟加载
    这里讨论延迟加载需要我们知道我们的网页最初加载需要的最小内容集是什么。剩下的内容就可以推到延迟加载的集合中。
    Javascript是典型的可以延迟加载内容。一个比较激进的做法是开发网页时先确保网页在没有Javascript的时候也可以基本工作，然后通过延迟加载脚本来完成一些高级的功能。

另：
唯快不破：Web 应用的 13 个优化步骤

从输入URL到浏览器显示页面发生了什么?

这个过程可以大致分为两个部分：网络通信和页面渲染。

  1. 网络通信
  1. 页面渲染
    浏览器是一个边解析边渲染的过程。首先浏览器解析HTML文件构建DOM树，然后解析CSS文件构建渲染树，等到渲染树构建完成后，浏览器开始布局渲染树并将其绘制到屏幕上。

摘自：从输入URL到浏览器显示页面发生了什么
另：
一个页面从输入URL到页面加载显示完成，这个过程都发生什么？
从输入URL到页面加载发生了什么?

如何垂直居中一个浮动元素？

/* 已知宽高 */
#div1{
  background-color:#6699FF;
  width:200px;
  height:200px;
  position: absolute; /*父元素需要相对定位*/
  top: 50%;
  left: 50%;
  margin-top:-100px ;  
  margin-left: -100px;
}

/* 未知宽高 */
#div1{
  width: 200px;
  height: 200px;
  background-color: #6699FF;
  margin:auto;
  position: absolute;/*父元素需要相对定位*/
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  }

那么问题来了，如何垂直居中一个<img>?（用更简便的方法。）

/*<img>的容器设置如下*/
#container 
{
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}

jquery 常用的选择器

  1. 基本选择器
  2. ID选择器 $(“#id”) 获取指定ID的元素
  3. 类选择器 $(“.class”) 获取同一类class的元素
  4. 标签选择器 $(“div”) 获取同一类标签的所有元素
  5. 并集选择器 $(“div,p,li”) 使用逗号分隔，只要符合条件之一就可。获取所有的div、p、li元素
  6. 交集选择器（标签指定式选择器） $(“div.redClass”) 注意选择器1和选择器2之间没有空格，class为redClass的div元素，注意区分后代选择器。
  7. 层级选择器
  8. 子代选择器 $(“ul>li”) 使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素
  9. 后代选择器 $(“ul li”) 使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等
  10. 过滤选择器
  11. :eq（index） $(“li:eq(2)”).css(“color”, ”red”) 获取到的li元素中，选择索引号为2的元素，索引号index从0开始。
  12. :odd $(“li:odd”).css(“color”, ”red”) 获取到的li元素中，选择索引号为奇数的元素
  13. :even $(“li:even”).css(“color”, ”red”) 获取到的li元素中，选择索引号为偶数的元素
  14. 筛选选择器(方法)
  15. children(selector) $(“ul”).children(“li”) 相当于$(“ul>li”)，子类选择器
  16. find(selector) $(“ul”).find(“li”) 相当于$(“ul li”),后代选择器
  17. siblings(selector) $(“#first”).siblings(“li”) 查找兄弟节点，不包括自己本身。
  18. parent() $(“#first”).parent() 查找父亲
  19. eq(index) $(“li”).eq(2) 相当于$(“li:eq(2)”),index从0开始

bind 算法

只要掌握核心几点就没问题：

  1. Function.bind返回的也是一个函数，所以注定发生了闭包，
  2. 在返回的这个函数中去调用一个其他的函数，这其实本质上就是函数钩子(HOOK)

关于在JS里的函数钩子，我认为只需要维护以下三点即可：

  1. 保持函数的this指向
  2. 保持函数的所有参数都传递到目标函数
  3. 保持函数的返回值

有了以上这几点，这个函数就非常好写了，下面是MSDN上的标准Polyfill:

if (!Function.prototype.bind) {
  Function.prototype.bind = function (oThis) {
    if (typeof this !== "function") {
      // closest thing possible to the ECMAScript 5
      // internal IsCallable function
      throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
    }
    var aArgs = Array.prototype.slice.call(arguments, 1), 
      fToBind = this, 
      fNOP = function () {},
      fBound = function () {
        return fToBind.apply(this instanceof fNOP 
          ? this 
          : oThis || this,
          aArgs.concat(Array.prototype.slice.call(arguments)));
      };
    fNOP.prototype = this.prototype;
    fBound.prototype = new fNOP();
    return fBound;
  };
}

摘自： Web前端面试小记

最后

嘛！来啊，互相伤害啊！面试什么的，伤的多惹，并不算什么【傲娇脸】！

:-P

上一篇下一篇

猜你喜欢

热点阅读