有谁活着不像是一场炼狱
有谁活着不像是一场炼狱

微博前端面试（Zxw记录问题，自己总结）

目录

1.自我介绍

2.javaScript的数据类型及简单介绍

3.快速排序、冒泡排序的实现原理

4.前端兼容性举例

5.你在做过的项目中，有哪些觉得让你惊艳的地方。具体侧重JS方面讲解。

6.数组与对象的赋值、深、浅拷贝

7.XSS与CSRF攻击原理与防御方法

8.跨域问题:

9.QPS分发问题

10.高并发情况怎么处理？？

11.js作用域和原型链以及闭包

 

1.自我介绍

落落大方，举止端庄得体，说话有条理，注意和面试官眼神交流。

模板：

开场白：面试官您好，非常荣幸参与贵公司**职位的应聘，下面我简单介绍一下我的个人情况

结束语：如果贵公司能够给我这个工作机会，我有信心，也有决心做好这份工作，以上是我的个人基本情况，希望今天自己面试有好的表现！

 

2.javaScript的数据类型及简单介绍

值类型：

  1. String字符串：  用来存储字符的数据变量，单引号双引皆可；
  2. Number数字类型：js只有一种数字类型，带不带小数点皆可；
  3. Boolean布尔型：true或false，常用于判断；
  4. Null类型：尚未存在的对象；
  5. Undefined类型：已经声明但没有赋初始值的对象；
  6. Symbol类型（ES6最新引入，表示独一无二的值）：

引用类型：

  1. Object对象：对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：
  2. Array数组：
  3. Function函数类型

3.快速排序、冒泡排序的实现原理

冒泡排序：假设要求为升序，每一趟里面的具体是：每次比较相邻的数，如果后面的数比前面的数小就交换位置；

每一趟执行完后，最小的元素放在最前面，比完一趟之后，无序序列的长度就减1；

快速排序：通过一趟排序将待排记录分隔成独立的两部分，其中一部分记录的关键字均比另一部分的关键字小，则可分别对这两部分记录继续进行排序，以达到整个序列有序

 

4.前端兼容性举例

what？？

由于各浏览器内核不同，导致不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。

在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题

example：

居中问题

div里的内容，IE默认为居中，而Firefox默认为左对齐，可以尝试增加代码margin: 0 auto;

自定义属性问题
问题说明：IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用 getAttribute() 获取自定义属性；Firefox下，只能使用 getAttribute() 获取自定义属性。 
解决方法：统一通过 getAttribute() 获取自定义属性。

5.你在做过的项目中，有哪些觉得让你惊艳的地方。具体侧重JS方面讲解。

6.数组与对象的赋值、深、浅拷贝

赋值：当我们把一个对象赋值给一个新的变量时，赋的其实是该对象的在栈中的地址，而不是堆中的数据。也就是两个对象指向的是同一个存储空间，无论哪个对象发生改变，其实都是改变的存储空间的内容，因此，两个对象是联动的。

浅拷贝：只是拷贝了基本类型的数据，而引用类型数据，复制后也是会发生引用，我们把这种拷贝叫做浅拷贝（浅复制）

浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。修改新对象里面值类型的数据不会影响到原对象，修改新对象里面引用类型的数据会影响到原对象，

深拷贝：深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。

7.XSS与CSRF攻击原理与防御方法

xss攻击（Cross Site Scripting）：跨站脚本攻击，为了不和CSS（层叠样式表混淆，故意把c改成s），

XSS是指恶意攻击者利用网站没有对用户提交数据进行转义处理或者过滤不足的缺点，进而添加一些代码，嵌入到web页面中去。使别的用户访问都会执行相应的嵌入代码。

从而盗取用户资料、利用用户身份进行某种动作或者对访问者进行病毒侵害的一种攻击方式。

XSS攻击的危害包括： 

盗取各类用户帐号、控制数据、强制发送电子邮件、网站挂马、控制受害者机器向其它网站发起攻击、恶意窃取用户cookie、

共有3类XSS攻击

1、反射型XSS（浏览器——>服务器——>浏览器）

发出请求时，XSS代码出现在URL中，作为输入提交到服务器端，服务器端解析后响应，XSS代码随响应内容一起传回给浏览器，最后浏览器解析执行XSS代码。这个过程像一次反射，故叫反射型XSS。
一个简单的例子：

2、存储型XSS（浏览器——>服务器——>数据库——>浏览器）

存储型XSS和反射型XSS的差别仅在于，提交的代码会存储在服务器端（数据库，内存，文件系统等），下次请求目标页面时不用再提交XSS代码

最典型的例子是留言板XSS，用户提交一条包含XSS代码的留言存储到数据库，目标用户查看留言板时，那些留言的内容会从数据库查询出来并显示，浏览器发现有XSS代码，就当做正常的HTML与Js解析执行，于是触发了XSS攻击。

3、DOM XSS（客户端浏览器）

DOM XSS和反射型XSS、存储型XSS的差别在于DOM XSS的代码并不需要服务器参与，触发XSS靠的是浏览器端的DOM解析，完全是客户端的事情。比如；eval方法就会将字符串转化成可执行的js代码，从而导致问题；

防御方法：

XSS根源就是没完全过滤客户端提交的数据，所以防御方法就是因此在思考解决XSS漏洞的时候，我们应该重点把握如何才能更好的将用户提交的数据进行安全过滤。

CSRF攻击（Cross-site request forgery）：跨站请求伪造

 

防御方法：

1、重要数据交互采用POST进行接收

2、使用验证码，只要是涉及到数据交互就先进行验证码验证，这个方法可以完全解决CSRF。但是出于用户体验考虑，网站不能给所有的操作都加上验证码。因此验证码只能作为一种辅助手段，不能作为主要解决方案。

3、验证HTTP Referer字段，该字段记录了此次HTTP请求的来源地址，最常见的应用是图片防盗链。PHP中可以采用APache URL重写规则进行防御，可参考：http://www.cnblogs.com/phpstudy2015-6/p/6715892.html

4、为每个表单添加令牌token并验证

（可以使用cookie或者session进行构造。当然这个token仅仅只是针对CSRF攻击，在这前提需要解决好XSS攻击，否则这里也将会是白忙一场【XSS可以偷取客户端的cookie】） 

　　CSRF攻击之所以能够成功，是因为攻击者可以伪造用户的请求，该请求中所有的用户验证信息都存在于Cookie中，因此攻击者可以在不知道这些验证信息的情况下直接利用用户自己的Cookie来通过安全验证。由此可知，抵御CSRF攻击的关键在于：在请求中放入攻击者所不能伪造的信息，并且该信息不存在于Cookie之中。

　　鉴于此，我们将为每一个表单生成一个随机数秘钥，并在服务器端建立一个拦截器来验证这个token，如果请求中没有token或者token内容不正确，则认为可能是CSRF攻击而拒绝该请求。

　　由于这个token是随机不可预测的并且是隐藏看不见的，因此恶意攻击者就不能够伪造这个表单进行CSRF攻击了。

　　要求：

　　1、要确保同一页面中每个表单都含有自己唯一的令牌

　　2、验证后需要删除相应的随机数

8.跨域问题:

jsonp:(json with padding)json数据的一种使用模式

9.QPS分发问题

