马海祥博客是一个专注于分享SEO优化、网站制作、网络营销和运营思维的自媒体博客!
马海祥博客 > SEO优化 > 站内SEO > 网站前端性能优化中最容易被忽略的10个技巧

网站前端性能优化中最容易被忽略的10个技巧

时间:2016-01-28   文章来源:马海祥博客   访问次数:

Web性能涉及的范围太广,但一般web开发者在程序上线以后很多都曾遇到过性能的问题,普遍表现为页面速度开始急剧变慢,正常访问时间变的很长,或则干脆给你抛出异常错误页面。

网站前端性能优化中最容易被忽略的10个技巧-马海祥博客

关于前端页面性能的一些简单的看法,当然web标准中提到的结构,表现,行为,我们工作说的xhtml、css、js其实他们还有很多东西,需要我们去学习,比如结构语义化就是一个深入研究的课题,性能优化也是如此,不过只有我们不断的去挖崛,我们才可能进步。

1、请减少HTTP请求

基本原理:在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出。

一个正常HTTP请求的流程简述:如在浏览器中输入"www.mahaixiang.cn"并按下回车,浏览器再与这个URL指向的服务器建立连接,然后浏览器才能向服务器发送请求信息,服务器在接受到请求的信息后再返回相应的信息,浏览器接收到来自服务器的应答信息后,对这些数据解释执行。

而当我们请求的网页文件中有很多图片、CSS、JS甚至音乐等信息时,将会频繁的与服务器建立连接,与释放连接,这必定会造成资源的浪费,且每个HTTP请求都会对服务器和浏览器产生性能负担。

网速相同的条件下,下载一个100KB的图片比下载两个50KB的图片要快,所以,请减少HTTP请求。

解决办法:合并图片(css sprites),合并CSS和JS文件;图片较多的页面也可以使用lazyLoad等技术进行优化(具体可查看马海祥博客《如何利用极客精神优化网站的网络组件和代码》的相关介绍)。

2、请正确理解Repaint和Reflow

基本原理:Repaint(重绘)就是在一个元素的外观被改变,但没有改变布局(宽高)的情况下发生,如改变visibility、outline、背景色等等。

Reflow(重排)就是DOM的变化影响到了元素的几何属性(宽和高),浏览器会重新计算元素的几何属性,会使渲染树中受到影响的部分失效,浏览器会验证DOM树上的所有其它结点的visibility属性,这也是Reflow低效的原因。

如:改变窗囗大小、改变文字大小、内容的改变、浏览器窗口变化,style属性的改变等等。如果Reflow的过于频繁,CPU使用率就会噌噌的往上涨,所以前端也就有必要知道Repaint和Reflow的知识。

减少性能影响的办法:上面提到通过设置style属性改变结点样式的话,每设置一次都会导致一次reflow,所以最好通过设置class的方式;有动画效果的元素,它的position属性应当设为fixed或absolute,这样不会影响其它元素的布局;如果功能需求上不能设置position为fixed或absolute,那么就权衡速度的平滑性。

总之,因为Reflow有时确实不可避免,所以只能尽可能限制Reflow的影响范围。

3、请减少对DOM的操作

基本原理:对DOM操作的代价是高昂的,这在网页应用中的通常是一个性能瓶颈。

在《高性能JavaScript》中这么比喻:“把DOM看成一个岛屿,把JavaScript(ECMAScript)看成另一个岛屿,两者之间以一座收费桥连接”,所以每次访问DOM都会教一个过桥费,而访问的次数越多,交的费用也就越多,所以一般建议尽量减少过桥次数。

解决办法:修改和访问DOM元素会造成页面的Repaint和Reflow,循环对DOM操作更是罪恶的行为,所以请合理的使用JavaScript变量储存内容,考虑大量DOM元素中循环的性能开销,在循环结束时一次性写入。

减少对DOM元素的查询和修改,查询时可将其赋值给局部变量。

注:在IE中,hover会降低响应速度。

4、使用JSON格式来进行数据交换

基本原理:JSON是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式,同时,JSON是JavaScript原生格式,这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。

与XML序列化相比,JSON序列化后产生的数据一般要比XML序列化后数据体积小,所以在Facebook等知名网站中都采用了JSON作为数据交换方式。

JS操作JSON:在JSON中,有两种结构:对象和数组。

(1)、一个对象以 " { " 开始," } " 结束。每个"名称"后跟一个 " :" ;"名称/值 对"之间使用 " ,"(逗号)分隔,名称用引号括起来;值如果是字符串则必须用引号括起来,数值型则不需要,如:var obj={"name":"darren","age":24,"location":"beijing"}

(2)、数组是值(value)的有序集合。一个数组以 " 〔 " 开始, " 〕 " 结束。值之间使用 " , " (逗号)分隔,如:var  jsonlist=〔{"name":"darren","age":24,"location":"beijing"},{"name":"weidong.nie","age":24,"location":"hunan"}〕;

