浅谈前端网络、JavaScript优化以及开发小技巧

一、网络优化

YSlow 有23条规则。这几十条规则最主要是在做消除或减少不必要的网络延迟，将需要传输的数据压缩至最少。

1）合并压缩CSS、JavaScript、图片，静态资源CDN缓存

通过构建工具Gulp ，可以在开发的时候就将合并压缩的事情一起做掉。

之所以要做合并压缩是因为：HTTP 1.x不允许一个连接上的多个响应数据交错到达（多路复用），因而一个响应必须完全返回后，下一个响应才会开始传输。

也就是说即使客户端同时发送了两个请求，而且CSS资源先准备就绪，服务器也会先发送HTML响应，然后再交付CSS。

使用CDN是为了让用户访问的时候能用最近的资源，减少来回传输时间。

HTTP2.0改进了HTTP1.x很多方面。

2）CSS放顶部，JavaScript放底部

CSS可以并行下载，而JavaScript加载之后会造成阻塞。

但凡事还是会有例外，如果把行内脚本放在样式表之后，会明显地延迟资源的下载（结果是样式表下载完成并且行内脚本执行完毕时，后续资源才能开始下载）。

这是因为行内脚本可能含有依赖于样式表中样式的代码，比如document.getElementsByClassName()。