技术题目收集整理

Posted 2020-08-09

1、（Node）怎么解决Node.js中的未捕获异常？

答：同步异常处理可以简单地额使用try...catch来捕获，异步异常捕获则可以利用内置函数process.on("uncayghtException")，且只能是超时返回。

方法：process.on("uncaughtException",function(err){

     console.log(err);

});

2、Array.isArray(Array.prototype)的结果是：(B)

A：true B:false C：error D：other

注：Array.isArray(),是用来判断某个值是否为数组，实现原理是：

if(!Array.isArray){

    Array.isArray=function(arg){

return Object.prototype.toString.call(arg)==="[object Array]";

}

}

鲜为人知的是Array.prototype是数组，因此，返回true;

3、‘7‘+2 ‘7‘-2结果分别是：72和5；

4、举例说说js中的闭包的概念与用途：

一、闭包，官方对闭包的解释是：一个拥有多个变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。闭包的特点：

1）：作为一个函数变量的一个引用，当函数返回时，其处于激活状态。

2）：一个闭包就是当一个函数返回时，一个没有释放资源的栈区；

简单地说：js允许使用内部函数---即函数定义和函数表达式位于另一个函数的函数体内。而且，这些内部函数可以访问他们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。当其中一个这样的内部函数在包含它们的外部函数之外被调用时，就会形成闭包。

二、闭包的常用写法和用法

1）var Circle=function(){

         var obj=new Object();

         obj.PI=3.14159;

         obj.area=function(r){

              return this.PI*r*r;

           }

         return obj;

}

var c=new Circle();

alert(c.area(1.0));//声明一个变量，将一个函数当做值赋给变量。

2）、var Circle={

              "PI":3.14159;

              "area":function(r){

                     return this.PI*r*r;

                 }

}

alert(Circle.area(1.0));该方法使用最多；

有关prototype:

使用prototype属性定义的对象方法，是非静态方法，只有在实例化后才能使用！其方法内部可以this来应用对象自身中的其他属性。

不使用protorype属性定义的对象方法，是静态方法，只能直接用类名进行调用！另外，此静态方法中无法使用this变量来调用对象其他的属性。

对象没有prototype属性，函数才有；

三、闭包的用途：

1）匿名自执行函数

函数只需要执行一次，且内部变量无需维护，比如UI的初始化，那么我们就可以使用闭包：

var data={

        table:[],

        tree:{}

};

(function(dm){

            for(var i=0;i<dm.table.rows;i++){

                    var row=dm.table.rows[i];

                    for(var j=0;j<row.cells;j++){

                              drawCell(i,j);

                           }

                   }

})(data);

匿名函数执行完之后立刻释放资源，关键是不污染全局对象。

2）、结果缓存：

将计算的值存储起来：

3）、封装：

       var person=function(){

               var name="default";

                return{

                        getName:function(){

                               return name;

                           },

                         setName:function(newName){

                               name=newName;

                          }

              }

}();

print(person.name);//直接访问，结果为undefined;

print(person.getName());//default;

person.setName("zhazhuchi");

print(person.getName());//zhazhuchi;

4)、实现类和继承

      function Person(){

               var name="default";

               return{

                   getName:function(){

                        return name;//闭包

                    }

                   setName:function(newName){

                       name=newName;//闭包

                    }

            }

}

                  var p=new Person();

                  p.setName(‘Tom‘);

                  alert(p.getName());

                  var Jack=function(){};

                  Jack.prototype=new Person();//继承Person中的属性和方法；

                  Jack.prototype.Say=function(){//添加自己的方法；

                        alert("Hello,my name is Jack");

                     };

                    var j=new Jack();

                    j.setName("Jack");

                    j.Say();

                    alert(j.getName());//Jack;

一道没有搞懂的闭包题：http://www.jb51.net/article/49127.htm；

