前端优化方法有哪些

摘要

随着时间的推移,前端已经发展成为一个“包罗万象”的集合,内容涵盖HTML、CSS、JavaScript、Image、Flash等各种各样的资源。对于这样一个庞杂的“大家庭”,难免会产生一些问题。针对这些问题,衍生出一个在面试过程中常被提及的问题——前端优化有哪些方法?

随着时间的推移,前端已经发展成为一个“包罗万象”的集合,内容涵盖HTML、CSS、JavaScript、Image、Flash等各种各样的资源。对于这样一个庞杂的“大家庭”,难免会产生一些问题。针对这些问题,衍生出一个在面试过程中常被提及的问题——前端优化方法有哪些

在回答这个问题之前,我们首先要弄明白一个问题:前端优化的目的是什么

对于这个问题,相信给出的答案都不尽相同,笔者认为是:提高页面访问速度、改善用户体验。

前端优化的途径有很多,每个接触过前端的同学或多或少都能说出四、五条来。相比较“前端领袖”级的总结,我们总结出来的四、五条仅仅只能是一种“补充”。

相信不少前端程序员都应该听过——雅虎军规。何为“雅虎军规”,顾名思义,就是雅虎给出的优化网站的各项法则。对于雅虎军规,网上有好多不同的版本,笔者认为最正统的应该是——雅虎军规35条。

内容类(10条)

减少HTTP请求数

减少DNS查找

避免重定向

让Ajax可缓存

延迟加载组件

预加载组件

减少DOM元素的数量

跨域分离组件

少用iframe

杜绝404

服务器类(7条)

使用CDN(内容分发网络)

添上Expires或者Cache-Control HTTP头

Gzip组件

配置ETags

尽早清空缓冲区

对Ajax用GET请求

避免空的src属性

CSS类(4条)

把样式表放在顶部

避免使用CSS表达式

避免在CSS中直接使用@import

避免使用滤镜

JS类(4条)

把脚本放在底部

去除重复脚本

尽量减少DOM访问

用智能的事件处理器

JS和CSS类(2条)

压缩JavaScript和CSS

把JavaScript和CSS放到外面

Cookie类(2条)

精简Cookie

把组件放在不含cookie的域下

图片类(4条)

优化图片

优化CSS Sprite

不要用HTML缩放图片

用小的可缓存的favicon.ico

移动端类(2条)

保证所有组件都小于25K

把组件打包到一个复合文档里

shaw

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: