一、前端优化的目的
★从用户角度而言,优化能够让页面加载得更快、对用户的操作响应得更及时,能够给用户提供更为友好的体验。
★从服务商角度而言,优化能够减少页面请求数、或者减小请求所占带宽,能够节省可观的资源。
二、前端优化的途径
★页面级别的优化,如: HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等 。
*减少HTTP请求数: 1、捆绑文件; 2、CSS Sprites; 3、将外部脚本置底; 4、异步执行 (inline)内部脚本---使用 script元素的defer 属性(存在兼容性问题和其他一些问题和不能使用 document.write),使用setTimeout ,此外,在HTML5中引入了 Web Workers的机制; 5、(Lazy Load)异步加载 Javascript; 6、将 CSS放在 HEAD中; 7、异步请求 Callback; 8、减少不必要的 HTTP跳转; 9、避免重复的资源请; 10、减少cookie传输; 11、减少iframe数量(注意iframe的优缺点) ▪ 优点 (1) 可以用来加载速度较慢的内容,例如广告。 (2) 安全沙箱保护。浏览器会对iframe中的内容进行安全控制。 (3) 脚本可以并行下载。 ▪ 缺点 (1) 即使iframe内容为空也消耗加载时间。 (2) 会阻止页面加载。
★服务器端优化,如:添加Expires 或Cache-Control报文头、使用CDN、Gzip压缩传输文件、配置ETags等。
★代码级别的优化,如: Javascript中的DOM 操作优化、避免全局查找、避免使用 eval和
Function、尽量减少循环次数、CSS选择符优化、图片优化以及 HTML结构优化等等。