前端工程师应该注意的一些细节，面试容易问到

最新推荐文章于 2022-10-24 21:41:41 发布

暮春风

最新推荐文章于 2022-10-24 21:41:41 发布

阅读量5.6k

点赞数 4

分类专栏：前端

本文链接：https://blog.csdn.net/nothing_is_imposible/article/details/50402324

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

个人最近整理的一些资料：每个问题都值得思考，有问题的地方还望广大码友批评指正，请勿用于其他用途！！！
所有示例务必亲自试一试！！！

javascript

ajax 原理

Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

如何解决跨域问题，jsonp(json padding) 利用 script 标签没有跨域限制的机制(如果你用nodejs 那可以使用代理解决)


  window['callbackFunc'] = function (response) {
      // 对返回的数据做后续处理
  }

  var script = document.createElement('script');
  script.src = 'http://back/service.jsonp?callback=callbackFunc';
  document.body.appendChild(script);

谈一谈promises

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。

将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。

Promise 的三种状态

Pending（进行中）
Resolved（已完成，又称 Fulfilled）
Rejected（已失败）

  // 能被 2 整除就返回成功， 否则返回失败
  var promise = new Promise(function(resolve, reject) {

    var number, value, error = "Not even";

    setTimeout(() => {

      number = Math.round(Math.random() * 1000)
      if(number%2 === 0) {
        resolve(value);

      } else {
        reject(error);
      }

    }, 1000)
  });

  promise.then( (value) => {
    console.log("success", value)

  }, (error) => {
    console.log("failure", error)
  })

数组去重，不考虑对象数组


  Array.prototype.unique =  function(){
    var result = [];
    var json = {};
    for(var i = 0, len = this.length; i < len; i++){
      if(!json[this[i]]){
        result.push(this[i]);
        json[this[i]] = true;
      }
    }
    return result;
  }

当数组中存在对象时，则使用双重循环

js面向对象和继承的理解（包括 call、apply实现继承）
call、apply 有扩展作用域的功效
闭包: 原理是函数可以访问函数调用时外部的作用域，本质是函数作用域的扩展。
注意：在退出函数时删除不使用的变量，清理内存。

闭包优缺点:jQuery使用闭包原理，封装保护变量，访问局部变量；占内存
闭包的应用：当你点击页面任何一个链接时弹出链接在页面的序号，如第二个链接 alert(2)

    function addClickEvt() {
      var aList = document.getElementsByTagName('a');
      var clickEvt = function(i) {
        return function(e){
          alert(i+1);
        }
      }
      for (var i = aList.length - 1; i >= 0; i--) {
        aList[i].onclick = clickEvt(i);
      }
    }

用js写一个方法来检测浏览器是否有某个css属性，参数为属性名

  function testCss(propertyName) {
    var element = document.createElement('div');
    if(propertyName in element.style) return true;
    return false;
  }

如何获取样式表中的某个css属性，如position，不同于嵌入HTML中的样式 dom.style.position

  var btn = document.getElementById('btn');//btn.backgroundColor 值为空;
  var cStyle = document.defaultView.getComputedStyle(btn,null);
  cStyle.backgroundColor;

根据 offsetPparent offsetLeft offsetRight 计算dom的边距，方法参数为dom

  function getPosition(dom) {
    var left = 0,
        top = 0;
    while(dom.offsetParent){
      left += dom.offsetLeft;
      top += dom.offsetTop;
      dom = dom.offsetParent;
    }
    return {left:left,top:top};
  }

变量作用域和闭包的考察

  function test(){
    var a = 1;
    setTimeout(function() {
      alert(a);
      a=3;
    },1000);
    a = 2;
    setTimeout(function() {
      alert(a);
      a=4;
    },4000)
  }

  test();
  alert(0);//依次弹出：0；2；3

  var a = 1;
  function test() {
    a=b=2;//b=2;a=b;
  }

  test()
  alert(a);
  alert(b);
  //依次弹出：2；2

this 、作用域以及arguments的考察

  var length = 10;
  function logLength() {
    console.log(this.length);
  }
  var obj = {
    length:5,
    method:function(func) {
      this.func = func
      func();
      arguments[0]();
	  this.func()
    }
  }
  obj.method(logLength);
  //依次打印：10,1,5

合并数组并排序

  var a = [1,-2,3,-5,2];
  var b = [-1,4,-3,5,-4];
  // 要求得到 [-5,-4,-3,-2,-1,1,2,3,4,5]，即生序排列
  // 实现
  var arr = a.concat(b);
  function sortArr(item1,item2) {
    return item1 - item2;
  }
  arr.sort(sortArr);