QPS（Queries Per Second）: 每秒钟处理完请求的次数；注意这里是处理完。具体是指发出请求到服务器处理完成功返回结果。可以理解在server中有个counter，每处理一个请求加1，1秒后counter=QPS。

TPS（TransactionsPerSecond）：每秒钟处理完的事务次数，一般TPS是对整个系统来讲的。一个应用系统1s能完成多少事务处理，一个事务在分布式处理中，可能会对应多个请求，对于衡量单个接口服务的处理能力，用QPS比较多。

并发量：系统能同时处理的请求数/事物数

吞吐量：一段时间内能处理的事物的总量

  RT：响应时间，处理一次请求所需要的平均处理时间


10.高并发情况怎么处理？？

CDN加速:CDN服务商在全国各个省份部署计算节点， CDN加速将网站的内容缓存在网络边缘，然后在用户访问网站内容的时候，通过调度系统将用户的请求路由或者引导到离用户接入网络最近或者访问效果的缓存服务器上，有该缓存服务器为用户提供内容服务；相对于直接访问源站，这种方式缩短了用户和内容之间的网络距离，从而达到加速的效果。

负载均衡:当一台服务器的性能达到极限时，我们可以使用服务器集群来提高网站的整体性能。那么，在服务器集群中，需要有一台服务器充当调度者的角色，用户的所有请求都会首先由它接收，调度者再根据每台服务器的负载情况将请求分配给某一台后端服务器去处理。那么在这个过程中，调度者如何合理分配任务，保证所有后端服务器都将性能充分发挥，从而保持服务器集群的整体性能最优，这就是负载均衡问题。

静态HTML缓存:其实大家都知道，效率最高、消耗最小的就是纯静态化的html页面，所以我们尽可能使我们的网站上的页面采用静态页面来实现，这个最简单的方法其实也是最有效的方法。

分布式存储：分布式存储往往采用分布式的系统结构，利用多台存储服务器分担存储负荷，利用位置服务器定位存储信息。

数据库集群和库表散列：大型网站都有复杂的应用，这些应用必须使用数据库，那么在面对大量访问的时候，数据库的瓶颈很快就能显现出来，这时一台数据库将很快无法满足应用，于是我们需要使用数据库集群或者库表散列。

在数据库集群方面，很多数据库都有自己的解决方案，Oracle、Sybase等都有很好的方案，常用的MySQL提供的Master/Slave也是类似的方案，您使用了什么样的DB，就参考相应的解决方案来实施即可。

上面提到的数据库集群由于在架构、成本、扩张性方面都会受到所采用DB类型的限制，于是我们需要从应用程序的角度来考虑改善系统架构，库表散列是常用并且最有效的解决方案。我们在应用程序中安装业务和应用或者功能模块将数据库进行分离，不同的模块对应不同的数据库或者表，再按照一定的策略对某个页面或者功能进行更小的数据库散列，比如用户表，按照用户ID进行表散列，这样就能够低成本的提升系统的性能并且有很好的扩展性。

图片服务器分离：大家知道，对于Web服务器来说，不管是Apache、IIS还是其他容器，图片是最消耗资源的，于是我们有必要将图片与页面进行分离，这是基本上大型网站都会采用的策略，他们都有独立的图片服务器，甚至很多台图片服务器。这样的架构可以降低提供页面访问请求的服务器系统压力，并且可以保证系统不会因为图片问题而崩溃，在应用服务器和图片服务器上，可以进行不同的配置优化，比如apache在配置ContentType的时候可以尽量少支持，尽可能少的LoadModule，保证更高的系统消耗和执行效率。

11.js作用域和原型链以及闭包

变量的作用域：无非就是两种：全局变量和局部变量。Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。

1、什么是作用域链？

在理解闭包以前.最好能先理解一下作用域链的含义,简单来说,作用域链就是函数在定义的时候创建的,用于寻找使用到的变量的值的一个索引,而他内部的规则是,把函数自身的本地变量放在最前面,把自身的父级函数中的变量放在其次,把再高一级函数中的变量放在更后面,以此类推直至全局对象为止.当函数中需要查询一个变量的值的时候,js解释器会去作用域链去查找,从最前面的本地变量中先找,如果没有找到对应的变量,则到下一级的链上找,一旦找到了变量,则不再继续.如果找到最后也没找到需要的变量,则解释器返回undefined.

2、Js的内存回收机制

了解了作用域链,我们再来看看js的内存回收机制,一般来说,一个函数在执行开始的时候,会给其中定义的变量划分内存空间保存,以备后面的语句所用,等到函数执行完毕返回了,这些变量就被认为是无用的了.对应的内存空间也就被回收了.下次再执行此函数的时候,所有的变量又回到最初的状态,重新赋值使用.但是如果这个函数内部又嵌套了另一个函数,而这个函数是有可能在外部被调用到的.并且这个内部函数又使用了外部函数的某些变量的话.这种内存回收机制就会出现问题.如果在外部函数返回后,又直接调用了内部函数,那么内部函数就无法读取到他所需要的外部函数中变量的值了.所以js解释器在遇到函数定义的时候,会自动把函数和他可能使用的变量(包括本地变量和父级和祖先级函数的变量(自由变量))一起保存起来.也就是构建一个闭包,这些变量将不会被内存回收器所回收,只有当内部的函数不可能被调用以后(例如被删除了,或者没有了指针),才会销毁这个闭包,而没有任何一个闭包引用的变量才会被下一次内存回收启动时所回收.

3、什么是闭包

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

4、闭包的主要作用

闭包可以用在许多地方。它的最大用处有两个:一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。

5、闭包与this对象

在闭包中使用this对象可能会导致一些问题，因为匿名函数的执行具有全局性，因此其this对象通常指window

把外部作用域的this对象保存在一个闭包能够访问的变量里面，就可以让闭包访问对象了，

6、闭包与内存泄漏

具体来说，如果闭包的作用域中保存着一个html元素，那么就意味着元素无法被销毁。

以上代码创建了一个作为element元素事件处理程序的闭包，而这个闭包则又创建了一个循环引用。由于匿名函数保存了一个对assignHandler()的活动对象的引用，因此会导致无法减少element的引用数。只有匿名函数存在，element的引用数至少也是1，因此他所占用的内存就不会被回收。

通过写代码来解决内部不能回收问题：

以上代码，实现闭包不直接引用element，包含函数的活动对象中也仍然会保存一个引用。因此，有必要把element的变量设置为null,这样就可以回收其占用的内存。

7、使用闭包的注意点

1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。
 

12.前端优化方案

