最全前端面试题及答案总结(四)

哪些地方会出现css阻塞,哪些地方会出现js阻塞?

js的阻塞特性:所有浏览器在下载JS的时候,会阻止一切其他活动,比如其他资源的下载,内容的呈现等等。直到JS下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。为了提高用户体验,新一代浏览器都支持并行下载JS,但是JS下载仍然会阻塞其它资源的下载(例如.图片,css文件等)。

由于浏览器为了防止出现JS修改DOM树,需要重新构建DOM树的情况,所以就会阻塞其他的下载和呈现。

嵌入JS会阻塞所有内容的呈现,而外部JS只会阻塞其后内容的显示,2种方式都会阻塞其后资源的下载。也就是说外部样式不会阻塞外部脚本的加载,但会阻塞外部脚本的执行。

CSS怎么会阻塞加载了?CSS本来是可以并行下载的,在什么情况下会出现阻塞加载了(在测试观察中,IE6下CSS都是阻塞加载)

当CSS后面跟着嵌入的JS的时候,该CSS就会出现阻塞后面资源下载的情况。而当把嵌入JS放到CSS前面,就不会出现阻塞的情况了。

根本原因:因为浏览器会维持html中css和js的顺序,样式表必须在嵌入的JS执行前先加载、解析完。而嵌入的JS会阻塞后面的资源加载,所以就会出现上面CSS阻塞下载的情况。

嵌入JS应该放在什么位置?

   1、放在底部,虽然放在底部照样会阻塞所有呈现,但不会阻塞资源下载。   2、如果嵌入JS放在head中,请把嵌入JS放在CSS头部。   3、使用defer(只支持IE)   4、不要在嵌入的JS中调用运行时间较长的函数,如果一定要用,可以用`setTimeout`来调用

Javascript无阻塞加载具体方式

  • 将脚本放在底部。<link>还是放在head中,用以保证在js加载前,能加载出正常显示的页面。<script>标签放在</body>前。

  • 成组脚本:由于每个<script>标签下载时阻塞页面解析过程,所以限制页面的<script>总数也可以改善性能。适用于内联脚本和外部脚本。

  • 非阻塞脚本:等页面完成加载后,再加载js代码。也就是,在window.onload事件发出后开始下载代码。
    (1)defer属性:支持IE4和fierfox3.5更高版本浏览器
    (2)动态脚本元素:文档对象模型(DOM)允许你使用js动态创建HTML的几乎全部文档内容。代码如下:


<script>var script=document.createElement("script");
script.type="text/javascript";
script.src="file.js";document.getElementsByTagName("head")[0].appendChild(script);</script>

此技术的重点在于:无论在何处启动下载,文件额下载和运行都不会阻塞其他页面处理过程。即使在head里(除了用于下载文件的http链接)。

闭包相关问题?

详情请见:详解js闭包

js事件处理程序问题?

详情请见:JavaScript学习总结(九)事件详解

eval是做什么的?

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

写一个通用的事件侦听器函数?

