新浏览器支持js并行加载

Ⅰ 如何对前端性能进行优化

前端开发代码优化、可维护性、浏览器兼容性是非常重要的课题。从实际的工程应用角度出发，最常遇见的前端优化问题。前端性能进行优化规则，基本可以涵盖现在前端大部分的性能优化原则了，很多更加geek和精细优化方法都是从这些原则里面延伸出来的。

前端性能进行优化都有哪些规则

1. 减少HTTP请求次数

   尽量合并图片、CSS、js。比如加载一个页面有5个css文件的话，把这个5个文件合成一个的话，就只需要发出一次http请求，节省网络请求时间，加快页面的加载。
   

2. 使用CDN

网站上静态资源即css、js全都使用cdn分发，包括图片

3. 避免空的src和href

当link标签的href属性为空、script标签的src属性为空的时候，浏览器渲染的时候会把当前页面的URL作为它们的属性值，从而把页面的内容加载进来作为它们的值。所以要避免犯这样的疏忽。

4. 为文件头指定Expires

Exipres是用来设置文件的过期时间的，一般对css、js、图片资源有效。 他可以使内容具有缓存性，这样下回再访问同样的资源时就通过浏览器缓存区读取，不需要再发出http请求。如下例子：

新浪微博的这个css文件的Expires时间是2016-5-04 09:14:14.

5. 使用gzip压缩内容

gzip能够压缩任何一个文本类型的响应，包括html，xml，json。大大缩小请求返回的数据量。

6. 把CSS放到顶部

网页上的资源加载时从上网下顺序加载的，所以css放在页面的顶部能够优先渲染页面，让用户感觉页面加载很快。

7. 把JS放到底部

加载js时会对后续的资源造成阻塞，必须得等js加载完才去加载后续的文件 ，所以就把js放在页面底部最后加载。

8. 避免使用CSS表达式

举个css表达式的例子

