关于前端代码性能优化问题

以下观点纯属个人看法:

  对于一个刚接触前端不久的人来说,前端的代码质量是很重要的一部分,毕竟关系到性能问题。个人认为关于代码性能优化主要由这几方面:HTML、CSS、Javascript和HTTP,所以对这四个方面的优化能提高浏览器的性能。个人知识面有限,只有学到以下的知识,另外的还没涉及,不足之处还请体谅。

  一、 HTML

    1、首先是对HTML5的充分熟悉和理解,理解标签的语义化,减少对标签的重定义。

    2、命名的规范化,对id、class、name的规范命名有助于整体代码的构建,方便他人的理解和阅读。

  二、CSS

    1、CSS代码的简写。熟悉和了解CSS的朋友都知道,CSS样式表有很多缩写方式。比如,定义字体、定义背景等,都可以把CSS代码缩写,从而减少代码量,提高效率。

简写:
.a{font:normal small-caps bold 14px/1.5em ‘宋体‘,arial,verdana;}
等价于:.a{
font-style:normal;
font-variant:small-caps;
font-weight:bold;
font-size:14px;
line-height:1.5em;
font-family:‘宋体‘,arial,verdana;}

    2、同属性提出。将相同属性的CSS格式放在一格公共的样式中,能减少很多代码的书写。相信大家都不陌生。就不多做说明了。

    3、尽量将样式写在单独的css文件里面,在head元素中通过link方式引用,有时候为了图方便或者快速搞定功能,我们可能会直接将样式写在页面的style标签或者直接内联在元素上,这样虽然简单方便,但是非常不利于日后的维护。将代码写成单独的css文件有几点好处:

    (1)内容和样式分离,易于管理和维护

    (2)减少页面体积

    (3)css文件可以被缓存、重用,维护成本降低

    4、不使用@import。这条手段已经是众所周知,这里简单提一下,@import影响css文件的加载速度

    5、避免使用复杂的选择器,层级越少越好。简洁的选择器不仅可以减少css文件大小,提高页面的加载性能,浏览器解析时也会更加高效,也会提高开发人员的开发效率,降低了维护成本。

    6、利用CSS继承减少代码量。我们知道有一部分CSS代码是可以继承的,如果父元素已经设置了该样式,子元素就不需要去设置该样式,这个也是提高性能的行之有效的方法。常见的可以继承的属性比如:color,font-size,font-family等等;不可继承的比如:position,display,float等。

    7、结构和样式分离。我们平时一定遇到过这种情况,比如一个页面存在着多个不同功能的按钮,这些按钮的形状大小都差不多,但是根据不同的功能会有不同的颜色或背景来加以区分。如果不进行结构和样式分离,我们的CSS代码可能是这样的

  .btn-primary{

  width:100px;

  height:50px;

  padding:5px 3px;

  background:#ccc;

  color:#000;

  }

  .btn-delete{

  width:100px;

  height:50px;

  padding:5px 3px;

  background:red;

  color:#fff;

  }

  这两个或者可能更多的按钮拥有一些不同的样式,但是它们同时拥有相同的大小样式等,我们将其抽象的部分提取出来,结果如下:

  .btn{

  width:100px;

  height:50px;

  padding:5px 3px;

  }

  .primary{

  background:red;

  color:#fff;

  }

  .delete{

  background:red;

  color:#fff;

  }

  这样提取公用的样式出来,然后按钮同时引用btn和primary等。这种做法除了减少重复的代码精简CSS之外,还有一个好处是复用性,如果需要增加其他额外的按钮,只需要编写不同的样式,和btn配合使用即可。

    8、容器和内容分离

  我们平时写代码一定写过这样代码

  .content h3{

  font-size:20px;

  color:#333;

  }

  这样的代码就是内容依赖于容器,没有分离的代码,也就是说h3的样式依赖于.content容器,如果其他地方要用到相同的样式,但是它的容器却不是.content,那你可能就是要再写一遍.something h3。

  所以OOCSS推荐分离容器和内容,可以修改成:

  .title{

  font-size:20px;

  color:#333;

  }

  关于这一点,我个人建议要分情况来看,像前面这个例子,它适合样式和容器分离。但是比如下面这种情况:

  .menu li{

  font-size:12px;

  }

  这种ul,li列表的样式,我觉的就按照我们原先的做法就可以,不一定非得给一个类给li来设定样式,即

  .menu-item{

  font-size:12px;

  }

  这样页面的li标签需要引用menu-item类。

  三 、Javascript

    1、减少全局变量。因为访问局部变量的速度要比访问全局变量的速度更快些。

    2、减少DOM访问。访问DOM的次数越多,代码运行速度越慢。因此,在有其他方案可以代替的时候,我们要尽量减少访问DOM的次数。

    3、将Javascript脚本引用放在最后加载(可异步的异步)。这样可以让网页渲染所需要的内容尽快加载显示给用户。

    4、使用外部Javascirpt和CSS文件。可以使这些文件被浏览器缓存,从而在不同的请求内容之间重用。使用外部Javascript和CSS文件的决定因素在于这些外部文件的重用率,如果用户在浏览我们的页面时会访问多次相同页面或者可以重用脚本的不同页面,那么外部文件形式可以为你带来很大的好处。但对于用户通常只会访问一次的页面,例如microsoft.com首页,那inline的javascript和css相对来说可以提供更高的效率。

    5、精简Javascript代码。将Javascript或CSS中的空格和注释全去掉,减小体积。

    6、去除重复脚本。重复的脚本不仅浪费浏览器的下载时间,而且浪费解析和执行时间。一般用来避免引入重复脚本的做法是使用统一的脚本管理模块,这样不仅可以避免重复脚本引入,还可以兼顾脚本依赖管理和版本管理。

  四、 HTTP

    1、减少HTTP请求。80%的响应时间花在下载网页内容(images, stylesheets, javascripts, scripts, flash等)。减少请求次数是缩短响应时间的关键!可以通过简化页面设计来减少请求次数,可以采用以下技巧:(1)采用精灵图 (2)将多个JS、CSS文件打包成一个文件 (3)采用地图图片

    2、减少DNS查询次数。DNS查询也消耗响应时间,如果我们的网页内容来自各个不同的domain (比如嵌入了开放广告,引用了外部图片或脚本),那么客户端首次解析这些domain也需要消耗一定的时间。DNS查询结果缓存在本地系统和浏览器中一段时间,所以DNS查询一般是对首次访问响应速度有所影响。

    3、缓存AJAX。jax可以帮助我们异步的下载网页内容,但是有些网页内容即使是异步的,用户还是在等待它的返回结果。PS:个人认为能使用GET方式就不同POST方式

    4、CDN的使用。使用CDN有两点好处,第一,一般来说,访问速度有保障,稳定性也有保障;第二,你可以省下资源服务器的一部分资源负担,节省空间节省流量,艰苦创业,能省则省啊。

    