5、网站资源优化，减少加载时间的方法：（补充：可以利用Yslow(官网：http://developer.yahoo.com/yslow/)(教程介绍:http://devework.com/yslow.html )雅虎的网页评分系统检测网站的各项影响网页加载速度的参数。也可以利用google官方网页载入速度检测工具PageSpeed Insights(:http://devework.com/google-chrome-pagespeed-insights.html）

1）、合并js文件和css

将js代码和css样式分别合并到一个共享的文件，这样不仅能简化代码，而且在执行js文件的额时候，如果js文件比较多，就需要进行多次“get”请求，延长加载速度，将js文件合并在一起后，自然就减少了GET请求次数，提高了加速速度。

2）、Sprite图片技术

Sprite是一种网页图片应用处理方式，它是将一个页面涉及到的所有零星图片都包含到一张大图中去，然后利用css技术展现出来。这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅的慢慢的显示出来了，可以减少了整个网页的图片大小，并且利用CSSSprite能很好的减少网页的http请求，从而大大的提高页面的性能。CSSSprites在国内很多人叫css精灵，很早就有了，在很多大型网站都有用到，特别是一些所有页面都存在的图标用的比较多，很好的提升加载速度。

3）、压缩文本和图片

压缩技术如gzip可以有效的减少页面加载的时间。包括HTML、XML、JSON，js和css等，压缩率都可以在大小70%左右。文本压缩用得比较多，一般直接在空间开启就行，而图片的压缩就比较随意，很多都是直接上传，其实还有很大的压缩空间。

4)、延迟显示可见区域外的内容

为了确保用户可以更快的看见可见区域的网页可以延迟加载或展现可见区域外的内容，为了避免页面变形，可以使用占位符标签制定正确的高度和宽度。比如WP的jqueryImage LazyLoad插件就可以在用户停留在第一屏的时候，不加载任何第一屏以下的图片信息，只有当用户吧鼠标往下滚动时，这些图片才开始加载。这样很明显提升可见区域的加载速度，提高用户体验。

5）、确保功能图片优先加载

6）、重新布置Call-to-Action按钮

跳过网页的整体加载速度，速度没变，只是让一些行为按钮提前，Call-to-Action按钮一般习惯设计在页面底部。

7）、图片格式优化

将图片保存为最佳格式：

网页图片中有三种基本格式：gif/jpg/png，具体应该使用什么格式没有固定统一的要求，比如gif格式适合小图标、色彩比较单一、可动画的图片，jpg适合像素较高要求的图片，而png格式可以适合做透明的底图片，还是根据具体要求来选择。另外简单的图片往往是在PNG格式内更小，而更复杂的图像往往是JPEG更好。也根据不同程度的质量而异的情况。

8）、使用Progeressive JPEGs

ProgressiveJPEGs图片是JPEG格式的一种特殊变种，名为"高级JPEG"。在创建高级JPEG文件时，数据是这样安排的：在装入图像是，开始只显示一个模糊的图像，随着数据的装入，图像逐步变得清晰。它相当于交织的GIF格式的图片。

9）、精简代码

这是一个最直接的方法，也是用得比较多的，对网页代码进行瘦身，删除不必要的沉冗代码，比如不必要的空格、换行符、注释等，包括JS代码中的无用代码也需要清除。

10）、延迟加载和执行非必要脚本

网页中有很多脚本是在页面完全加载完之前都不需要执行的，可以延迟加载和执行非必要脚本。这些脚本可以在onload事件之后执行，避免对网页上重要内容的呈现造成影响。这些脚本往往是一些第三方的脚本，比如评论、广告、只能推荐、百度云图、分享等等，这些完全可以等主题加载完后再执行。

11）、使用AJAX

AJAX是一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

12）、自动化的页面性能优化

借助网站提速工具，比如：RadwareFastView;

13)、重定向最小化

避免使用重定向

14）、使用CDN

CDN：（content delivery network）即：内容分发网络：其基本思路是尽可能的避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，是内容传输的更快、更稳定。通过在网络各处放置的节点服务器所构成的在现有互联网基础上的一层智能虚拟网络，CDN系统能够实时的根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容，解决Internet网络拥挤的状况，提高用户访问网站的响应速度。

15）、使用缓存系统

减少对数据库的访问次数，考虑使用一个像memcache一样的缓存系统；

