美文网首页
前端面试(5)

前端面试(5)

作者: 不去解释 | 来源:发表于2017-07-06 00:03 被阅读0次

    1.模块化开发怎么做

    理解模块化开发模式:浏览器端requirejs,seajs;服务器端nodejs;ES6模块化;fis、webpack等前端整体模块化解决方案;grunt、gulp等前端工作流的使用

    2.AMD(Modules/Asynchronous-Definition、CMD(Common Module Definition)规范区别?

    理解这两种规范的差异,主要通过requirejs与seajs的对比,理解模块的定义与引用方式的差异以及这两种规范的设计原则

    3.requireJS的核心原理是什么?(如何动态加载的?如何避免多次加载的?如何 缓存的?)

    核心是js的加载模块,通过正则匹配模块以及模块的依赖关系,保证文件加载的先后顺序,根据文件的路径对加载过的文件做了缓存

    4.让你自己设计实现一个requireJS,你会怎么做?

    核心是实现js的加载模块,维护js的依赖关系,控制好文件加载的先后顺序

    5.如何编写高性能的Javascript?

    使用 DocumentFragment 优化多次 append
    通过模板元素 clone ,替代 createElement
    使用一次 innerHTML 赋值代替构建 dom 元素
    使用 firstChild 和 nextSibling 代替 childNodes 遍历 dom 元素
    使用 Array 做为 StringBuffer ,代替字符串拼接的操作
    将循环控制量保存到局部变量
    顺序无关的遍历时,用 while 替代 for
    将条件分支,按可能性顺序从高到低排列
    在同一条件子的多( >2 )条件分支时,使用 switch 优于 if
    使用三目运算符替代条件分支
    需要不断执行的时候,优先考虑使用 setInterval

    6.eval是做什么的?

    1. 它的功能是把对应的字符串解析成JS代码并运行
    1. 应该避免使用eval,不安全,非常耗性能(2次,一次解析成js语句,一次执行)

    7.说说你对this的理解?

    在JavaScript中,this通常指向的是我们正在执行的函数本身,或者是,指向该函数所属的对象。
    全局的this → 指向的是Window
    函数中的this → 指向的是函数所在的对象
    对象中的this → 指向其本身

    8.new操作符具体干了什么呢?

    1、创建一个空对象,并且 this 变量引用该对象,同时还继承了该函数的原型。
    2、属性和方法被加入到 this 引用的对象中。
    3、新创建的对象由 this 所引用,并且最后隐式的返回 this 。
    var obj = {};
    obj.proto = Base.prototype;
    Base.call(obj);

    9.前端开发的优化问题

    (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布局慢

    10.Zepto的点透问题如何解决?

    点透主要是由于两个div重合,例如:一个div调用show(),一个div调用hide();这个时候当点击上面的div的时候就会影响到下面的那个div;
    解决办法主要有2种:
    1.github上有一个叫做fastclick的库,它也能规避移动设备上click事件的延迟响应,https://github.com/ftlabs/fastclick
    将它用script标签引入页面(该库支持AMD,于是你也可以按照AMD规范,用诸如require.js的模块加载器引入),并且在dom ready时初始化在body上,
    2.根据分析,如果不引入其它类库,也不想自己按照上述fastclcik的思路再开发一套东西,需要1.一个优先于下面的“divClickUnder”捕获的事件;2.并且通过这个事件阻止掉默认行为(下面的“divClickUnder”对click事件的捕获,在ios的safari,click的捕获被认为和滚屏、点击输入框弹起键盘等一样,是一种浏览器默认行为,即可以被event.preventDefault()阻止的行为)。

    11.常使用的库有哪些?常用的前端开发工具?开发过什么应用或组件?

    使用率较高的框架有jQuery、AngularJs, ReactJs, YUI、Prototype、Dojo、Ext.js、Mootools等。尤其是jQuery,超过91%。
    轻量级框架有Modernizr、underscore.js、backbone.js、Raphael.js等。(理解这些框架的功能、性能、设计原理)
    前端开发工具:WebStorm, Hbuilder, Sublime Text 、Eclipse、Notepad、Firebug、HttpWatch、Yslow。
    开发过的插件:城市选择插件,汽车型号选择插件、幻灯片插件。弹出层。(写过开源程序,加载器,js引擎更好)

    12.如何优化网页加载速度?

    1.减少css,js文件数量及大小(减少重复性代码,代码重复利用),压缩CSS和Js代码
    2.图片的大小
    3.把css样式表放置顶部,把js放置页面底部
    4.减少http请求数
    5.使用外部 Js 和 CSS

    相关文章

      网友评论

          本文标题:前端面试(5)

          本文链接:https://www.haomeiwen.com/subject/uoychxtx.html