时间: 2024-10-13 12:45:09

关于前端代码性能优化问题的相关文章

前端代码性能优化

1.display:none;优于visibility:hidden;前者隐藏不占用物理空间,后者会占用.2.合并margin,padding,border的-top,-left,-right,-bottom的设置,简短简洁.3.选择器在满足效果的基础上,尽量简单,减少嵌套,查询的消耗.4.如若值为0,则去掉单位,如border-right:0px;可以写为border-right:0;5.没有边框,用border:none;优于border;0;6.在保持代码解耦的前提下,尽量合并重复的代码.

前端代码性能优化工具

转自:http://segmentfault.com/a/1190000002585760 Google Closure Compiler 官网:https://developers.google.com/closure/compiler/ Closure Compiler的使用方法有如下3种: 在命令行下使用一个google编译好的java程序 使用google提供的在线服务 使用google提供的RESTful API 首先需要下载compiler-latest.zip,由于可能有的用户没法

C++ 代码性能优化 -- 循环分割提高并行性

对于一个可结合和可交换的合并操作来说,比如整数的加法或乘法, 我们可以通过将一组合并操作分割成 2 个或更多的部分,并在最后合并结果来提高性能. 原理: 普通代码只能利用 CPU 的一个寄存器,分割后可以利用多个寄存器. 当分割达到一个数量时,寄存器用完,性能不再提升,甚至会开始下降. 用代码来描述,如下: // 一般情况下的代码 for (i = 1; i < n+1; i++) { res = res OPER i; } // 循环分割后代码 for (i = 1; i < n; i+=2

