前端优化

一、前端优化的目的

• ★从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。

• ★从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。

二、前端优化的途径

• ★页面级别的优化，如： 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结构优化等等。