前端页面性能优化实践

[破茧边缘]

前端的页面主要包括xhtml,css,js。其实xhtml就是现实中所谈到的内容，页面的内容：文字，图片，flash,视频等。

对用户而言，优化可以让应用的响应速度加快，加载更加迅速，可以带来更好的使用体验。

对于服务商而言，前端优化能够减少页面请求数量，宽带所占带宽，有效的节省资源。

前端优化的内容很多，按照粒度等级划分可以大致分为两类：页面优化级别和代码级别优化。

页面优化主要针对页面加载环节，包括：HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等内容。代码优化包括：Javascript中的DOM操作优化、CSS选择符优化、图片优化以及HTML结构优化等内容。

代码级别优化则更关注数据请求，很重要的一条就是减少HTTP请求的数量。一个完整的HTTP请求需要经过路由查找，TCP握手，发送请求，服务器响应和浏览器接收等一些列过程。对于小文件，实际下载文件的时间对于整个请求的时间占比很低，因此需要将小文件合并为大文件来传输。

页面级别：提升页面加载速度。加载优化是为了解决页面内容加载速度受限于网络带宽，过于耗时的问题，主要手段有：项目打包优化。

CDN对网络的优化作用主要体现在如下几个方面：解决服务器端的“第一公里”问题；缓解甚至消除了不同运营商之间互联的瓶颈造成的影响；减轻了各省的出口带宽压力；缓解了骨干网的压力;优化了网上热点内容的分布。