前端开发有哪些性能需要优化_前端开发有哪些性能优化

　　现在的互联网，是一个用户体验至上的时代，大多数公司都会把如何提高产品的易用性放在首要位置。下面由学习啦小编为大家整理的前端开发性能优化，希望大家喜欢!

　　前端开发性能优化

　　1.规定图片的宽高减少重绘

　　2.不要用表格布局，表格通常会导致页面重绘，浏览器是一行一行显示表格的，如果有一行的列宽和行高和之前的不一样那之前绘制好的行也必须重新绘制。

　　3.定义字符集，不同的字符集有不同的渲染方式。

　　4.不要重组DOM，重新排列DOM通常都会引发浏览器重绘。

　　5.合并资源减少http请求，不增加额外的带宽

　　6.使用CDN加速

　　7.避免空的src或href属性值

　　8.增加版本控制过期时间

　　9.将css放到头部，css文件加载完成后渲染页面

　　10.js放到尾部，脚本会阻止并行加载，当浏览器加载一个脚本时，他不会去加载其他文件，可以在script标签上添加defer属性，让浏览器加载脚本时也去加载其他文件，缺点有兼容性问题。脚本放在结束处可以保证脚本执行时元素肯定是可用的。

　　11.避免使用css表达式，css表达式页面滚动甚至鼠标移动的时候它就会执行。

　　12.移除不使用的css语句，因为现在很多浏览器都是通过遍历所有的css规则来匹配所有的元素

　　13.对js和css代码进行压缩，这样做可以减少加载量，节省带宽

　　前端开发性能优化问题

　　a 减少http请求次数：css spirit,data uri

　　b 用hash-table来优化查找

　　c 当需要设置的样式很多时设置className而不是直接操作style

　　d 少用全局变量

　　e 缓存DOM节点查找的结果

　　f 避免使用CSS Expression

　　g 图片预载

　　h 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，

　　i JS，CSS源码压缩

　　k 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数

　　t 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能

　　r 用setTimeout来避免页面失去响应 显示比div+css布局慢如何控制网页在网络传输过程中的数据量

　　(1)启用GZIP压缩

　　(2)保持良好的编程习惯，避免重复的CSS，JavaScript代码，多余的HTML标签和属性

　　前端开发有哪些图片优化

　　1. 简约而不简单

　　Win8和iOS7的出现，将互联网行业中很多产品设计带回到原点，或许更是另一个新的起点。Win8的Metro UI、iOS7中图标的扁平化设计、一直崇尚简约的豆瓣网、还有顶着时代工匠称号的老罗所设计的锤子ROM，无一不体现着简约的风格。

　　言归正传，回到我们图片优化的主题上。在产品设计和UI设计阶段，除了内容图片，其他的图片都是起修饰的作用。也就是对于传递信息来说并非本质性的。所以最大的优化就是不要图片。在进入到研发阶段之前，就要确认设计，设计本身是否需要用到那么多的图片，还是说可以做到更简洁!

　　2. 样式代替图片

　　Chrome，FF等浏览器厂商为互联网的发展做了这么多贡献，为什么我们还要让那些不兼容CSS3的浏览器阻碍互联网的发展呢。因此，让我们直接使用CSS样式代替图片来实现修饰效果!例如：半透明、圆角、阴影、高光、渐变等。这些效果主流的浏览器都能够完美支持，而对于那些低端浏览器，我们并不会完全抛弃他们，“渐进增强”则是一个很好的解决方案。至于什么是渐进增强，这里不再用过多篇幅去解释，如果感兴趣可以参考CSS“渐进增强”在web制作中常见应用举例。

　　3. 选择最合适的图片

　　我们常见的图片格式有JPEG、GIF、PNG。

　　基本上，内容图片多为照片之类或图片构成较复杂的情况，适用于JPEG。如网站中的Banner图、轮播图、大尺寸背景图等。

　　修饰图片通常更适合用无损压缩的PNG。而我们主要用到的PNG图片又分为PNG-8和PNG-24两种，PNG-8格式不支持半透明，也是IE6兼容的图片存储方式。如果对图片质量要求较高的半透明或全透明背景，保存成PNG-24更合适。有时候会遇到在IE6下应用PNG-24图片的情况，关于IE6下PNG Alpha透明的解决方案可以参考IE6中PNG Alpha透明。我在项目中常用的方法是AlphaImageLoader筛选器。

　　GIF基本上除了GIF动画外不要使用。

　　除了这些格式之外，Chrome、新版Opera、Android 4+支持WebP格式，IE 9+、IE mobile 10+支持JPEG XR。这两个新格式都支持无损和有损压缩，都具有更良好的压缩比。当然这需要为不同的浏览器返回不同的图片，增加了开发成本，也增加存储成本。不过你省了流量或者相同流量下改善了图片质量，提升了用户体验。这就需要根据项目需求进行取舍了。

　　4. 常用的图片优化技巧

　　CSS Sprites，将同类型的图标或按钮等背景图合到一张大图中，减少页面请求。

　　Icon Font，将图标做成字体文件。优点是图标支持多个尺寸，兼容所有浏览器，减少页面请求等。美中不足的是只支持纯色的icon。

　　SVG，对于绝大多数图案、图标等，矢量图更小，且可缩放而无需生成多套图。现在主流浏览器都支持SVG了，所以可放心使用!

　　图片压缩工具，可以在图片上线前使用压缩工具进行压缩，获得更高的压缩比。我常用的压缩工具为Yahoo的Smush.it。

　　5. 适用各种资源而不限于图片的优化

　　data url

　　Base64是网络上最常见的用于传输8Bit字节的编码方式之一，可用于在HTTP环境下传递较长的标示信息。将图片转化为base64编码格式，资源内嵌于CSS或HTML中，不必单独请求。

　　该方式的优点是：

　　1. 减少了HTTP请求

　　2. 避免了图片重新上传，还要清理缓存的问题

　　不足之处是：

　　1. IE6, IE7不支持该类型编码的图片作为背景图

　　2. 增加了CSS文件的尺寸

　　3. 维护成本较高

　　按照HTTP协议设置合理的缓存

　　具体的缓存策略(如永久缓存 + 重命名)、部署策略(如反向代理、CDN等)这里就不展开了。

　　Responsive设计

　　为了适应现在众多分辨率和设备像素比的移动设备，要产生多套不同大小和分辨率的图片，然后配合Media Query进行开发。这里推荐在进行移动端页面开发时使用SVG或Icon Font等技术。这些技术可以完美支持Retina设备。关于更多响应式方案，可以参考《响应式Web设计: HTML5和CSS3实践》这本书或网上相关资料，这里不再展开。