font-color: expression( (new Date()).getHours()%3 ? “#FFFFFF" : “#AAAAAA" );

这个表达式会持续的在页面上计算样式，影响页面的性能。并且css表达式只被IE支持。

9. 将CSS和JS放到外部文件中

目的是缓存文件，可以参考原则4。 但有时候为了减少请求，也会直接写到页面里，需根据PV和IP的比例权衡。

10. 权衡DNS查找次数

减少主机名可以节省响应时间。但同时，需要注意，减少主机会减少页面中并行下载的数量。

IE浏览器在同一时刻只能从同一域名下载两个文件。当在一个页面显示多张图片时，IE 用户的图片下载速度就会受到影响。所以新浪会搞N个二级域名来放图片。

下面是新浪微博的图片域名，我们可以看到他有多个域名，这样可以保证这些不同域名能够同时去下载图片，而不用排队。不过如果当使用的域名过多时，响应时间就会慢，因为不用响应域名时间不一致。

11. 精简CSS和JS

这里就涉及到css和js的压缩了。比如下面的新浪的一个css文件，把空格回车全部去掉，减少文件的大小。现在的压缩工具有很多，基本主流的前端构建工具都能进行css和js文件的压缩，如grunt，glup等。

12. 避免跳转

有种现象会比较坑爹，看起来没什么差别，其实多次了一次页面跳转。比如当URL本该有斜杠（/）却被忽略掉时。例如，当我们要访问http:// .com时，实际上返回的是一个包含301代码的跳转，它指向的是http:// .com/（注意末尾的斜杠）。在nginx服务器可以使用rewrite；Apache服务器中可以使用Alias 或者 mod_rewrite或者the DirectorySlash来避免。

另一种是不用域名之间的跳转， 比如访问http:// .com/bbs跳转到http:// bbs..com/。那么可以通过使用Alias或者mod_rewirte建立CNAME（保存一个域名和另外一个域名之间关系的DNS记录）来替代。

13. 删除重复的JS和CSS

重复调用脚本，除了增加额外的HTTP请求外，多次运算也会浪费时间。在IE和Firefox中不管脚本是否可缓存，它们都存在重复运算javaScript的问题。

14. 配置ETags

它用来判断浏览器缓存里的元素是否和原来服务器上的一致。比last-modified date更具有弹性，例如某个文件在1秒内修改了10次，Etag可以综合Inode(文件的索引节点(inode)数)，MTime(修改时间)和Size来精准的进行判断，避开UNIX记录MTime只能精确到秒的问题。 服务器集群使用，可取后两个参数。使用ETags减少Web应用带宽和负载

15. 可缓存的AJAX

异步请求同样的造成用户等待，所以使用ajax请求时，要主动告诉浏览器如果该请求有缓存就去请求缓存内容。如下代码片段, cache:true就是显式的要求如果当前请求有缓存的话，直接使用缓存

$.ajax({ url : 'url', dataType : "json", cache: true, success : function(son, status){ }

16. 使用GET来完成AJAX请求

当使用XMLHttpRequest时，浏览器中的POST方法是一个“两步走”的过程：首先发送文件头，然后才发送数据。因此使用GET获取数据时更加有意义。

17. 减少DOM元素数量

这是一门大学问，这里可以引申出一堆优化的细节。想要具体研究的可以看后面推荐书籍。总之大原则减少DOM数量，就会减少浏览器的解析负担。

18. 避免404

比如外链的css、js文件出现问题返回404时，会破坏浏览器的并行加载。

19. 减少Cookie的大小

Cookie里面别塞那么多东西，因为每个请求都得带着他跑。

20. 使用无cookie的域

比如CSS、js、图片等，客户端请求静态文件的时候，减少了 Cookie 的反复传输对主域名的影响。

21. 不要使用滤镜

IE独有属性AlphaImageLoader用于修正7.0以下版本中显示PNG图片的半透明效果。这个滤镜的问题在于浏览器加载图片时它会终止内容的呈现并且冻结浏览器。在每一个元素（不仅仅是图片）它都会运算一次，增加了内存开支，因此它的问题是多方面的。

完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式来代替，这种格式能在IE中很好地工作。如果你确实需要使用AlphaImageLoader，请使用下划线_filter又使之对IE7以上版本的用户无效。

22. 不要在HTML中缩放图片

比如你需要的图片尺寸是50* 50

那就不用用一张500*500的大尺寸图片，影响加载

23. 缩小favicon.ico并缓存

Ⅱ js进程和线程的区别

一、线程和进程基本概念

进程：操作系统分配的占有CPU资源的最小单位。拥有独立的地址空间。
线程：安排CPU执行的最小单位。同一个进程下的所有线程，共享进程的地址空间。

简单讲，计算机就像工厂，进程是个大车间，计算机内部有很多个这样的大车间。线程是工人，每一个车间里的工人至少有一个。

为什么这么画呢？有点一个挨一个的效果呢？是因为以前我就老是疑惑进程或者线程运行时到底是并行？还是串行？
其实，在单CPU或单核的情况下，宏观上无论是进程也好，线程也罢，都是并行的。而在微观下，某一个具体的时刻，他们实际上都是串行的。在多CPU或多核的情况下，才是真正意义的并行。

二、线程和进程的关系、通性

关系：进程中包含着至少一个线程。在进程创建之初，就会包含一个线程，这个线程会根据需要，调用系统库函数去创建其他线程。但需要注意的是，这些线程之间是没有层级关系的，他们之间协同完成工作。在整个进程完成工作之后，其中的线程会被销毁，释放资源。

通性：都包含三个状态，就绪、阻塞、运行。通俗的讲，阻塞就是资源未到位，等待资源中。就绪，就是资源到位了，但是CPU未到位，还在运行其他。

三、线程的好处

既然，线程和进程是存在通性的，那么为什么操作系统还要设置线程这个单位，那就说说线程的几点好处：
1、在一个程序中，多个线程可以同步或者互斥并行完成工作，简化了编程模型；
2、线程较进程来讲，更轻；
3、线程虽然微观并行。但是，在一个进程内部，一个线程阻塞后，会执行这个进程内部的其他线程，而不是整体阻塞。从某种意义上，提高了CPU的利用率。

四、市面上的通用叫法

单线程与多线程，都指在一个进程内的单和多。不要笑我，之前真的不懂。心中那只小羊驼，奔过来，跑过去。还抬起了傲娇的眼睛，看了我一眼，呵呵~~~

五、javaScript单线程执行机制

1、 首先解释下，单线程和多线程。
什么是单线程？单线程就是一个进程中只有一个线程。程序顺序执行，前面的执行完，才会执行后面的程序。
什么是多线程？多线程就是一个进程中只有多个线程。在进程内部进行线程间的切换，由于每个线程执行的时间片很短，所以在感觉上是并行的。

2、那么为什么感觉上javaScript是多线程？而且还支持AJAX异步呢？AJAX是真正的异步吗？
先说明，从哪里可以得出javaScript是单线程。比如你页面一上来就alert（“hello world~”）；只要你不关闭这个对话框，后续的js代码就不会再执行。因为，单线程就是这样一步一步的顺次执行，前面不执行完，后面不会执行。也就是说，在具体的某一时刻，只有一段代码在执行。
可是，JavaScript明明可以处理各种触发事件，感觉上是异步多线程啊。其实，它的原理是这样的，JavaScript单线程的执行浏览器的一个事件队列，要执行的函数和触发事件的回调函数都被放在这个队列中。比如，我点击率一下按钮，之后又将浏览器缩小了，那么这两个事件的回调函数就会顺次地被放在当前执行的“函数”之后，再一一执行。
那么，既然JavaScript是单线程，那么如何维护这个函数队列呢，他分身无术啊。这时候，就需要知道，浏览器可不是单线程。虽然，每一个window只有一个js引擎，但是浏览器是事件驱动的、异步的、多线程的。
浏览器内部有一个事件轮询（event loop），是一个大的内部消息循环，会轮询大的消息队列，并执行。也就是js要处理的事件队列，是浏览器维护的。
浏览器至少有四个线程（不同浏览器会有差异）： js引擎线程、界面渲染线程、浏览器事件触发线程、http请求线程。
其实，到这里就说的很明白了。但是，又想到了延时函数（setTimeout）的例子，感觉上，因为没有阻塞执行，会感觉是异步，其实并不是。只是，js在执行到延时函数时，会触发浏览器的定时器，到设置时间，浏览器再将这个函数放入执行的函数队列，再由JavaScript引擎执行。都是在浏览器空闲了才会执行。
关于AJAX的异步，是真正的异步。同样的道理，在调用AJAX的时候，浏览器会开辟一个新的线程，去处理这个请求，得到响应后，如果这个请求有回调，会将这个回调再放入事件队列中。再由JavaScript引擎执行。

3、关于JavaScript的阻塞
浏览器虽然是多线程，但是由于JavaScript具有阻塞特性，无论外链还是内嵌脚本，在浏览器执行解释js脚本的时候，浏览器是不会去做别的事情的，比如渲染页面，而是直到js下载并执行完毕。
这样，js脚本的下载、解释执行，会反该页面的继续绘制，给用户带来不良的体验。所以，要对其优化，有如下几点：
a、将<script>内嵌和外链，在可以的情况下，放在<body>底部。注：对于css，浏览器是并行下载
b、在页面onload后，加载js
c、html5 <script>标签的defer属性，在页面加载完成后下载
d、使用创建<script>标签的方式，在页面加载完成后添加进去。
注：解决阻塞就是一句话，先让页面渲染完，再加载js。

六、Node.js单线程执行机制

脑子就像有问题一样。js都是单线程的了，node.js就是js实现的，还能是多线程？！！呵呵哒~
Node.js其实还不是真正意义上的js,他是借用了js语法实现的，达到真正意义的非阻塞服务端语言。但是他的运行机制，也是事件轮询 （Event Loop）。

Ⅲ JS异步加载的几种方式

异步加载又叫非阻塞加载，浏览器在下载执行js的同时，还会继续进行后续页面的处理。主要有三种方式。

方法一：也叫Script DOM Element

这段代码将使JS执行5秒才完成！

JS延迟加载机制(LazyLoad)：简单来说，就是在浏览器滚动到某个位置在触发相关的函数，实现页面元素的加载或者某些动作的执行。如何实现浏览器滚动位置的检测呢？可以通过一个定时器来实现，通过比较某一时刻页面目标节点位置和浏览器滚动条高度来判断是否需要执行函数。