前端优化的目的是什么 ?
　　1. 从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。
　　2. 从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。
　　总之，恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源利用。
　　前端优化的途径有很多，按粒度大致可以分为两类，第一类是页面级别的优化，例如 HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等 ;第二类则是代码级别的优化，例如 Javascript中的DOM 操作优化、CSS选择符优化、图片优化以及 HTML结构优化等等。另外，本着提高投入产出比的目的，后文提到的各种优化策略大致按照投入产出比从大到小的顺序排列。
　　一、页面级优化
　　1. 减少 HTTP请求数
　　这条策略基本上所有前端人都知道，而且也是最重要最有效的。都说要减少 HTTP请求，那请求多了到底会怎么样呢 ?首先，每个请求都是有成本的，既包含时间成本也包含资源成本。一个完整的请求都需要经过 DNS寻址、与服务器建立连接、发送数据、等待服务器响应、接收数据这样一个 “漫长” 而复杂的过程。时间成本就是用户需要看到或者 “感受” 到这个资源是必须要等待这个过程结束的，资源上由于每个请求都需要携带数据，因此每个请求都需要占用带宽。另外，由于浏览器进行并发请求的请求数是有上限的 (具体参见此处 )，因此请求数多了以后，浏览器需要分批进行请求，因此会增加用户的等待时间，会给用户造成站点速度慢这样一个印象，即使可能用户能看到的第一屏的资源都已经请求完了，但是浏览器的进度条会一直存在。
　　减少 HTTP请求数的主要途径包括：
　　(1). 从设计实现层面简化页面
　保持页面简洁、减少资源的使用时最直接的。如果不是这样，你的页面需要华丽的皮肤，则继续阅读下面的内容。
　　(2). 合理设置 HTTP缓存
　　缓存的力量是强大的，恰当的缓存设置可以大大的减少 HTTP请求。以有啊首页为例，当浏览器没有缓存的时候访问一共会发出 78个请求，共 600多 K数据 (如图 1.1)，而当第二次访问即浏览器已缓存之后访问则仅有 10个请求，共 20多 K数据 (如图 1.2)。 (这里需要说明的是，如果直接 F5刷新页面的话效果是不一样的，这种情况下请求数还是一样，不过被缓存资源的请求服务器是 304响应，只有 Header没有Body ，可以节省带宽 )
　　怎样才算合理设置 ?原则很简单，能缓存越多越好，能缓存越久越好。例如，很少变化的图片资源可以直接通过 HTTP Header中的Expires设置一个很长的过期头 ;变化不频繁而又可能会变的资源可以使用 Last-Modifed来做请求验证。尽可能的让资源能够在缓存中待得更久。

　(3). 资源合并与压缩
　　如果可以的话，尽可能的将外部的脚本、样式进行合并，多个合为一个。另外， CSS、 Javascript、Image 都可以用相应的工具进行压缩，压缩后往往能省下不少空间。
　　(4). CSS Sprites
　　合并 CSS图片，减少请求数的又一个好办法。
　　(5). Inline Images
　　使用 data: URL scheme的方式将图片嵌入到页面或 CSS中，如果不考虑资源管理上的问题的话，不失为一个好办法。如果是嵌入页面的话换来的是增大了页面的体积，而且无法利用浏览器缓存。使用在 CSS中的图片则更为理想一些。
　　(6). Lazy Load Images（自己对这一块的内容还是不了解）
　　这条策略实际上并不一定能减少 HTTP请求数，但是却能在某些条件下或者页面刚加载时减少 HTTP请求数。对于图片而言，在页面刚加载的时候可以只加载第一屏，当用户继续往后滚屏的时候才加载后续的图片。这样一来，假如用户只对第一屏的内容感兴趣时，那剩余的图片请求就都节省了。

　　2. 将外部脚本置底（将脚本内容在页面信息内容加载后再加载）
　　前文有谈到，浏览器是可以并发请求的，这一特点使得其能够更快的加载资源，然而外链脚本在加载时却会阻塞其他资源，例如在脚本加载完成之前，它后面的图片、样式以及其他脚本都处于阻塞状态，直到脚本加载完成后才会开始加载。如果将脚本放在比较靠前的位置，则会影响整个页面的加载速度从而影响用户体验。解决这一问题的方法有很多，在 这里有比较详细的介绍 (这里是译文和 更详细的例子 )，而最简单可依赖的方法就是将脚本尽可能的往后挪，减少对并发下载的影响。
　　3. 异步执行 inline脚本(其实原理和上面是一样，保证脚本在页面内容后面加载。)
　　inline脚本对性能的影响与外部脚本相比，是有过之而无不及。首页，与外部脚本一样， inline脚本在执行的时候一样会阻塞并发请求，除此之外，由于浏览器在页面处理方面是单线程的，当 inline脚本在页面渲染之前执行时，页面的渲染工作则会被推迟。简而言之， inline脚本在执行的时候，页面处于空白状态。鉴于以上两点原因，建议将执行时间较长的 inline脚本异步执行，异步的方式有很多种，例如使用 script元素的defer 属性(存在兼容性问题和其他一些问题，例如不能使用 document.write)、使用setTimeout ，此外，在HTML5中引入了 Web Workers的机制，恰恰可以解决此类问题。

　　4. Lazy Load Javascript（只有在需要加载的时候加载，在一般情况下并不加载信息内容。）
　　随着 Javascript框架的流行，越来越多的站点也使用起了框架。不过，一个框架往往包括了很多的功能实现，这些功能并不是每一个页面都需要的，如果下载了不需要的脚本则算得上是一种资源浪费 -既浪费了带宽又浪费了执行花费的时间。目前的做法大概有两种，一种是为那些流量特别大的页面专门定制一个专用的 mini版框架，另一种则是 Lazy Load。YUI 则使用了第二种方式，在 YUI的实现中，最初只加载核心模块，其他模块可以等到需要使用的时候才加载。

　　5. 将 CSS放在 HEAD中
　　如果将 CSS放在其他地方比如 BODY中，则浏览器有可能还未下载和解析到 CSS就已经开始渲染页面了，这就导致页面由无 CSS状态跳转到 CSS状态，用户体验比较糟糕。除此之外，有些浏览器会在 CSS下载完成后才开始渲染页面，如果 CSS放在靠下的位置则会导致浏览器将渲染时间推迟。
　　6. 异步请求 Callback（就是将一些行为样式提取出来，慢慢的加载信息的内容）
　　7. 减少不必要的 HTTP跳转
　　对于以目录形式访问的 HTTP链接，很多人都会忽略链接最后是否带 ’/'，假如你的服务器对此是区别对待的话，那么你也需要注意，这其中很可能隐藏了 301跳转，增加了多余请求。具体参见下图，其中第一个链接是以无 ’/'结尾的方式访问的，于是服务器有了一次跳转。
　　8. 避免重复的资源请求
　　这种情况主要是由于疏忽或页面由多个模块拼接而成，然后每个模块中请求了同样的资源时，会导致资源的重复请求

　　二、代码级优化
　　1. Javascript
　　(1). DOM
　　DOM操作应该是脚本中最耗性能的一类操作，例如增加、修改、删除 DOM元素或者对 DOM集合进行操作。如果脚本中包含了大量的 DOM操作则需要注意以下几点：
　　a. HTML Collection（HTML收集器，返回的是一个数组内容信息）
　　在脚本中 document.images、document.forms 、getElementsByTagName()返回的都是 HTMLCollection类型的集合，在平时使用的时候大多将它作为数组来使用，因为它有 length属性，也可以使用索引访问每一个元素。不过在访问性能上则比数组要差很多，原因是这个集合并不是一个静态的结果，它表示的仅仅是一个特定的查询，每次访问该集合时都会重新执行这个查询从而更新查询结果。所谓的 “访问集合” 包括读取集合的 length属性、访问集合中的元素。
　　因此，当你需要遍历 HTML Collection的时候，尽量将它转为数组后再访问，以提高性能。即使不转换为数组，也请尽可能少的访问它，例如在遍历的时候可以将 length属性、成员保存到局部变量后再使用局部变量。
　　b. Reflow & Repaint
　　除了上面一点之外， DOM操作还需要考虑浏览器的 Reflow和Repaint ，因为这些都是需要消耗资源的

