search

zhengwei1949 / myblog

个人博客
10 stars 6 forks source link

面试题.md #65

Open zhengwei1949 opened 7 years ago

zhengwei1949 commented 7 years ago

定位

CSS类

假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应。

请写出五到七种方案，并说出各种方案的优缺点和兼容性

左侧菜单栏占300px，右侧内容可以根据浏览器自适应。根据此要求，编写html css代码

CSS选择器又哪些？有哪些新特性？有哪些伪类？

清除浮动的几种方式，优缺点

图片如何实现垂直居中的

css hack你知道哪些？

谈谈你对CSS盒模型的认识

谈谈你对BFC的了解

JS类

DOM事件

JS原生

JQuery

ES6

工程化

框架

HTTP

前后端通信

安全

渲染机制

JS运行机制

服务器

错误处理

页面性能

缓存

项目问题

正常非技术问题

故意挖坑的问题

代码运行结果，并解释

if(!("a" in window)){
  var a = 1;
}
console.log(a);
function MyObj(){
  this.p.pid++;
}
MyObj.prototype.p = {'pid':0}
MyObj.prototype.getNum = function(num){
  return this.p.pid+num;
}
var _obj1 = new MyObj();
var _obj2 = new MyObj();
console.log(_obj1.getNum(1)+_obj2.getNum(2))
var func = (function(a){
  this.a = a;
  return function(a){
    a+=this.a;
    return a;
  }
})(function(a,b){
  return a;
}(1,2));
func(4);
function Foo() {
 getName = function () { alert (1); };
 return this;
}
Foo.getName = function () { alert (2);};
Foo.prototype.getName = function () { alert (3);};
var getName = function () { alert (4);};
function getName() { alert (5);}

//请写出以下输出结果：
Foo.getName();
getName();
Foo().getName();
getName();
new Foo.getName();
new Foo().getName();
new new Foo().getName();
for(var i=0;i<10;i++){
       alert(i);
       break;
   }
   alert(i);

   for(var i=0;i<10;i++){
      continue;
      alert(i);
   }
   alert(i)
function C1(name){
    if(name) this.name = name;
}
function C2(name){
this.name =name;
}
function C3(name){
 this.name = name ||'join';
}
C1.prototype.name='Tom';
C2.prototype.name='Tom';
C3.prototype.name='Tom';
alert(new C1().name)+(new C2().name)+(new C3().name);

var a=1;
Var obj ={
   “name”:”tom”
}
function fn(){
   var a2 = a,
   obj2 = obj,
   a2 =a,
   obj2.name =”jack”
}
fn();
console.log(a);
console.log(obj);
zhengwei1949 commented 7 years ago
  1. 什么情况下使用gulp,什么情况下使用webpack
    • gulp基于任务的，比如你想压缩html,ok,我就把这个做为一个任务，通过gulp 任务名执行，而webpack侧重点在于分析各个文件之间的关系，通过loaders把css,sass,less看成是模块进行引入到入口文件中形成一个大的bundle.js,gulp比较轻，webpack比较重
    • 如果只是想做一件事情，比如把js压缩一下，用gulp创建一个任务立马可以做完，如果用webpack就太重了，要搞一堆代码，搞一个uglify的插件，很麻烦
    • 除了前端模块化开发，模块之间充分依赖的项目，都不值得用 Webpack 去构建。反之，如果要用 Webpack，请确保模块化，模块之间充分依赖。除此之外的构建工作，都应该交给 gulp 继续完成。
zhengwei1949 commented 7 years ago

Vue的双向数据绑定的原理 答：vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。 具体步骤： 第一步：需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter 这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化 第二步：compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图 第三步：Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是: 1、在自身实例化时往属性订阅器(dep)里面添加自己 2、自身必须有一个update()方法 3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。 第四步：MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。

zhengwei1949 commented 7 years ago

Vue的生命周期的理解： 答：总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。 创建前/后： 在beforeCreated阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，$el还没有。 载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。 更新前/后：当data变化时，会触发beforeUpdate和updated方法。 销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在

zhengwei1949 commented 7 years ago

理解iframe跨域最好的文章 http://www.jb51.net/article/33711.htm

zhengwei1949 commented 7 years ago

shouldComponentUpdate是react性能优化非常重要的一环。组件接受新的state或者props时调用，我们可以设置在此对比前后两个props和state是否相同，如果相同则返回false阻止更新，因为相同的属性状态一定会生成相同的dom树，这样就不需要创造新的dom树和旧的dom树进行diff算法对比，节省大量性能，尤其是在dom结构复杂的时候。不过调用this.forceUpdate会跳过此步骤。

zhengwei1949 commented 7 years ago

如何看懂chrome的火焰图 http://www.ruanyifeng.com/blog/2017/09/flame-graph.html

zhengwei1949 commented 7 years ago

推荐看的书： 《数据结构与算法JavaScript描述》 《学习JavaScript数据结构与算法 第2版》 《图解http》 《Node与Express开发》 《GitHub入门与实践》