memcache是一套分布式的高速缓存系统，由LiveJournal的Brad Fitzpatrick开发，但目前被许多网站使用以提高网站的访问速度，尤其对于大型的、需要频繁访问数据库的网站访问速度提升效果十分显著。

其工作流程是：先检查客户端的请求数据是否在memcached中，如有，直接把请求数据返回，不再对数据库进行任何操作；如果请求的数据不在memcached中，就去查数据库，把从数据库中获得的数据返回给客户端，同时把数据缓存一份到memcached中；每次更新数据库的同时更新memcached中的数据，保证一致性，当分配给memcached内存空间用完之后，会使用LRU(Least Recently Used,最近最少使用)策略加上到期失效策略，失效数据首先被替换，然后再替换掉最近未使用的数据。

16）、简化DOM

17）、减小Cookie的大小

18）、添加周期头

周期头即:文件保质期。没过保质期的就直接从本地调用，过期了后就得更新了；

这个做法是直接在网站的根目录的.htaccess文件末尾添加一下代码（只有Linux主机有.htaccess）其中Axxxxxx是时间，单位秒。

代码如下：

<IfModule mod_expires.c> ExpiresActive On ExpiresDefault A3600 ExpiresByType image/gif A2592000 ExpiresByType image/png A2592000 ExpiresByType image/jpeg A2592000 ExpiresByType text/plain A604800 ExpiresByType application/x-shockwave-flash A2592000 ExpiresByType video/x-flv A2592000 ExpiresByType application/pdf A2592000 ExpiresByType text/html A600 ExpiresByType image/x-icon A2592000 ExpiresByType application/javascript A604800 ExpiresByType text/css A604800 </IfModule>

19）、配置实体标签设置ETAG

做法：在.htaccess中加入这句话：

FileETag none

 

6、响应式布局和自适应布局一样吗？如果不一样，区别是什么？

响应式与自适应的原理是相似的，都是检测设备，根据不同的设备采用不同的css，而且css都是采用的百分比的，而不是固定的宽度，不同点是响应式的模板在不同的设备上看上去是不一样的，会随着设备的改变而改变展示样式，而自适应不会，所有的设备看起来都是一套的模板，不过是长度或者图片变小了，不会根据设备采用不同的展示样式，流式就是采用了一些设置，当宽度大于多少时怎么展示，小于多少时怎么展示，而且展示的方式向水流一样，一部分一部分的加载，静态的就是采用固定宽度的了。
7、解释一下使用*{box-sizing:border-box}的作用及使用的好处？
首先总结一下盒模型相关的问题：css中的盒模型分为两派：一派是W3C的标准模型，一派是IE的传统模型。需要明确的是它们都是对元素计算尺寸的模型，具体说就是对元素的width,height,padding,border以及元素实际尺寸的计算关系；而不同的地方就在于两者的计算方法不一致：
W3C盒模型：
外盒尺寸：元素空间高度：content height+padding+border+margin
        元素空间宽度：content width+padding+border+margin
内盒尺寸：元素高度：content height+padding+border
        元素宽度：content width+padding+border
IE传统盒模型：
外盒尺寸：元素空间高度：content height+margin(height包含了元素内容宽度，边框宽度，内距宽度)
        元素空间高度：content width+margin(width包含了元素内容宽度、边框宽度、内距宽度)
内盒尺寸：元素高度：content height(height包含了元素内容宽度，边框宽度，内距宽度)
        元素宽度：content width(width包含了元素内容宽度、边框宽度、内距宽度)
css3中的新属性：content-box和border-box两个值；
content-box是css2.1规定的宽度高度行为，宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框。
border-box是为元素设定的宽度和高度决定了元素的边框盒，就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制，通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。其实就是怪异模式了。
padding-box:将padding计入到width之内。

总结：

content-box时，我们在css中定义的width和height是内容的宽度和高度，具体宽高还要加上padding、border、margin。
border-box时，我们在css中定义的width和height是最后总得宽度，而内容的宽度是要减去padding、border、margin。

设置为border-box的好处是：不会打乱页面的顺序，不必重写样式；
使用时：-webkit-box-sizing:
      -mox-box-sizing:
         box-sizing:


未完...