对这种数组和对象字面量的操作是非常方便且高效的,如果预先知道JSON结构的情况下,使用JSON进行数据传递简直是太美妙了,可以写出很实用美观可读性强的代码,如果你是纯粹的前台开发人员,一定会非常喜欢JSON。

5、高效使用HTML标签和CSS样式

基本原理:HTML是一门用来描述网页的一种语言,它使用标记标签来描述网页,作为一名合格的前端开发,你有必要去知道其常用标签代表的含义(SEO)和属性(表现形式)。

CSS指层叠样式表(Cascading Style Sheets),如果说把页面想象成一个人,HTML就是人的骨架,CSS就是人的衣装,一个人的品味从他的衣装就能一目了然。

一名专业的前端开发也是一名优秀的重构,因为在页面中经常会有各种不合理的嵌套和重复定义的CSS样式,我不是要你重构页面,只是希望你在碰到这种情况的时候解决这些问题,如这样的HTML:

 <table><tr><td>
   <table><tr><td>
     ...
   </td></tr></table>
    </td></tr></table>

或者这样的CSS:

body .box .border ul li p strong span{color:#000}

以上都是对HTML和CSS非常糟糕的使用方法。

正确理解:HTML是一门标记语言,使用合理的HTML标签前你必须了解其属性,比如Flow Elements,Metadata Elements ,Phrasing Elements,比较基础的就是得知道块级元素和内联元素、盒模型、SEO方面的知识。

CSS是用来渲染页面的,也是存在渲染效率的问题,CSS选择符是从右向左进行匹配的,这里对CSS选择符按照开销从小到大的顺序梳理一下:

ID选择符 #box

类选择符 .box

标签 div

伪类和伪元素 a:hover

当页面被触发引起回流(reflow)的时候,低效的选择符依然会引发更高的开销,所以请避免低效。

6、使用CDN加速(内容分发网络)

基本原理:CDN的全称是Content Delivery Network,即内容分发网络。

其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快、更稳定,通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络,CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。

上面几句话有多少能安安心心看完的,所以我还是通过说故事再来介绍一遍吧,顺便补一句,故事出处不明:

古代打仗大家一定都知道,由于古代的交通很不发达,所以当外族进攻的时候往往不能及时的反击,等朝廷征完兵再把兵派往边境的时候那些侵略者却是早已不见了踪影,这个让古代的帝王很是郁闷,后来帝王们学聪明了,都将大量的兵员提前派往边境驻扎,让他们平时屯田,战时当兵,这样的策略起到了很显著的作用。

不足之处:实时性不太好是CDN的致命缺陷,随着对CDN需求的逐渐升温,这一缺陷将得到改进,使来自于远程服务器的网络内容网页与复本服务器或缓存器中的网页保持同步,解决方法是在网络内容发生变化时将新的网络内容从服务器端直接传送到缓存器,或者当对网络内容的访问增加时将数据源服务器的网络内容尽可能实时地复制到缓存服务器。

7、将CSS和JS放到外部文件中引用,CSS放头,JS放尾

基本原理:引入外部文件好处是显而易见的,而且是项目稍稍复杂一点的时候就有必要了这样做了。

易维护、易扩展,方便管理和重复利用。

注:这个是很基础且必须遵循的知识点,可是为了文章的完整性勉为其难加进来吧,嘿嘿!

正确的方式:JavaScript是浏览器中的霸主,为什么这么说,因为在浏览器在执行JavaScript代码时,不能同时做其它事情,即script每次出现都会让页面等待脚本的解析和执行(不论JavaScript是内嵌的还是外链的),JavaScript代码执行完成后,才继续渲染页面,这个也就是JavaScript的阻塞特性(具体可查看马海祥博客《推荐一种测试javascript执行性能和性能比较的方法》的相关介绍)。

因为这个阻塞的特点,马海祥建议把JavaScript代码放到“/body”标签以前,这样既能有效的防止JavaScript的阻塞,又能使得页面的HTML结构能更快的释放。

HTML规范清楚指出CSS要放包含在页面的“head”区域内,这里就不多解释了。

8、精简CSS和JS文件

基本原理:有一条非常重要的准则一直没有提到,就是CSS和JavaScript的压缩,直接减少下载的文件体积,我个人经常使用的方式是使用 YUI Compressor,它的特点是:移除注释;移除额外的空格;细微优化;标识符替换。

YUI Compressor是java程序,如果你对java很熟悉的话可快速的上手使用yuicompressor.jar;如果你对java很陌生也没关系,一样可以使用YUI Compressor,下面介绍其使用方式。

YUI Compressor的配置和使用:

先配置使用环境:

(1)、先确保电脑中是否安装了JDK

(2)、再配置必要的环境变量(细节不能三两句说清,所以不知道如何设置还是搜索吧)

(3)、在cmd界面,输入javac可测试是否安装成功

使用方法可从cmd到进入yuicompressor.jar所在磁盘,我以自己的yuicompressor-2.4.2.jar为例:

网站前端性能优化中最容易被忽略的10个技巧-马海祥博客

①、压缩JS

java -jar yuicompressor-2.4.2.jar api.js > api.min.js

②、压缩CSS

java -jar yuicompressor-2.4.2.jar style.css > style.min.css

当然,还有另一种更傻瓜式的使用方式,赶兴趣的朋友自己可去多尝试下。

9、压缩图片和使用图片Spirit技术

基本原理:压缩文件的基本原理是查找文件内的重复字节,并建立一个相同字节的“词典”文件,并用一个代码表示,比如在文件里有几处有一个相同的词“马海祥博客”用一个代码表示并写入“词典”文件,这样就可以达到缩小文件的目的。

注:其实压缩图片和图片精灵是两个方面的技术,可是既然都是关于图片的优化还是放到一块吧。

现在由于工作的细分,专业的前端工程师已经少有机会去切图了,可是关于图片压缩还是得略微了解,一般图片压缩的方式有:

(1)、缩小图片分辨率;

(2)、改变图片格式;

(3)、降低图片保存质量。

关于图片精灵(Spirit)技术就和我们工作直接相关,不管是在CSS中的图片还是在HTML结构中的图片都会产生HTTP请求,前端优化的第一 条就是减少请求数,最直接有效的方法是使用图片精灵(CSS Spirit),图片精灵就是把许多图片放到一张大图片里面,通过CSS来显示图片的一部分。

10、注意控制Cookie大小和污染

基本原理和使用方法:Cookies是web站点放置到你的硬盘上的程序,它们驻留在你的计算机上收集关于你在因特网上所做的一切事情的信息,并且web站点可以在任何时候读取到Cookies收集到的所有信息。一个Cookies是web服务器存放在用户硬盘的一段文本,Cookies允许一个wen站点在用户的机器存放一些文本的信息,并可以在以后重新获取它,这个基于文本的信息存储着一些“键-值”对。

有关Cookie的基础和高级知识可以去看我在马海祥博客上写过的一篇文章《基于Cookie信息的互联网精准广告定向技术研究》。

因为Cookie是本地的磁盘文件,每次浏览器都会去读取相应的Cookie,所以,马海祥建议去除不必要的Coockie,使Coockie体积尽量小以减少对用户响应的影响。

使用Cookie跨域操作时注意在适应级别的域名上设置coockie以便使子域名不受其影响。

Cookie是有生命周期的,所以请注意设置合理的过期时间,合理地Expire时间和不要过早去清除coockie,都会改善用户的响应时间。

马海祥博客点评:

这次总结给我带来的启发并不在于提升系统性能性能本身,提升性能只是一个很表面上的东西,网上的方法有很多,测试的方法也有很多,照着都做一遍,性能确实会有所提升,但是这种知其然而不知其所以然的性能提升是没有意义的,这便是本文的目的所在。

本文发布于马海祥博客文章,如想转载,请注明原文网址摘自于http://www.mahaixiang.cn/znseo/1426.html,注明出处;否则,禁止转载;谢谢配合!

相关标签搜索: 网站优化   网站前端  

上一篇:新手站长该如何做网站结构优化
下一篇:如何利用页面点击图做网站页面优化

您可能还会对以下这些文章感兴趣!

  • 如何以SEO的角度来优化网站的URL连接地址

    大部分网站的URL命名规则是“根域名+栏目+文章页面”,也有一部分网站的URL命名规则是“根域名+文章页面”,其中能够产生变数的多半在于文章页面的命名规则上,有很多的朋友可能会注意到自己的命名规则是不太合理的,那么什么样的URL命名规则比较利于搜索引擎抓取呢?……【查看全文

    阅读:6151关键词: seo   seo优化   网站优化   网站地址   日期:2015-01-07
  • 大量重复URL被百度索引收录的解决方法

    最近,很多SEO有这样的疑惑:索引量工具显示索引量数值很高,但流量总也上不去,也没有发现我们站内有低质内容,对此,马海祥找到了导致索引量高流量低的一个原因,并给出的解决方法,URL参数也叫URL query,是一个最复杂,最容易被忽视,最容易被妥协的问题,他是网站运营中……【查看全文

    阅读:1853关键词: 百度索引   百度收录   日期:2015-07-05
  • 采集文章内容对网站有哪些坏处

    网站搭建以后,我们就要丰富网站的内容,提高网站的吸引力,网站内容文章完全写原创文章也是不现实的,浪费精力不说,主要是短时间内无法完成。我们都想在最短的时间内让网站带来流量,创造利益,于是乎,我们便想到了文章采集。如今的搜索引擎,我们都知道“内容为王”……【查看全文

    阅读:73关键词: 采集   文章内容   网站   日期:2018-07-31
  • 未来的站内SEO优化需要做些什么?

    SEO说难不难,说简单也不是那么简单,很多人问我,站内SEO优化该怎么做?但当我讲出来的时候,他们又觉得:就这些?不可能就这么点内容吧!其实现在的站内SEO真的没有多少内容,更多的是细节处理和用户体验度的把握,有些朋友认为站内优化很难,因为他们没有摸清里面的……【查看全文

    阅读:870关键词: seo   站内seo   seo优化   日期:2016-07-10
  • 网站内的老文章如何才能让百度重新收录?

    关于新网站内容不能及时被百度收录的问题,可以说是一种比较常见的现像,但已经具备了一定权重的老网站,如果所发布的文章,不能被百度收录,则很有可能是网站有问题,或者文章内容有问题了。如果大家想一下,有一些具备高权重的站点,很少发布原创文章,但收录和排名一……【查看全文

    阅读:1987关键词: 网站文章   百度收录   日期:2017-03-16
  • 站内SEO优化到底要做哪些工作?

    有很多站长一直说在SEO,结果到头来还是不知道站内优化主要是做哪些工作?如果你要问站内优化有 哪些?简单的说,站内优化要主要的地方有:三个标签(title、keyword、discretion)、三个导航(主导航、次导航、位置导航就是面包屑导航)、url(标准化,静态化,绝对地……【查看全文

    阅读:2518关键词: 站内seo   seo优化   站内优化   seo工作   seo   日期:2016-08-13
  • 怎样迅速提升网站着陆页的转化率?

    对于网站的“着陆页”,大多数做网络推广的人应该并不陌生,特别是对于一些做付费推广的网站,着陆页的转化率将直接决定推广的效果和网站的销售额,激烈的竞争使得企业获得潜在客户的成本也在不断增加,通过大量营销投入而吸引来的潜在客户如果在着陆页面不能留住并转化……【查看全文

    阅读:1382关键词: 着陆页   转化率   日期:2017-01-06
  • 网站如何通过内容中心页将主题集群获得更多的流量

    大多数内容中心的页面看起来跟普通页面没有什么差别,但其实暗藏玄机。本文将跟“内容中心页面”在SEO中所起的作用,以及教大家如何创建一个优质的的内容中心页,更好为网站引流。要注意的是,内容中心页并不适合所有情景,如果你的站点是关于一个广泛的主题(如体育),那么就有足够的子主题来创建多个内容中心页。而对于局限性很大主题内容内容则最好不要采用这种方式。内容中心页的作用不仅使内容组织更简洁和高效,对SEO也有很大的好处……【查看全文

    阅读:22关键词: 网站流量   主题集群   日期:2020-04-06
  • 解读网站内容更新的7种内容策略

    什么是内容,内容就是在你的网站上有用户想要的信息,它不仅仅只是文字,甚至有能够只是一个小图片也可以。就好比对于一个视频网站来说,视频就是内容;对于购物网站来说,商品就是内容;对于设计网站来说,风格设计就是内容等。内容它不一定就是同等于文字。只不过从我们SEO……【查看全文

    阅读:2732关键词: 网站内容   内容更新   内容策略   网站更新   日期:2014-04-28
  • 怎样才能让刚发布的文章都被百度秒收?

    我们做站长的都希望自己写的文章,能被百度快速收录,最好是秒收录。然而有一个很残酷的现实是,新站和低权重的站点是很难实现的,即使是原创的文章也会经常是几星期几个月才放出来。当然了,也并不是我们新站就毫无机会,关键还是得掌握些技巧。大家都知道蜘蛛喜欢新鲜……【查看全文

    阅读:1483关键词: 文章   百度   日期:2017-12-21
↓ 点击查看更多 ↓

互联网更多>>

  • 移动互联网是什么意思? 移动互联网是什么意思? 移动互联网就是将移动通信和互联网二者结合起来成为一体,是指互联网的技术、平台、商业模式和应用与移动通信……
  • 计算机的开机启动原理 计算机的开机启动原理 计算机从打开电源到开始操作,整个启动可以说是一个非常复杂的过程。总体来说,计算机的整个启动过程分成四个……
  • 互联网思维究竟是一种什么样的思维? 互联网思维究竟是一种什么样的思维? 但凡做企业的,不管是创业的还是在互联网冲击下转型升级的传统行业企业家,“互联网思维”已经成为了大家共同……

SEO优化 更多>>

医疗行业开展品牌推广急需解决的10大问题 如何以一个用户的角度来做企业门户网站