　　(2). 慎用 with，with(obj){ p = 1}; 代码块的行为实际上是修改了代码块中的 执行环境 ，将obj放在了其作用域链的最前端，在 with代码块中访问非局部变量是都是先从 obj上开始查找，如果没有再依次按作用域链向上查找，因此使用 with相当于增加了作用域链长度。而每次查找作用域链都是要消耗时间的，过长的作用域链会导致查找性能下降。
　　因此，除非你能肯定在 with代码中只访问 obj中的属性，否则慎用 with，替代的可以使用局部变量缓存需要访问的属性。
　　(3). 避免使用 eval和 Function
　　每次 eval 或 Function 构造函数作用于字符串表示的源代码时，脚本引擎都需要将源代码转换成可执行代码。这是很消耗资源的操作 —— 通常比简单的函数调用慢 100倍以上。
　　eval 函数效率特别低，由于事先无法知晓传给 eval 的字符串中的内容，eval在其上下文中解释要处理的代码，也就是说编译器无法优化上下文，因此只能有浏览器在运行时解释代码。这对性能影响很大。
　　Function 构造函数比 eval略好，因为使用此代码不会影响周围代码 ;但其速度仍很慢。
　　此外，使用 eval和 Function也不利于Javascript 压缩工具执行压缩。
　　(4). 减少作用域链查找（这方面设计到一些内容的相关问题）
　　前文谈到了作用域链查找问题，这一点在循环中是尤其需要注意的问题。如果在循环中需要访问非本作用域下的变量时请在遍历之前用局部变量缓存该变量，并在遍历结束后再重写那个变量，这一点对全局变量尤其重要，因为全局变量处于作用域链的最顶端，访问时的查找次数是最多的。
　　此外，要减少作用域链查找还应该减少闭包的使用。
　　(5). 数据访问
　　Javascript中的数据访问包括直接量 (字符串、正则表达式 )、变量、对象属性以及数组，其中对直接量和局部变量的访问是最快的，对对象属性以及数组的访问需要更大的开销。当出现以下情况时，建议将数据放入局部变量：
　　a. 对任何对象属性的访问超过 1次
　　b. 对任何数组成员的访问次数超过 1次
　　另外，还应当尽可能的减少对对象以及数组深度查找。
　　(6). 字符串拼接
　　在 Javascript中使用"+" 号来拼接字符串效率是比较低的，因为每次运行都会开辟新的内存并生成新的字符串变量，然后将拼接结果赋值给新变量。与之相比更为高效的做法是使用数组的 join方法，即将需要拼接的字符串放在数组中最后调用其 join方法得到结果。不过由于使用数组也有一定的开销，因此当需要拼接的字符串较多的时候可以考虑用此方法。
　　2. CSS选择符
　　在大多数人的观念中，都觉得浏览器对 CSS选择符的解析式从左往右进行的，例如
#toc A { color: #444; }
　　这样一个选择符，如果是从右往左解析则效率会很高，因为第一个 ID选择基本上就把查找的范围限定了，但实际上浏览器对选择符的解析是从右往左进行的。如上面的选择符，浏览器必须遍历查找每一个 A标签的祖先节点，效率并不像之前想象的那样高。根据浏览器的这一行为特点，在写选择符的时候需要注意很多事项，有人已经一一列举了， 详情参考此处。

　　3. HTML
　　对 HTML本身的优化现如今也越来越多的受人关注了，详情可以参见这篇 总结性文章 。

　　4. Image压缩
　　图片压缩是个技术活，不过现如今这方面的工具也非常多，压缩之后往往能带来不错的效果，具体的压缩原理以及方法在《 Even Faster Web Sites》第10 章有很详细的介绍.
　　总结
　　本文从页面级以及代码级两个粒度对前端优化的各种方式做了一个总结，这些方法基本上都是前端开发人员在开发的过程中可以借鉴和实践的，除此之外，完整的前端优化还应该包括很多其他的途径，例如 CDN、 Gzip、多域名、无 Cookie服务器等等，由于对于开发人员的可操作性并不强大，在此也就不多叙述了，详细的可以参考 Yahoo和Google 的这些“金科玉律 

13.web页面加载、解析、渲染过程；

1、DNS服务器通过域名查找对应的web 服务器ip地址

2、浏览器访问web服务器这里涉及到客户端与服务器的tcp 三次握手与四次挥手

3、服务器处理完成返回html;

4、浏览器解析、加载页面

　　解析html 构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树 ：

微博前端面试（Zxw记录问题，自己总结）_第1张图片

我们知道浏览器为了体验友好，并不是文档全部都解析才绘制到屏幕上，而是从上至下开始解析html，遇到css 会开启线程下载css；

解析：
　　1、将HTML构建成一个DOM树（DOM = Document Object Model 文档对象模型），DOM 树的构建过程是一个深度遍历过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。 
　　2、将CSS解析成CSS去构造CSSOM树( CSSOM = CSS Object Model CSS对象模型)
　　3、根据DOM树和CSSOM来构造 Rendering Tree（渲染树）。注意：Rendering Tree 渲染树并不等同于 DOM 树，因为一些像 Header 或 display:none 的东西就没必要放在渲染树中了。

　　4.有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。
　　5.下一步操作称之为Layout，顾名思义就是计算出每个节点在屏幕中的位置 layout render tree。 
　　6.再下一步就是绘制，即遍历render树，并使用浏览器UI后端层绘制每个节点。

13.水平居中与垂直居中的实现方法有哪几种

水平居中：

行级元素：为该行级元素的父元素设置text-align:center样式

块级元素：为其自身设置margin:auto样式

垂直居中：

1.display:table;此元素会作为块级表格来显示（类似

），表格前后带有换行符.
display:table-cell;此元素会作为一个表格单元格显示（类似
和 ）

   
块级元素

2. 利用flex布局使内部块级元素水平，垂直居中
display:flex;justify-content: center; align-items:center;


   
块级元素


3.利用定位实现
父元素：position:relative;
子元素：position: absolute;top:50%;left:50%;transform:translate(-50%,-50%);
 

14.px、em、rem的理解与异同

PX：px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

EM：em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。EM特点：

  • 1. em的值并不是固定的；
  • 2. em会继承父级元素的字体大小。

注意：任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

所以我们在写CSS的时候，需要注意两点：

  • 1. body选择器中声明Font-size=62.5%；
  • 2. 将你的原来的px数值除以10，然后换上em作为单位；
  • 3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。

REM

rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子：

p {font-size:14px; font-size:.875rem;}

注意： 选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。

px 与 rem 的选择？

对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可 。

对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。

 

15.事件冒泡与事件捕获；

事件冒泡

事件冒泡是由IE开发团队提出来的，即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播。

 



    
        
        Event Bubbling Example

当用户点击了

元素，click事件将按照
—>—>—>document的顺序进行传播。若在
和上都定义了click事件，如下：点击
，将先输出“div”，再输出“body”。IE9，chrome，Firefox，Opera，Safari都支持事件冒泡，并将事件冒泡到window对象。

 

事件捕获