Java代码性能优化技巧

流方面: private FileOutputStream writer; writer = new FileOoutputStream(fileName); 使用BufferedOutputStream 对写入FileOutputStream的数据进行缓存 //将writer的类型由FileOutputStream 变更为BufferedOutputStream //private FileOutputStream writer; private BufferedOutputStream wr

Java 代码性能优化总结

35 个 Java 代码性能优化总结 前言 代码优化,一个很重要的课题.可能有些人觉得没用,一些细小的地方有什么好修改的,改与不改对于代码的运行效率有什么影响呢?这个问题我是这么考虑的,就像大海里面的鲸鱼一样,它吃一条小虾米有用吗?没用,但是,吃的小虾米一多之后,鲸鱼就被喂饱了.代码优化也是一样,如果项目着眼于尽快无BUG上线,那么此时可以抓大放小,代码的细节可以不精打细磨:但是如果有足够的时间开发.维护代码,这时候就必须考虑每个可以优化的细节了,一个一个细小的优化点累积起来,对于代码的运行效率

Python 代码性能优化技巧(转)

原文:Python 代码性能优化技巧 Python 代码优化常见技巧 代码优化能够让程序运行更快,它是在不改变程序运行结果的情况下使得程序的运行效率更高,根据 80/20 原则,实现程序的重构.优化.扩展以及文档相关的事情通常需要消耗 80% 的工作量.优化通常包含两方面的内容:减小代码的体积,提高代码的运行效率. 改进算法,选择合适的数据结构 一个良好的算法能够对性能起到关键作用,因此性能改进的首要点是对算法的改进.在算法的时间复杂度排序上依次是: O(1) -> O(lg n) -> O(

Android代码性能优化技巧 (一)

转载自 http://blog.csdn.net/leilu2008/article/details/6672979 我们大家都知道Android 2.2的JIT性能有了本质的提高,不过对于老版本的程序提高Java执行效率还有很多语言特点来说,对于Java 1.5之后将会有明显的改进.下面的例子来自SDK: [java] view plaincopy static class Foo { int mSplat; } Foo[] mArray = ... //上面的静态类Foo的执行效果和性能,我

web项目代码性能优化

这是我第一次使用博客园,以后它将陪伴我IT工作生活的一部分,以后每次有工作体会和成长我都会用它记录下来. 今天的第一篇文章是我测试的好朋友发给我的<淘宝前台系统性能分析与优化>,看完后,我结合自己开发经历整理了几个简单的编码习惯的改变,这样有助于你程序和系统系能的有限提升. 只有从小事做起,例如从注重以下几个编码习惯,虽然只能有限的提升性能,但从细节入手之后才能有更大的提升,最后才可能达到从架构和服务器方面的优化来提高系能. 以下优化措施都是非必须的,根据具体情况采取相应优化措施即可. 一.服

web前端之性能优化

作为一个前端工作人员,而且只会写点HTML5和CSS3的“假”前端工程师,为了能更好地理解一下前端的花花世界,最近拜读了<高性能网站建设指南>一书,对作者提出的前端性能优化的14个规则获益匪浅,为了让自己印象更深刻点,决定作此文,当做学习笔记也好,知识总结也罢,总归看过的东西要让自己很好地掌握很好地运用起来才是王道.在解读这些规则的同时,我会用我一年半多的移动网站开发经历提出一些针对移动网站的优化建议. 首先我们从三个大类讲起:一,网络服务器.二,浏览器,三代码上面,针对这三个大类总结出了下面