自己写个冒泡排序

  function sortArr(array) {
    for(var i = 0, len = arr.length; i < len; i++){
      for(var j = i+1; j<len; j++){
        var temp = array[i];
        if(array[i] > array[j]) {
          array[i] = array[j];
          array[j] = temp;
        }
      }
    }
  }
  result = sortArr(arr);

数组、递归考察

  // 已有对象obj
  var obj = {
        node_1:{
          node_1_1:{
            node_1_1_1:null
          },
          node_1_2:null
        },
        node_2:{
          node_2_1:{
            node_2_1_1:{
              node_2_1_1_1:null
            }
          }
        }
      }
  // 希望根据该对象获得
  //  ["node_1", "node_1_1", "node_1_1_1", "node_1_2", "node_2", "node_2_1", "node_2_1_1", "node_2_1_1_1"]
  // 请你写一个js方法实现

  function getArray (obj) {
    var arr = [];
    for(var prop in obj){
      arr.push(prop);
      if (obj[prop]!=null) {
        arr = arr.concat(getArray(obj[prop]));
      }
    }
    return arr;
  }
  var result = getArray (obj);

获取字符串中所有匹配项，并将所有项存入一个数组返回,使用 indexOf(str,offset)

  var source = 'asdf aa asdfv ass aaa asdff,dsfsd',
    result = getAllIndexOf(source,'aa');
  function getAllIndexOf(sourceStr,filterStr) {
    var arr = [];
    var index = -1;
    while(sourceStr.indexOf(filterStr,index+1)>=0){
      index = sourceStr.indexOf(filterStr,index+1);
      arr.push(index);
    }
    return arr;
  }

调用方法A() 1000次，随机入B、C，300次执行B(),700次执行C()


    function A() {  
      if(!A.innit){
        C.times = C.times?C.times:0;
        B.times = B.times?B.times:0;
        A.innit = true;
      }
      if(Math.round(1000*Math.random())%2==0 && C.times < 700){
        C.times++;
        C();
      }else if(B.times < 300) {     
        B.times++;
        B();
      }else{
        console.log('超出极限！');
      }
    }
    function B() {
      console.log('调用B的次数为：' + B.times);
    }
    function C() {
      console.log('调用C的次数为：' + C.times);
    }

阻止事件冒泡

event.stopPropagation();event.preventDefault();

事件传播和默认操作是相互独立的两套机制，在二者任何一方发生时，都可以终止另一方。如果想要同时停止事件传播和默认操作，可以在事件处理程序中返回false，这是对在事件对象上同时调用.stopPropagation()和.preventDefault()的一种简写方式。

Jquery

事件

jquery 事件委托 live delegate on (给现在不存在的DOM 元素绑定事件，委托给其父节点)
.bind()是直接绑定在元素上
.live()则是通过冒泡的方式来绑定到元素上的。更适合列表类型的，绑定到document DOM节点上。和.bind()的优势是支持动态数据。
.delegate()则是更精确的小范围使用事件代理，性能优于.live()
.on()则是最新的1.9版本整合了之前的三种方式的新事件绑定机制

each() 与 map()

jquery each 和 map 不同 map返回一个新数组（不需要时会影响内存，产生垃圾）

get() 与 eq()

jquery eq(0) 和 get(0) 不同 eq 返回 jquery 对象，get 返回 javascript 对象

document.ready

window.onload 事件和 jQuery ready 函数有何不同（前者等待媒体、图片等，后者只要DOM树加载完即可，而且可以多次使用）

移除元素

detach() 会保持对过去被解除元素的跟踪, 因此它可以被取消解除, 而 remove() 方法则会保持过去被移除对象的引用

get() 与 ajax()

ajax() 方法更强大，更具可配置性, 让你可以指定等待多久，以及如何处理错误。get() 方法是一个只获取一些数据的专门化方法。

css

谈一谈实践中用 css 解决兼容问题的例子
reset 为了让更多的浏览器能显示同样的效果
hack 使你的CSS代码兼容不同的浏览器”-moz-、-webkit-、*”
sprite 把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位
两个浮动div，同属一个父级，相对位置的确定（根据margin）
盒子模型

内容(content)、填充(padding)、边框(border)、边界(margin)
ie 盒子模型的 content 部分包含了 border 和 padding。（计算高度或宽度时会有所不同）

