1、前端优化的目的css
最近在总结一些前端优化的方法,结合以往作项目的经验以及网上的一些资料,对经常使用的优化方法进行了汇总,之后若是遇到一些新的方法也会在这里进行补充。前端
用户:页面加载更快,用户操做响应及时,更友好的体验;jquery
对服务商:减小页面请求,减少请求所占带宽,节省资源。es6
===============================================
2、优化的途径web
页面级别的优化ajax
如:减小HTTP请求数,脚本的无阻塞加载,内联脚本的位置优化等。
保持页面简洁,减小没有必要的结构。你们都据说过less is
more,可是真正作起来却并不简单,插图式主页的兴起是这句话
最好的证实。chrome
合理的设置缓存(缓存越多越久,设置过时头、last-Modifed验证)数组
文件的压缩合并。CSS精灵图压缩,js代码压缩,img图片压缩发布(YUI工具等),css,js文件的合并。缓存
懒加载图片。jquery.lazyload.js+IntersectionObserver API(chrome51+),解决高频scroll事件。服务器
将外部脚本置底
使用web workder。解决耗时操做,主线程来控制子线程的耗时操做。
目录内跳转以/结尾,减小服务器跳转
根目录下放置favicon.ico网站头像,减小请求
HTTP1.0头中,加入connection:Keep-Alive请求-应答模式,保持链接,减小重复请求
减小DNS请求,即减小不一样域名的请求。
减小重定向。
建议删除干扰页面第一屏内容加载的js
避免404请求
代码级别的优化
如:js中DOM操做优化,CSS选择符优化,图片优化,HTML结构优化等。
访问DOM集合时,尽可能转换为数组后进行遍历,能够用es6新方法Array.of()转换,或者使用Array.prototype.slice.call(items)方法来转换。
注意重排、重载的问题
eval和Function函数执行效率低
减小做用域链的查找
CSS选择符是从右向左解析,因此选择符节点尽可能少,使用less。
SEO语义化。如header,title,description等,利于搜索引擎
避免@import引入css,由于这是按顺序加载,致使阻塞
避免使用document.write
指定图像的尺寸,避免“回溯”
服务器级别优化
使用内容分发网络CDN,不一样地域位置的服务器速度更快
对于静态文件使用expires:never expire文件头
ajax请求使用get比post少一个请求
===============================================
3、更多扩展
想了解更多的信息,可参考Web前端优化最佳实践及工具集锦,里面列出了谷歌和雅虎公司列出来的一系列前端优化最佳实践,同时也列出了一些性能测试和优化工具,有兴趣的coder能够了解下。