// event(事件)工具集,来源:github.com/markyun
    markyun.Event = {        // 页面加载完成后
        readyEvent : function(fn) {            if (fn==null) {
                fn=document;
            }            var oldonload = window.onload;            if (typeof window.onload != 'function') {                window.onload = fn;
            } else {                window.onload = function() {
                    oldonload();
                    fn();
                };
            }
        },        // 视能力分别使用dom0||dom2||IE方式 来绑定事件
        // 参数: 操作的元素,事件名称 ,事件处理程序
        addEvent : function(element, type, handler) {            if (element.addEventListener) {                //事件类型、需要执行的函数、是否捕捉
                element.addEventListener(type, handler, false);
            } else if (element.attachEvent) {
                element.attachEvent('on' + type, function() {
                    handler.call(element);
                });
            } else {
                element['on' + type] = handler;
            }
        },        // 移除事件
        removeEvent : function(element, type, handler) {            if (element.removeEnentListener) {
                element.removeEnentListener(type, handler, false);
            } else if (element.datachEvent) {
                element.detachEvent('on' + type, handler);
            } else {
                element['on' + type] = null;
            }
        }, 
        // 阻止事件 (主要是事件冒泡,因为IE不支持事件捕获)
        stopPropagation : function(ev) {            if (ev.stopPropagation) {
                ev.stopPropagation();
            } else {
                ev.cancelBubble = true;
            }
        },        // 取消事件的默认行为
        preventDefault : function(event) {            if (event.preventDefault) {
                event.preventDefault();
            } else {
                event.returnValue = false;
            }
        },        // 获取事件目标
        getTarget : function(event) {            return event.target || event.srcElement;
        },        // 获取event对象的引用,取到事件的所有信息,确保随时能使用event;
        getEvent : function(e) {            var ev = e || window.event;            if (!ev) {                var c = this.getEvent.caller;                while (c) {
                    ev = c.arguments[0];                    if (ev && Event == ev.constructor) {                        break;
                    }
                    c = c.caller;
                }
            }            return ev;
        }
    };

Node.js的适用场景?

高并发、聊天、实时消息推送

JavaScript原型,原型链 ? 有什么特点?

*  原型对象也是普通的对象,是对象一个自带隐式的 __proto__ 属性,原型也有可能有自己的原型,如果一个原型对象的原型不为null的话,我们就称之为原型链。*  原型链是由一些用来继承和共享属性的对象组成的(有限的)对象链。

页面重构怎么操作?

编写 CSS、让页面结构更合理化,提升用户体验,实现良好的页面效果和提升性能。

WEB应用从服务器主动推送Data到客户端有那些方式?

html5 websoket
    WebSocket通过Flash
    XHR长时间连接
    XHR Multipart Streaming
    不可见的Iframe    <script>标签的长时间连接(可跨域)

事件、IE与火狐的事件机制有什么区别? 如何阻止冒泡?

 1. 我们在网页中的某个操作(有的操作对应多个事件)。例如:当我们点击一个按钮就会产生一个事件。是可以被 JavaScript 侦测到的行为。  
 2. 事件处理机制:IE是事件冒泡、firefox同时支持两种事件模型,也就是:捕获型事件和冒泡型事件。;
 3.  ev.stopPropagation();

ajax 是什么?ajax 的交互模型?同步和异步的区别?如何解决跨域问题?

详情请见:JavaScript学习总结(七)Ajax和Http状态字

1. 通过异步模式,提升了用户体验  2. 优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用  3. Ajax在客户端运行,承担了一部分本来由服务器承担的工作,减少了大用户量下的服务器负载。  2. Ajax的最大的特点是什么。

  Ajax可以实现动态不刷新(局部刷新)
  readyState属性 状态 有5个可取值: 0=未初始化 ,1=启动 2=发送,3=接收,4=完成

ajax的缺点  1、ajax不支持浏览器back按钮。  2、安全问题 AJAX暴露了与服务器交互的细节。  3、对搜索引擎的支持比较弱。  4、破坏了程序的异常机制。  5、不容易调试。

跨域: jsonp、 iframe、window.name、window.postMessage、服务器上设置代理页面

AMD和CMD 规范的区别?

详情请见:详解JavaScript模块化开发

问题已推送至我的github:https://github.com/hawx1993/front-end-face-questions

对于以上回答有错误的,或者有异议的,或者有添加的,欢迎到我的github上New issues或者Pull Request


版权及转载说明

本站原创、转载文章欢迎任何形式的转载,但请务必注明出处,尊重他人劳动共创开源社区

本站转载文章版权归原作者所有,如发现本站文章涉嫌侵权请点击「联系我们」反馈,本站将立即给予删除

转载请注明:文章转载自:全分享社区 「http://www.aweb.cc

本文标题:最全前端面试题及答案总结(四)

本文地址:http://www.aweb.cc/article/detail/id/290.html

最全前端面试题及答案总结(三) <<上一篇 下一篇>>移动web应用开发整体解决方案-Clou