Web前端性能优化-页面加载

Web前端性能优化的方式

1.减少HTTP请求

一个页面80%~90%的时间花在了下载页面中的所有组件进行的HTTP请求上。因此，改善响应时间最简单的途径就是减少HTTP请求的数量。

2.将样式表放在头部

将样式表放在头部对于实际页面加载的时间影响不大，但是这会减少页面首屏出现的时间，使页面内容逐步呈现，改善用户体验，放置“白屏”。
将样式表放在文档底部会阻止浏览器中的内容逐步出现，为了避免当样式变化时重绘页面元素，浏览器会阻塞内容逐步呈现，造成“白屏”。这源自浏览器的行为，如果样式表仍在加载，构建呈现树就是一种浪费，因为所有样式表加载解析完毕之前无需绘制任何东西。

3.将脚本放在底部

跟样式表相同，脚本放在底部对于实际页面加载的数据影响不大。
JS的下载和执行会阻塞DOM树的构建，所以script放在首屏范围内的HTML代码段里会截断首屏的内容。
下载脚本时并下载是禁用的——即使使用了不同的主机名，也不会启用其他的下载。因为脚本可能修改页面内容，因此浏览器会等待；另外也是为了保证脚本能够按照正确的顺序执行，因为后面的脚本可能与前面的脚本存在依赖关系，不按照顺序执行可能会产生错误。

4.使用外部的JavaScript和CSS

内联脚本或者样式可以减少HTTP请求，按理说可以提高页面加载的速度。然而在实际情况中，当脚本或者样式是从外部引入的文件，浏览器就有可能缓存他们，从而在以后加载的时候能够直接使用缓存，而HTML文档的大小减小，从而提高加载速度。
影响原因：
用户产生的浏览量越少，内联脚本和样式的论据越强势。
如果你的网站不同的页面之间使用的组件大致相同，那么使用外部文件可以提高这些组件的重用率。

5.对文件进行压缩

在服务器端对文件进行压缩，在浏览器端对文件解压，可以有效减少通信传输的数据量。
外部脚本和样式进行合并，多个合为一个，文本文件的压缩率可达80%以上。
但是服务器资源不足的情况下要权衡考虑。

6.合并CSS图片

使用CSS Sprites，减少请求数。

7.JS代码的优化

慎用with：在with代码块中访问非局部变量都是先从obj上开始查找，如果没有再一次按作用域链向上查找，使用with相当于增加了作用域链长度。查找需要消耗时间，过长的作用域链会导致性能下降。
避免使用eval和Function：每次使用，需要将源代码转换成可执行的代码，很消耗资源。使用该函数也不利于JavaScript压缩工具执行压缩。
减少作用域链查找：应该减少闭包的使用。
数据访问：对对象属性和任何数组成员的访问次数减少，尽可能减少对对象以及数组深度查找。
字符串拼接：在JavaScript使用“+”来拼接效率比较低，使用join函数更为高效（当拼接的字符串比较多的时候考虑使用此方法）。