事件捕获是由Netscape Communicator团队提出来的，是先由最上一级的节点先接收事件，然后向下传播到具体的节点。当用户点击了

元素，采用事件捕获，则click事件将按照document—>—>—>
的顺序进行传播。

若在

和上都定义了click事件，如下：

点击

，将先输出“body”，再输出“div”。

 

IE9，chrome，Firefox，Opera，Safari都支持事件捕获，但是IE8和IE8以下的版本只支持事件冒泡。尽管DOM2规范要求事件应该从document对象开始传播，但是现在的浏览器实现都是从window对象开始捕获事件。

DOM事件流

"DOM2级事件”规定的事件流包含三个阶段：事件捕获阶段，处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，然后是实际的目标接收到事件，最后阶段是冒泡阶段。以上面的HTML页面为例，单击

元素将按照下图触发事件：

若在

和上都定义了click事件，如下：

 

点击

，将先输出“event catch”，再输出“div”，最后输出“event bubble”。

 

你可能感兴趣的:(原创)

  • macOS Sequoia 15.3 (24D60) Boot ISO 原版可引导镜像下载 macos
    macOSSequoia15.3(24D60)BootISO原版可引导镜像下载iPhone镜像、Safari浏览器重大更新和AppleIntelligence等众多全新功能令Mac使用体验再升级请访问原文链接：https://sysin.org/blog/macOS-Sequoia-boot-iso/查看最新版。原创作品，转载请保留出处。作者主页：sysin.orgmacOSSequoia将Mac
  • VMware Live Site Recovery 9.0.2.1 - 数据中心灾难恢复 (DR) esxi
    VMwareLiveSiteRecovery9.0.2.1-数据中心灾难恢复(DR)SiteRecoveryManager9.0Update2请访问原文链接：https://sysin.org/blog/vmware-live-site-recovery-9/查看最新版。原创作品，转载请保留出处。作者主页：sysin.orgVMwareLiveRecovery通过跨混合云的统一管理体验大规模保护网
  • YOLOv10涨点改进：特征融合创新 | 多层次特征融合（SDI），小目标涨点明显，| UNet v2，比UNet显存占用更少、参数更少 AI小怪兽 YOLOv10魔术师YOLO目标检测算法人工智能目标跟踪
    本文独家改进：多层次特征融合（SDI），能够显著提升不同尺度和小目标的识别率如何引入到YOLOv10：1)替代原始的Concat；改进结构图如下：《YOLOv10魔术师专栏》将从以下各个方向进行创新：【原创自研模块】【多组合点优化】【注意力机制】【卷积魔改】【block&多尺度融合结合】【损失&IOU优化】【上下采样优化】【小目标性能提升】【前沿论文分享】【训练实战篇】订阅者通过添加WX:AI_C
  • YOLO11涨点优化：特征融合创新 | 多层次特征融合（SDI），小目标涨点明显| UNet v2，比UNet显存占用更少、参数更少 AI小怪兽 YOLO11魔术师深度学习目标检测计算机视觉目标跟踪神经网络python
    本文独家改进：多层次特征融合（SDI），能够显著提升不同尺度和小目标的识别率如何引入到YOLO11：1)替代原始的Concat；改进结构图如下：《YOLOv11魔术师专栏》将从以下各个方向进行创新：【原创自研模块】【多组合点优化】【注意力机制】【卷积魔改】【block&多尺度融合结合】【损失&IOU优化】【上下采样优化】【小目标性能提升】【前沿论文分享】【训练实战篇】订阅者通过添加WX:AI_CV
  • 招聘 | 具身智能机器人方向全职作者 量子位
    关注前沿科技量子位未来同事你好。你知道“具身智能机器人”了吗？是否希望成为这个时代性技术和产品的长期报道者？现在，我们正在招聘这样一位专注于具身智能机器人方向的原创作者。岗位是全职，工作地点base：北京中关村。工作职责：1、关注具身智能领域新动态新进展；2、持续挖掘撰写具身智能独家原创内容；3、与具身智能领域玩家建立良好联系；4、构建体系化认知和行业洞察。岗位要求：1、对具身智能、前沿科技等科技
  • 图文详解 MapReduce on YARN Shockang 大数据技术体系大数据mapreduceyarn
    前言本文隶属于专栏《1000个问题搞定大数据技术体系》，该专栏为笔者原创，引用请注明来源，不足和错误之处请在评论区帮忙指出，谢谢！本专栏目录结构和参考文献请见1000个问题搞定大数据技术体系正文权威版本——《Hadoop权威指南第3版》1.作业提交MRrunJob从RM获取新的作业ID作业客户端检査作业的输出说明，计算输入分片并将作业资源(包括作业JAR、配置和分片信息)复制到HDFS。通过调用R
  • ESP32 之 ESP-IDF 教学（十二）WiFi篇—— LwIP 之 TCP 通信 Augtons正(单片机) ESP32教学专栏(基于ESP-IDF)udptcp/ip单片机物联网c语言
    本文章来自原创专栏《ESP32教学专栏(基于ESP-IDF)》，讲解如何使用ESP-IDF构建ESP32程序，发布文章并会持续为已发布文章添加新内容！每篇文章都经过了精打细磨！↓↓↓通过下方对话框进入专栏目录页↓↓↓CSDN请求进入目录_Ox是否进入ESP32教学导航(基于ESP-IDF)?确定文章目录一、建立连接——ESP32作TCPClient客户端1.TCPClient的基本思路2.TCPC
  • 深入EPnP算法 JesseChen79 SLAM计算机视觉EPnPComputerVisionPnP位姿估计
    [原创]深入EPnP算法本文是JesseChen的原创文章。PnP问题是研究如何从3D-2D匹配对中求解摄像头位姿，EPnP算法是一种非迭代的PnP算法。本文作者用baidu搜索了“EPnP算法”时，能找到的中文介绍不多，而且这些网文并没有深入研究这个算法，找出这个算法的精妙点。因此贴出这篇文章，希望能给大家带来我对EPnP算法的理解。有问题的同学，可以联系[email protected]讨论。文
  • php tofixed,js修复toFixed()四舍五入精度问题，并相对于原生提高了性能 weixin_39590868 phptofixed
    思路是将小数分割成整数和小数部分然后进行四舍五入再补全字符串后的0目前没发现有什么问题。有bug请反馈谢谢代码原创，转载请注明连接谢谢"usestrict";/***https://my.oschina.net/isgaoyi/blog/4717508-v1.0(2020-11-15T01:46:32+0800)*[email protected]**修复四舍五入精度问题*@me
  • Python常用的内置函数（会持续增加的） 一个小白hyc python
    Python常用内置函数如下：不是原创，但是都是自己整理的1.abs()函数返回数字的绝对值。print(abs(-45))#返回45print("abs(0.2):",abs(0.2))#返回abs(0.2):0.22.all()函数用于判断给定的参数中的所有元素是否都为TRUE，如果是返回True，否则返回False。元素除了是0、空、None、False外都算True；空元组、空列表返回值为
  • 构建大规模分布式服务--高并发、高可用架构系列，高质量原创好文 90后小伙追梦之路 后端架构javajava程序人生分布式开发语言面试
    当我们在谈论“服务治理”的时候，都在谈论些什么？我从业之初接触到的便是一堆基于Webservice、Hessain等实现的跨语言的分布式系统，那是SOA架构和理念十分盛行的时代，我常常听到前辈们在谈论“SOA治理”等高大上的词，但我当时并没有理解何为“治理”，甚至在想：为什么不叫“管理”呢？在此之前，我仅在小学课本上接触过“污水治理”这个词。直到近些年互联网企业大规模服务化进程的推进，以Dubbo
  • Burp Suite Professional 2025.1 发布下载，新增功能简介 burp
    BurpSuiteProfessional2025.1(macOS,Linux,Windows)-Web应用安全、测试和扫描BurpSuiteProfessional,Test,find,andexploitvulnerabilities.请访问原文链接：https://sysin.org/blog/burp-suite-pro/查看最新版。原创作品，转载请保留出处。作者主页：sysin.orgB
  • 【超详细教程(附源码)】基于 ARM Cortex-M3 处理器与 FPGA 的实时人脸检测 SOC Walker_Lau armfpga人脸识别人工智能机器学习
    原创作品，转载请联系作者并注明出处：https://github.com/WalkerLau源码地址：https://github.com/WalkerLau/DetectHumanFaces本项目是第四届集成电路创新创业大赛（ARM杯）的参赛作品，包含了详细的技术文档、软件配置教程以及完整的代码。项目描述我们采用ARMCortex-M3软核及FPGA构成了轻量级的实时人脸检测SOC，通过ov56
  • Android15音频进阶之MediaRecorder支持通道数(一百零五) Android系统攻城狮 音视频python开发语言
    简介：CSDN博客专家、《Android系统多媒体进阶实战》一书作者新书发布：《Android系统多媒体进阶实战》优质专栏：Audio工程师进阶系列【原创干货持续更新中……】优质专栏：多媒体系统工程师系列【原创干货持续更新中……】优质视频课程：AAOS车载系统+AOSP14系统攻城狮入门视频实战课
  • Cisco ISR 1000 Series IOS XE Release 17.16.1a ED cisco
    CiscoISR1000SeriesIOSXERelease17.16.1aED思科1000系列集成多业务路由器IOSXE系统软件请访问原文链接：https://sysin.org/blog/cisco-isr-1000/查看最新版。原创作品，转载请保留出处。作者主页：sysin.org思科1000系列集成多业务路由器可靠性、安全性和性能集互联网接入、高级安全和无线服务功能于一体。思科1000系列
  • 2014数模美赛题目翻译及论文【原创】 oldbalck python
    2019独角兽企业重金招聘Python工程师标准>>>PROBLEMA:TheKeep-Right-Except-To-PassRuleIncountrieswheredrivingautomobilesontherightistherule(thatis,USA,ChinaandmostothercountriesexceptforGreatBritain,Australia,andsomefo
  • 【LeetCode题库】1174. 即时食物配送 II 我梦Leo LeetCode题库leetcode算法数据库mysqlsql
    文章目录原题题解解题笔记我是一名立志把细节说清楚的博主，欢迎【关注】~原创不易，如果有帮助，记得【点赞】【收藏】哦~❥(^_-)~如有错误、疑惑，欢迎【评论】指正探讨，我会尽可能第一时间回复的，谢谢支持原题配送表:Delivery+-----------------------------+---------+|ColumnName|Type|+--------------------------
  • 招聘 | 具身智能机器人方向全职作者 量子位
    关注前沿科技量子位未来同事你好。你知道“具身智能机器人”了吗？是否希望成为这个时代性技术和产品的长期报道者？现在，我们正在招聘这样一位专注于具身智能机器人方向的原创作者。岗位是全职，工作地点base：北京中关村。工作职责：1、关注具身智能领域新动态新进展；2、持续挖掘撰写具身智能独家原创内容；3、与具身智能领域玩家建立良好联系；4、构建体系化认知和行业洞察。岗位要求：1、对具身智能、前沿科技等科技
  • Python数据分析之共享单车及建模探索(CLV建模、可视化) weixin_46205203 笔记python数据分析数据建模
    Python数据分析之共享单车及建模探索(CLV建模、可视化)开发环境4.3【开发平台及环境】Windons10教育版Python3.7IntelliJIDEA2018.2.1/PyCharmGoogeChrome数据清洗分析模块pandas，numpy可视化模块matplotlib上期原创：Python数据分析之智联招聘职位分析完整项目（数据爬取,数据分析,数据可视化）链接:https://bl
  • 我的搬砖工具由 VS Code 变成 Cursor 了 老余捞鱼 人工智能AI编程cursor
    作者：老余捞鱼原创不易，转载请标明出处及原作者。写在前面的话：本文介绍了我从VSCode转向Cursor的原因，强调了Cursor的人工智能交互流畅性以及其他一些优于VSCode的特性。VSCode是免费的，而且运行起来非常出色。我一直很喜欢VSCode，不过，它与GitHubCopilot等编码助手扩展的交互并不比使用ChatGPT好多少，而且肯定不如Claude。在寻找其他替代方案时，我偶然发
  • 转：Spark RDD算子练习题 爱萨萨 技术-大数据sparkRDD练习
    版权声明：本文为博主原创文章，遵循CC4.0BY-SA版权协议，转载请附上原文出处链接和本声明。本文链接：https://blog.csdn.net/qq_40825218/article/details/83720732给定数据如下：12张三25男chinese5012张三25男math6012张三25男english7012李四20男chinese5012李四20男math5012李四20男e
  • 招聘 | 具身智能机器人方向全职作者 量子位
    关注前沿科技量子位未来同事你好。你知道“具身智能机器人”了吗？是否希望成为这个时代性技术和产品的长期报道者？现在，我们正在招聘这样一位专注于具身智能机器人方向的原创作者。岗位是全职，工作地点base：北京中关村。工作职责：1、关注具身智能领域新动态新进展；2、持续挖掘撰写具身智能独家原创内容；3、与具身智能领域玩家建立良好联系；4、构建体系化认知和行业洞察。岗位要求：1、对具身智能、前沿科技等科技
  • 招聘 | 具身智能机器人方向全职作者 量子位
    关注前沿科技量子位未来同事你好。你知道“具身智能机器人”了吗？是否希望成为这个时代性技术和产品的长期报道者？现在，我们正在招聘这样一位专注于具身智能机器人方向的原创作者。岗位是全职，工作地点base：北京中关村。工作职责：1、关注具身智能领域新动态新进展；2、持续挖掘撰写具身智能独家原创内容；3、与具身智能领域玩家建立良好联系；4、构建体系化认知和行业洞察。岗位要求：1、对具身智能、前沿科技等科技
  • 招聘 | 具身智能机器人方向全职作者 量子位
    关注前沿科技量子位未来同事你好。你知道“具身智能机器人”了吗？是否希望成为这个时代性技术和产品的长期报道者？现在，我们正在招聘这样一位专注于具身智能机器人方向的原创作者。岗位是全职，工作地点base：北京中关村。工作职责：1、关注具身智能领域新动态新进展；2、持续挖掘撰写具身智能独家原创内容；3、与具身智能领域玩家建立良好联系；4、构建体系化认知和行业洞察。岗位要求：1、对具身智能、前沿科技等科技
  • Windows Server 2022 中文版、英文版下载 (2024 年 12 月更新) windows-server
    WindowsServer2022中文版、英文版下载(2024年12月更新)WindowsServer2022x64,Version21H2(updatedDec2024)请访问原文链接：https://sysin.org/blog/windows-server-2022/查看最新版。原创作品，转载请保留出处。作者主页：sysin.orgWindowsServer2022采用先进的多层安全机制、A
  • Windows Server 2025 中文版、英文版下载 (2024 年 11 月更新) windows-server
    WindowsServer2025中文版、英文版下载(2024年11月更新)WindowsServer2025LTSCx64(updatedNov2024)请访问原文链接：https://sysin.org/blog/windows-server-2025/查看最新版。原创作品，转载请保留出处。作者主页：sysin.org2024年11月3日，微软宣布WindowsServer2025从Build
  • 国产游戏技术能否引领全球？ 小唐C++ 游戏算法设计游戏c++开发语言动画图形渲染算法
    国产游戏技术能否引领全球，是一个复杂而多维度的问题，需要从多个方面进行分析。一、国产游戏技术的现状技术进步显著：近年来，国产游戏在图形渲染、物理引擎、AI技术等方面取得了显著进步。例如，《黑神话:悟空》等作品采用了实时光线追踪、HDR等高技术，提升了游戏的视觉效果和沉浸感。这些技术的应用，不仅提升了国产游戏的整体质量，也为国产游戏在全球市场上的竞争力奠定了基础。原创IP与技术创新：国产游戏在原创I
  • 【原创】运维基础之OpenResty(Nginx+Lua)+Kafka weixin_30293079 大数据运维lua
    使用docker部署1下载#wgethttps://github.com/doujiang24/lua-resty-kafka/archive/v0.06.tar.gz#tarxvfv0.06.tar.gz2准备配置文件testkafka.conf#vitestkafka.conflua_package_path"/usr/local/openresty/lualib/resty/kafka/?.
  • Nexpose 7.3.2 for Linux & Windows - 漏洞扫描 漏洞
    Nexpose7.3.2forLinux&Windows-漏洞扫描Rapid7on-premVulnerabilityManagement,releasedJan23,2025请访问原文链接：https://sysin.org/blog/nexpose-7/查看最新版。原创作品，转载请保留出处。作者主页：sysin.orgNexposeVulnerabilityScanner您的本地漏洞扫描程序搜
  • Nexpose 7.3.0 for Linux & Windows - 漏洞扫描 漏洞
    Nexpose7.3.0forLinux&Windows-漏洞扫描Rapid7on-premVulnerabilityManagement,releasedJan15,2025请访问原文链接：https://sysin.org/blog/nexpose-7/查看最新版。原创作品，转载请保留出处。作者主页：sysin.orgNexposeVulnerabilityScanner您的本地漏洞扫描程序搜
  • LeetCode[Math] - #66 Plus One Cwind javaLeetCode题解AlgorithmMath
    原题链接：#66 Plus One   要求： 给定一个用数字数组表示的非负整数，如num1 = {1, 2, 3, 9}, num2 = {9, 9}等，给这个数加上1。 注意： 1. 数字的较高位存在数组的头上，即num1表示数字1239 2. 每一位（数组中的每个元素）的取值范围为0~9   难度：简单   分析： 题目比较简单，只须从数组
  • JQuery中$.ajax()方法参数详解 AILIKES JavaScriptjsonpjqueryAjaxjson
    url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。 type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和    delete也可以使用，但仅部分浏览器支持。 timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局
  • JConsole & JVisualVM远程监视Webphere服务器JVM Kai_Ge JVisualVMJConsoleWebphere
        JConsole是JDK里自带的一个工具，可以监测Java程序运行时所有对象的申请、释放等动作，将内存管理的所有信息进行统计、分析、可视化。我们可以根据这些信息判断程序是否有内存泄漏问题。 　　使用JConsole工具来分析WAS的JVM问题，需要进行相关的配置。 　　首先我们看WAS服务器端的配置. 　　1、登录was控制台https://10.4.119.18
  • 自定义annotation 120153216 annotation
    Java annotation 自定义注释@interface的用法 一、什么是注释      说起注释，得先提一提什么是元数据(metadata)。所谓元数据就是数据的数据。也就是说，元数据是描述数据的。就象数据表中的字段一样，每个字段描述了这个字段下的数据的含义。而J2SE5.0中提供的注释就是java源代码的元数据，也就是说注释是描述java源
  • CentOS 5/6.X 使用 EPEL YUM源 2002wmj centos
    CentOS 6.X 安装使用EPEL YUM源1. 查看操作系统版本[root@node1 ~]# uname -a Linux node1.test.com 2.6.32-358.el6.x86_64 #1 SMP Fri Feb 22 00:31:26 UTC 2013 x86_64 x86_64 x86_64 GNU/Linux [root@node1 ~]#
  • 在SQLSERVER中查找缺失和无用的索引SQL 357029540 SQL Server
    --缺失的索引 SELECT  avg_total_user_cost * avg_user_impact * ( user_scans + user_seeks ) AS PossibleImprovement ,          last_user_seek ,    
  • Spring3 MVC 笔记（二） —json+rest优化 7454103 Spring3 MVC
    接上次的 spring mvc 注解的一些详细信息！                          其实也是一些个人的学习笔记  呵呵！
  • 替换“\”的时候报错Unexpected internal error near index 1 \ ^ adminjun java“\替换”
    发现还是有些东西没有刻子脑子里,,过段时间就没什么概念了,所以贴出来...以免再忘...   在拆分字符串时遇到通过 \ 来拆分，可是用所以想通过转义 \\ 来拆分的时候会报异常   public class Main {          /*
  • POJ 1035 Spell checker(哈希表) aijuans 暴力求解--哈希表
    /* 题意：输入字典，然后输入单词，判断字典中是否出现过该单词，或者是否进行删除、添加、替换操作，如果是，则输出对应的字典中的单词 要求按照输入时候的排名输出 题解：建立两个哈希表。一个存储字典和输入字典中单词的排名，一个进行最后输出的判重 */ #include <iostream> //#define using namespace std; const int HASH =
  • 通过原型实现javascript Array的去重、最大值和最小值 ayaoxinchao JavaScriptarrayprototype
    用原型函数（prototype）可以定义一些很方便的自定义函数，实现各种自定义功能。本次主要是实现了Array的去重、获取最大值和最小值。 实现代码如下：   <script type="text/javascript"> Array.prototype.unique = function() { var a = {}; var le
  • UIWebView实现https双向认证请求 bewithme UIWebViewhttpsObjective-C
              什么是HTTPS双向认证我已在先前的博文 ASIHTTPRequest实现https双向认证请求 中有讲述，不理解的读者可以先复习一下。本文是用UIWebView来实现对需要客户端证书验证的服务请求，网上有些文章中有涉及到此内容，但都只言片语，没有讲完全，更没有完整的代码，让人困扰不已。但是此知
  • NoSQL数据库之Redis数据库管理(Redis高级应用之事务处理、持久化操作、pub_sub、虚拟内存) bijian1013 redis数据库NoSQL
    3.事务处理         Redis对事务的支持目前不比较简单。Redis只能保证一个client发起的事务中的命令可以连续的执行，而中间不会插入其他client的命令。当一个client在一个连接中发出multi命令时，这个连接会进入一个事务上下文，该连接后续的命令不会立即执行，而是先放到一个队列中，当执行exec命令时，redis会顺序的执行队列中
  • 各数据库分页sql备忘 bingyingao oraclesql分页
    ORACLE 下面这个效率很低 SELECT * FROM ( SELECT A.*, ROWNUM RN FROM (SELECT * FROM IPAY_RCD_FS_RETURN order by id desc) A ) WHERE RN <20; 下面这个效率很高 SELECT A.*, ROWNUM RN FROM (SELECT * FROM IPAY_RCD_
  • 【Scala七】Scala核心一：函数 bit1129 scala
    1. 如果函数体只有一行代码，则可以不用写{},比如 def print(x: Int) = println(x) 一行上的多条语句用分号隔开，则只有第一句属于方法体，例如   def printWithValue(x: Int) : String= println(x); "ABC"   上面的代码报错，因为，printWithValue的方法
  • 了解GHC的factorial编译过程 bookjovi haskell
    GHC相对其他主流语言的编译器或解释器还是比较复杂的，一部分原因是haskell本身的设计就不易于实现compiler，如lazy特性，static typed，类型推导等。 关于GHC的内部实现有篇文章说的挺好，这里，文中在RTS一节中详细说了haskell的concurrent实现，里面提到了green thread，如果熟悉Go语言的话就会发现，ghc的concurrent实现和Go有点类
  • Java-Collections Framework学习与总结-LinkedHashMap BrokenDreams LinkedHashMap
            前面总结了java.util.HashMap，了解了其内部由散列表实现，每个桶内是一个单向链表。那有没有双向链表的实现呢？双向链表的实现会具备什么特性呢？来看一下HashMap的一个子类——java.util.LinkedHashMap。       
  • 读《研磨设计模式》-代码笔记-抽象工厂模式-Abstract Factory bylijinnan abstract
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ package design.pattern; /* * Abstract Factory Pattern * 抽象工厂模式的目的是： * 通过在抽象工厂里面定义一组产品接口，方便地切换“产品簇” * 这些接口是相关或者相依赖的
  • 压暗面部高光 cherishLC PS
    方法一、压暗高光&重新着色 当皮肤很油又使用闪光灯时，很容易在面部形成高光区域。 下面讲一下我今天处理高光区域的心得： 皮肤可以分为纹理和色彩两个属性。其中纹理主要由亮度通道（Lab模式的L通道）决定，色彩则由a、b通道确定。 处理思路为在保持高光区域纹理的情况下，对高光区域着色。具体步骤为：降低高光区域的整体的亮度，再进行着色。 如果想简化步骤，可以只进行着色（参看下面的步骤1
  • Java VisualVM监控远程JVM crabdave visualvm
    Java VisualVM监控远程JVM    JDK1.6开始自带的VisualVM就是不错的监控工具. 这个工具就在JAVA_HOME\bin\目录下的jvisualvm.exe, 双击这个文件就能看到界面   通过JMX连接远程机器, 需要经过下面的配置: 1. 修改远程机器JDK配置文件 (我这里远程机器是linux).    
  • Saiku去掉登录模块 daizj saiku登录olapBI
    1、修改applicationContext-saiku-webapp.xml <security:intercept-url pattern="/rest/**" access="IS_AUTHENTICATED_ANONYMOUSLY" />  <security:intercept-url pattern=&qu
  • 浅析 Flex中的Focus dsjt htmlFlexFlash
    关键字：focus、 setFocus、 IFocusManager、KeyboardEvent 焦点、设置焦点、获得焦点、键盘事件 一、无焦点的困扰——组件监听不到键盘事件 原因：只有获得焦点的组件（确切说是InteractiveObject）才能监听到键盘事件的目标阶段；键盘事件（flash.events.KeyboardEvent）参与冒泡阶段，所以焦点组件的父项（以及它爸
  • Yii全局函数使用 dcj3sjt126com yii
    由于YII致力于完美的整合第三方库，它并没有定义任何全局函数。yii中的每一个应用都需要全类别和对象范围。例如，Yii::app()->user;Yii::app()->params['name'];等等。我们可以自行设定全局函数，使得代码看起来更加简洁易用。(原文地址) 我们可以保存在globals.php在protected目录下。然后，在入口脚本index.php的，我们包括在
  • 设计模式之单例模式二（解决无序写入的问题） come_for_dream 单例模式volatile乱序执行双重检验锁
                    在上篇文章中我们使用了双重检验锁的方式避免懒汉式单例模式下由于多线程造成的实例被多次创建的问题，但是因为由于JVM为了使得处理器内部的运算单元能充分利用，处理器可能会对输入代码进行乱序执行（Out Of Order Execute）优化，处理器会在计算之后将乱序执行的结果进行重组，保证该
  • 程序员从初级到高级的蜕变 gcq511120594 框架工作PHPandroidhtml5
    软件开发是一个奇怪的行业，市场远远供不应求。这是一个已经存在多年的问题，而且随着时间的流逝，愈演愈烈。 我们严重缺乏能够满足需求的人才。这个行业相当年轻。大多数软件项目是失败的。几乎所有的项目都会超出预算。我们解决问题的最佳指导方针可以归结为——“用一些通用方法去解决问题，当然这些方法常常不管用，于是，唯一能做的就是不断地尝试，逐个看看是否奏效”。 现在我们把淫浸代码时间超过3年的开发人员称为
  • Reverse Linked List hcx2013 list
    Reverse a singly linked list.   /** * Definition for singly-linked list. * public class ListNode { * int val; * ListNode next; * ListNode(int x) { val = x; } * } */ p
  • Spring4.1新特性——数据库集成测试 jinnianshilongnian spring 4.1
    目录 Spring4.1新特性——综述 Spring4.1新特性——Spring核心部分及其他 Spring4.1新特性——Spring缓存框架增强 Spring4.1新特性——异步调用和事件机制的异常处理 Spring4.1新特性——数据库集成测试脚本初始化 Spring4.1新特性——Spring MVC增强 Spring4.1新特性——页面自动化测试框架Spring MVC T
  • C# Ajax上传图片同时生成微缩图(附Demo) liyonghui160com
        1.Ajax无刷新上传图片,详情请阅我的这篇文章。（jquery + c# ashx）         2.C#位图处理  System.Drawing。         3.最新demo支持IE7,IE8,Fir
  • Java list三种遍历方法性能比较 pda158 java
    从c/c++语言转向java开发，学习java语言list遍历的三种方法，顺便测试各种遍历方法的性能，测试方法为在ArrayList中插入1千万条记录，然后遍历ArrayList，发现了一个奇怪的现象，测试代码例如以下： package com.hisense.tiger.list; import java.util.ArrayList; import java.util.Iterator;
  • 300个涵盖IT各方面的免费资源（上）——商业与市场篇 shoothao seo商业与市场IT资源免费资源
    A.网站模板+logo+服务器主机+发票生成 HTML5 UP:响应式的HTML5和CSS3网站模板。 Bootswatch:免费的Bootstrap主题。 Templated:收集了845个免费的CSS和HTML5网站模板。 Wordpress.org|Wordpress.com:可免费创建你的新网站。 Strikingly:关注领域中免费无限的移动优
  • localStorage、sessionStorage uule localStorage
    W3School 例子   HTML5 提供了两种在客户端存储数据的新方法： localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储   之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不