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是做什么的?
- 它的功能是把对应的字符串解析成JS代码并运行
- 应该避免使用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