用css3实现效果，左侧宽度固定，右侧两个宽度自适应，且宽度相等

  .cantianer1 {
    width: 100%;
    border: green solid 4px;
  }
  .column1 {
    float:left;
    width:200px;
    border-right: green solid 4px;
    margin: 0;
  }
  .column {
    width:auto;
    margin-left:200px;
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
    -moz-column-rule: 4px outset green;
    -webkit-column-rule: 4px outset green;
    column-rule: 4px outset green;
  }

实现效果，sidebar 宽度固定，content和header 宽度自适应; 当window 宽度小于 600px 时，变成三行布局

  .cantianer2 {
      width: 100%;
      border: #639A63 solid 6px;
      margin: 0px;
    }
    .header {
      background-color: red;
      width: auto;
      margin: 2px;
    }
    .sidebar {
      float:left;
      width:200px;
      background-color: green;
      margin: 0px 2px 2px 2px;
    }
    .content {
      width:auto;
      margin: 2px 2px 2px 206px;
      background-color: blue;
    }
    @media (max-width: 600px) {
      .header, .sidebar, .content {
        width: 100%;
        clear: both;
        margin: 1px;
      }
      .cantianer {
        border: 1px;
      }
    }

HTML

请写出所了解的HTML5新增特性api，并指出应用场景。

标签	语义	场景
vidio	视频播放	网页上播放视频
canvas	画布	使用 JavaScript 在网页上绘制图像
svg	可伸缩矢量图形	用于定义用于网络的基于矢量的图形
audio	音频	网页上播放音频
article	定义文章	语义化，定义文章时使用

多媒体：video、audio、
游戏：canvas、webgl、
存储：localstorage、sessonstorage、websql、indexedDB
网络：websocket
应用程序缓存：CACHE MANIFEST

HTTP状态码

200成功类、300重定向类、400客户端类、500服务器端类

HTML有哪些块与行内元素
doctype 的作用，标准模式和混杂模式如何区分，有什么区别
HTML语义化的好处

去掉或样式丢失的时候能让页面呈现清晰的结构
屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页
PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页
搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重
你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记,而只注重语义标记
便于团队开发和维护

前端代码以及性能优化

CSS：

CSS代码简写；
同属性提出；
结构清晰优化；

HTML：

语义化；
id、class命名规范；
SEO关键词；

javascript：

减少全局变量；
代码自注视；
统一缩进；
命名规范；

性能优化：

尽量减少HTTP请求；
使用内容发布网络（CDN的使用）；
分离样式、脚本到单独文件；
将CSS样式引用放在顶部；
将javascript脚本引用放在底部（可异步的异步）；
减少DNS查询；
精简javascript；
避免重定向；
删除重复脚本；
配置ETag；
使Ajax可缓存；
图片整合；
样式能用代码尽量用代码，而不用图片；
减少DOM访问；
减小Cookie体积

Search Engine Optimization 搜索引擎优化

Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定
关键技术主要有内容存储和分发技术。

其他（MVC）框架使用经验

ReactJS（只有View）
React之所以快，是因为它不直接操作DOM。React将DOM结构存储在内存中，然后同render()的返回内容进行比较，计算出需要改动的地方，最后才反映到DOM中。
此外，React实现了一套完整的事件合成机制，能够保持事件冒泡的一致性，跨浏览器执行。甚至可以在IE8中使用HTML5的事件。
AngularJS
Backbone
Vue 查看
。
。
。
同源策略:不能访问不同协议、域名、端口、。。。确保安全防止用户数据被恶意网站利用。
跨域方式 .document.domain，jsonp，cors
谈一谈cookie和session以及h5的localstorage sessionstorage 等缓存机制
严格模式好坏处:
Ajax返回的数据如何缓存的
http请求原生，后台返回对象，各种状态码
get post不同
登录密码缓存机制用 get 还是 post 为什么
对象复制，改变副本原对象不受影响
图片懒加载
前端性能优化。。缓存机制优化性能的案例
css3实现画进度圆、css3盒模型属性以及各新属性的使用和场景
移动端如何自适应屏幕大小
H5实际应用有哪些
document.ready 实现机制

暮春风

关注

4
点赞
踩
17

收藏

觉得还不错? 一键收藏
1
评论
前端工程师应该注意的一些细节，面试容易问到

个人最近整理的一些资料：每个问题都值得思考，有问题的地方还望广大码友批评指正，请勿用于其他用途！！！所有示例务必亲自试一试！！！javascriptajax 原理Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Aja...
复制链接

扫一扫