精华内容
参与话题
问答
  • 前端的一些优化方法

    千次阅读 2019-06-21 23:54:12
    性能优化: 1.减少HTTP请求次数:CSS Sprites,js、CSS源码压缩、图片大小控制合适;网页Gzip、CDN托管、data缓存、图片服务器 2.前端模板JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,...

    性能优化:

    1.减少HTTP请求次数:CSS Sprites,js、CSS源码压缩、图片大小控制合适;网页Gzip、CDN托管、data缓存、图片服务器

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

    3.用innerHTML替代DOM操作,减少DOM操作次数,优化JavaScript性能。

    4.当需要设置的样式很多时,设置className而不是直接操作Style

    5.少用全局变量、缓存DOM节点查找的结果。减少IO读取

    6.避免使用CSS Expression(css表达式)又称Dynamic properties(动态属性)

    7.图片预加载,将样式表放在顶部,将脚本放在底部,加上时间戳。

    8.防止内存泄漏:内存泄漏指任何对象在不再拥有或需要它之后仍然继续存在。垃圾回收器定期扫描对象,并计算引用了每个对象的其他的数量。如果一个对象的引用数量为0(没有其他对象引用过该对象),或对该对象的唯一引用是循环的,那么该对象的内存即可回收。

    会泄漏内存的情况:

    1.闭包

    2. SetTimeOut的第一个参数使用字符串而非函数的话,会引发内存泄漏

    3.控制台日志

    4. 循环(在两个对象彼此引用且彼此保留时,就会产生一个循环)

     

    展开全文
  • web前端性能优化总结

    万次阅读 多人点赞 2016-05-21 22:26:33
     网站的划分一般为二:前端和后台。我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等。而前端呢?其实应该是属于功能的表现。并且影响用户访问体验的绝大部分来自前端...

    转自:http://www.2cto.com/kf/201604/498725.html

             网站的划分一般为二:前端和后台。我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等。而前端呢?其实应该是属于功能的表现。并且影响用户访问体验的绝大部分来自前端页面。

            而我们建设网站的目的是什么呢?不就是为了让目标人群来访问吗?所以我们可以理解成前端才是真正和用户接触的。除了后台需要在性能上做优化外,其实前端的页面更需要在性能优化上下功夫,只有这样才能给我们的用户带来更好的用户体验。就好像,好多人问,男人在找女朋友的时候是不是只看外表,一些智慧的男人给出了这样的回答:脸蛋和身材决定了我是否想去了解她的思想,思想决定了我是否会一票否决她的脸蛋和身材。同理,网站也是这样,网站前端的用户体验决定了用户是否想要去使用网站的功能,而网站的功能决定了用户是否会一票否决前端体验

            不仅仅如此,如果前端优化得好,他不仅可以为企业节约成本,他还能给用户带来更多的用户,因为增强的用户体验。说了这么多,那么我们应该如何对我们前端的页面进行性能优化呢?

            一般说来,web前端指网站业务逻辑之前的部分,包括浏览器加载、网站视图模型、图片服务、CDN服务等,主要优化手段有浏览器访问、使用反向代理才、CDN等。

    浏览器访问优化

    浏览器请求处理流程如下图:


    1、减少http请求,合理设置 HTTP缓存

            http协议是无状态的应用层协议,意味着每次http请求都需要建立通信链路、进行数据传输,而在服务器端,每个http都需要启动独立的线程去处理。这些通信和服务的开销都很昂贵,减少http请求的数目可有效提高访问性能。

            减少http的主要手段是合并CSS、合并javascript、合并图片。将浏览器一次访问需要的javascript和CSS合并成一个文件,这样浏览器就只需要一次请求。图片也可以合并,多张图片合并成一张,如果每张图片都有不同的超链接,可通过CSS偏移响应鼠标点击操作,构造不同的URL。
             缓存的力量是强大的,恰当的缓存设置可以大大的减少 HTTP请求。假设某网站首页,当浏览器没有缓存的时候访问一共会发出 78个请求,共 600多 K数据,而当第二次访问即浏览器已缓存之后访问则仅有 10个请求,共 20多 K数据。 (这里需要说明的是,如果直接 F5刷新页面的话效果是不一样的,这种情况下请求数还是一样,不过被缓存资源的请求服务器是 304响应,只有 Header没有Body,可以节省带宽 )

            怎样才算合理设置 ?原则很简单,能缓存越多越好,能缓存越久越好。例如,很少变化的图片资源可以直接通过 HTTP Header中的Expires设置一个很长的过期头 ;变化不频繁而又可能会变的资源可以使用 Last-Modifed来做请求验证。尽可能的让资源能够在缓存中待得更久。关于 HTTP缓存的具体设置和原理此处就不再详述了。

    2、使用浏览器缓存

            对一个网站而言,CSS、javascript、logo、图标这些静态资源文件更新的频率都比较低,而这些文件又几乎是每次http请求都需要的,如果将这些文件缓存在浏览器中,可以极好的改善性能。通过设置http头中的cache-control和expires的属性,可设定浏览器缓存,缓存时间可以是数天,甚至是几个月。

            在某些时候,静态资源文件变化需要及时应用到客户端浏览器,这种情况,可通过改变文件名实现,即更新javascript文件并不是更新javascript文件内容,而是生成一个新的JS文件并更新HTML文件中的引用。
            使用浏览器缓存策略的网站在更新静态资源时,应采用逐量更新的方法,比如需要更新10个图标文件,不宜把10个文件一次全部更新,而是应该一个文件一个文件逐步更新,并有一定的间隔时间,以免用户浏览器忽然大量缓存失效,集中更新缓存,造成服务器负载骤增、网络堵塞的情况。

    3、启用压缩

            在服务器端对文件进行压缩,在浏览器端对文件解压缩,可有效减少通信传输的数据量。如果可以的话,尽可能的将外部的脚本、样式进行合并,多个合为一个。文本文件的压缩效率可达到80%以上,因此HTML、CSS、javascript文件启用GZip压缩可达到较好的效果。但是压缩对服务器和浏览器产生一定的压力,在通信带宽良好,而服务器资源不足的情况下要权衡考虑。

    4CSS Sprites

    合并 CSS图片,减少请求数的又一个好办法。

    5LazyLoad Images

            这条策略实际上并不一定能减少 HTTP请求数,但是却能在某些条件下或者页面刚加载时减少 HTTP请求数。对于图片而言,在页面刚加载的时候可以只加载第一屏,当用户继续往后滚屏的时候才加载后续的图片。这样一来,假如用户只对第一屏的内容感兴趣时,那剩余的图片请求就都节省了。

    6CSS放在页面最上部,javascript放在页面最下面

           浏览器会在下载完成全部CSS之后才对整个页面进行渲染,因此最好的做法是将CSS放在页面最上面,让浏览器尽快下载CSS。如果将 CSS放在其他地方比如 BODY中,则浏览器有可能还未下载和解析到 CSS就已经开始渲染页面了,这就导致页面由无 CSS状态跳转到 CSS状态,用户体验比较糟糕,所以可以考虑将CSS放在HEAD中。

            Javascript则相反,浏览器在加载javascript后立即执行,有可能会阻塞整个页面,造成页面显示缓慢,因此javascript最好放在页面最下面。但如果页面解析时就需要用到javascript,这时放到底部就不合适了。

            Lazy Load Javascript(只有在需要加载的时候加载,在一般情况下并不加载信息内容。)随着 Javascript框架的流行,越来越多的站点也使用起了框架。不过,一个框架往往包括了很多的功能实现,这些功能并不是每一个页面都需要的,如果下载了不需要的脚本则算得上是一种资源浪费 -既浪费了带宽又浪费了执行花费的时间。目前的做法大概有两种,一种是为那些流量特别大的页面专门定制一个专用的 mini版框架,另一种则是 Lazy Load。

    7、异步请求Callback(就是将一些行为样式提取出来,慢慢的加载信息的内容)

    在某些页面中可能存在这样一种需求,需要使用 script标签来异步的请求数据。类似:

    <span style="font-size:14px;">/*Callback 函数*/
        function myCallback(info){ 
            //do something here 
        } 
     HTML:
      Callback返回的内容 :
       myCallback('Hello world!');
    </span>

    像以上这种方式直接在页面上写 <script> 对页面的性能也是有影响的,即增加了页面首次加载的负担,推迟了 DOMLoaded和window.onload 事件的触发时机。如果时效性允许的话,可以考虑在 DOMLoaded事件触发的时候加载,或者使用 setTimeout方式来灵活的控制加载的时机。

    8、减少cookie传输

            一方面,cookie包含在每次请求和响应中,太大的cookie会严重影响数据传输,因此哪些数据需要写入cookie需要慎重考虑,尽量减少cookie中传输的数据量。另一方面,对于某些静态资源的访问,如CSS、script等,发送cookie没有意义,可以考虑静态资源使用独立域名访问,避免请求静态资源时发送cookie,减少cookie传输次数。

    9Javascript代码优化

    (1). DOM  

    a.HTML Collection(HTML收集器,返回的是一个数组内容信息) 
      在脚本中 document.images、document.forms、getElementsByTagName()返回的都是HTMLCollection类型的集合,在平时使用的时候大多将它作为数组来使用,因为它有 length属性,也可以使用索引访问每一个元素。不过在访问性能上则比数组要差很多,原因是这个集合并不是一个静态的结果,它表示的仅仅是一个特定的查询,每次访问该集合时都会重新执行这个查询从而更新查询结果。所谓的“访问集合” 包括读取集合的 length属性、访问集合中的元素。 
      因此,当你需要遍历 HTML Collection的时候,尽量将它转为数组后再访问,以提高性能。即使不转换为数组,也请尽可能少的访问它,例如在遍历的时候可以将 length属性、成员保存到局部变量后再使用局部变量。   
    b. Reflow & Repaint   
      除了上面一点之外, DOM操作还需要考虑浏览器的Reflow和Repaint ,因为这些都是需要消耗资源的。

    (2). 慎用 with 

    with(obj){ p = 1}; 代码块的行为实际上是修改了代码块中的执行环境 ,将obj放在了其作用域链的最前端,在 with代码块中访问非局部变量是都是先从 obj上开始查找,如果没有再依次按作用域链向上查找,因此使用 with相当于增加了作用域链长度。而每次查找作用域链都是要消耗时间的,过长的作用域链会导致查找性能下降。 
      因此,除非你能肯定在 with代码中只访问 obj中的属性,否则慎用 with,替代的可以使用局部变量缓存需要访问的属性。

    (3). 避免使用 eval Function

    每次 eval 或Function 构造函数作用于字符串表示的源代码时,脚本引擎都需要将源代码转换成可执行代码。这是很消耗资源的操作 —— 通常比简单的函数调用慢 100倍以上。 
      eval 函数效率特别低,由于事先无法知晓传给 eval 的字符串中的内容,eval在其上下文中解释要处理的代码,也就是说编译器无法优化上下文,因此只能有浏览器在运行时解释代码。这对性能影响很大。 
      Function 构造函数比 eval略好,因为使用此代码不会影响周围代码 ;但其速度仍很慢。 
      此外,使用 eval和 Function也不利于Javascript 压缩工具执行压缩。

    (4). 减少作用域链查找

    前文谈到了作用域链查找问题,这一点在循环中是尤其需要注意的问题。如果在循环中需要访问非本作用域下的变量时请在遍历之前用局部变量缓存该变量,并在遍历结束后再重写那个变量,这一点对全局变量尤其重要,因为全局变量处于作用域链的最顶端,访问时的查找次数是最多的。 
    低效率的写法:

    <span style="font-size:14px;">// 全局变量 
    var globalVar = 1; 
    function myCallback(info){ 
        for( var i = 100000; i--;){ 
            //每次访问 globalVar 都需要查找到作用域链最顶端,本例中需要访问 100000 次 
            globalVar += i; 
        }
    } 
    </span>

    更高效的写法:

    <span style="font-size:14px;">// 全局变量 
    var globalVar = 1; 
    function myCallback(info){ 
        //局部变量缓存全局变量 
        var localVar = globalVar; 
        for( var i = 100000; i--;){ 
        //访问局部变量是最快的 
        localVar += i; 
        } 
        //本例中只需要访问 2次全局变量
        在函数中只需要将 globalVar中内容的值赋给localVar 中
        globalVar = localVar; 
    }
    </span>

    此外,要减少作用域链查找还应该减少闭包的使用。

    (5). 数据访问

      Javascript中的数据访问包括直接量 (字符串、正则表达式 )、变量、对象属性以及数组,其中对直接量和局部变量的访问是最快的,对对象属性以及数组的访问需要更大的开销。当出现以下情况时,建议将数据放入局部变量: 
      a. 对任何对象属性的访问超过 1次 
      b. 对任何数组成员的访问次数超过 1次 
      另外,还应当尽可能的减少对对象以及数组深度查找。

    (6). 字符串拼接

    在 Javascript中使用”+”号来拼接字符串效率是比较低的,因为每次运行都会开辟新的内存并生成新的字符串变量,然后将拼接结果赋值给新变量。与之相比更为高效的做法是使用数组的 join方法,即将需要拼接的字符串放在数组中最后调用其 join方法得到结果。不过由于使用数组也有一定的开销,因此当需要拼接的字符串较多的时候可以考虑用此方法。

    10CSS选择符优化

    在大多数人的观念中,都觉得浏览器对 CSS选择符的解析式从左往右进行的,例如 
    #toc A { color: #444; }这样一个选择符,如果是从右往左解析则效率会很高,因为第一个 ID选择基本上就把查找的范围限定了,但实际上浏览器对选择符的解析是从右往左进行的。如上面的选择符,浏览器必须遍历查找每一个 A标签的祖先节点,效率并不像之前想象的那样高。根据浏览器的这一行为特点,在写选择符的时候需要注意很多事项,有兴趣的童鞋可以去了解一下。

    CDN加速

    CDN(contentdistribute network,内容分发网络)的本质仍然是一个缓存,而且将数据缓存在离用户最近的地方,使用户以最快速度获取数据,即所谓网络访问第一跳,如下图。

    由于CDN部署在网络运营商的机房,这些运营商又是终端用户的网络服务提供商,因此用户请求路由的第一跳就到达了CDN服务器,当CDN中存在浏览器请求的资源时,从CDN直接返回给浏览器,最短路径返回响应,加快用户访问速度,减少数据中心负载压力。 
    CDN缓存的一般是静态资源,如图片、文件、CSS、script脚本、静态网页等,但是这些文件访问频度很高,将其缓存在CDN可极大改善网页的打开速度。

    反向代理

    传统代理服务器位于浏览器一侧,代理浏览器将http请求发送到互联网上,而反向代理服务器位于网站机房一侧,代理网站web服务器接收http请求。如下图所示:

    论坛网站,把热门词条、帖子、博客缓存在反向代理服务器上加速用户访问速度,当这些动态内容有变化时,通过内部通知机制通知反向代理缓存失效,反向代理会重新加载最新的动态内容再次缓存起来。

    此外,反向代理也可以实现负载均衡的功能,而通过负载均衡构建的应用集群可以提高系统总体处理能力,进而改善网站高并发情况下的性能。



    展开全文
  • web前端性能&SEO优化

    万次阅读 多人点赞 2018-04-16 14:51:47
    转至: ...amp;&amp;... 浏览器访问优化 浏览器请求处理流程如下图: 1、减少http请求,合理设置 HTTP缓存 http协议是无状态的应用层协议,意味着每次http请求都需要建立通信链路、进行数据...

    转至: https://www.2cto.com/kf/201604/498725.html && https://www.cnblogs.com/EnSnail/p/5671345.html

    浏览器访问优化

    浏览器请求处理流程如下图:
    1

    1、减少http请求,合理设置 HTTP缓存

    http协议是无状态的应用层协议,意味着每次http请求都需要建立通信链路、进行数据传输,而在服务器端,每个http都需要启动独立的线程去处理。这些通信和服务的开销都很昂贵,减少http请求的数目可有效提高访问性能。

    减少http的主要手段是合并CSS、合并javascript、合并图片。将浏览器一次访问需要的javascript和CSS合并成一个文件,这样浏览器就只需要一次请求。图片也可以合并,多张图片合并成一张,如果每张图片都有不同的超链接,可通过CSS偏移响应鼠标点击操作,构造不同的URL。
    缓存的力量是强大的,恰当的缓存设置可以大大的减少 HTTP请求。假设某网站首页,当浏览器没有缓存的时候访问一共会发出 78个请求,共 600多 K数据,而当第二次访问即浏览器已缓存之后访问则仅有 10个请求,共 20多 K数据。 (这里需要说明的是,如果直接 F5刷新页面的话效果是不一样的,这种情况下请求数还是一样,不过被缓存资源的请求服务器是 304响应,只有 Header没有Body ,可以节省带宽 )

      怎样才算合理设置 ?原则很简单,能缓存越多越好,能缓存越久越好。例如,很少变化的图片资源可以直接通过 HTTP Header中的Expires设置一个很长的过期头 ;变化不频繁而又可能会变的资源可以使用 Last-Modifed来做请求验证。尽可能的让资源能够在缓存中待得更久。关于 HTTP缓存的具体设置和原理此处就不再详述了。

    2、使用浏览器缓存

    对一个网站而言,CSS、javascript、logo、图标这些静态资源文件更新的频率都比较低,而这些文件又几乎是每次http请求都需要的,如果将这些文件缓存在浏览器中,可以极好的改善性能。通过设置http头中的cache-control和expires的属性,可设定浏览器缓存,缓存时间可以是数天,甚至是几个月。

    在某些时候,静态资源文件变化需要及时应用到客户端浏览器,这种情况,可通过改变文件名实现,即更新javascript文件并不是更新javascript文件内容,而是生成一个新的JS文件并更新HTML文件中的引用。
    使用浏览器缓存策略的网站在更新静态资源时,应采用逐量更新的方法,比如需要更新10个图标文件,不宜把10个文件一次全部更新,而是应该一个文件一个文件逐步更新,并有一定的间隔时间,以免用户浏览器忽然大量缓存失效,集中更新缓存,造成服务器负载骤增、网络堵塞的情况。

    3、启用压缩

    在服务器端对文件进行压缩,在浏览器端对文件解压缩,可有效减少通信传输的数据量。如果可以的话,尽可能的将外部的脚本、样式进行合并,多个合为一个。文本文件的压缩效率可达到80%以上,因此HTML、CSS、javascript文件启用GZip压缩可达到较好的效果。但是压缩对服务器和浏览器产生一定的压力,在通信带宽良好,而服务器资源不足的情况下要权衡考虑。

    4、 CSS Sprites

      合并 CSS图片,减少请求数的又一个好办法。

    5、Lazy Load Images(自己对这一块的内容还是不了解)

      这条策略实际上并不一定能减少 HTTP请求数,但是却能在某些条件下或者页面刚加载时减少 HTTP请求数。对于图片而言,在页面刚加载的时候可以只加载第一屏,当用户继续往后滚屏的时候才加载后续的图片。这样一来,假如用户只对第一屏的内容感兴趣时,那剩余的图片请求就都节省了。

    6、CSS放在页面最上部,javascript放在页面最下面

    浏览器会在下载完成全部CSS之后才对整个页面进行渲染,因此最好的做法是将CSS放在页面最上面,让浏览器尽快下载CSS。如果将 CSS放在其他地方比如 BODY中,则浏览器有可能还未下载和解析到 CSS就已经开始渲染页面了,这就导致页面由无 CSS状态跳转到 CSS状态,用户体验比较糟糕,所以可以考虑将CSS放在HEAD中。

    Javascript则相反,浏览器在加载javascript后立即执行,有可能会阻塞整个页面,造成页面显示缓慢,因此javascript最好放在页面最下面。但如果页面解析时就需要用到javascript,这时放到底部就不合适了。

    Lazy Load Javascript(只有在需要加载的时候加载,在一般情况下并不加载信息内容。)随着 Javascript框架的流行,越来越多的站点也使用起了框架。不过,一个框架往往包括了很多的功能实现,这些功能并不是每一个页面都需要的,如果下载了不需要的脚本则算得上是一种资源浪费 -既浪费了带宽又浪费了执行花费的时间。目前的做法大概有两种,一种是为那些流量特别大的页面专门定制一个专用的 mini版框架,另一种则是 Lazy Load。

    7、异步请求 Callback(就是将一些行为样式提取出来,慢慢的加载信息的内容)

      
    在某些页面中可能存在这样一种需求,需要使用 script标签来异步的请求数据。类似:

    <code class="hljs javascript"> Javascript:
        /*Callback 函数*/
        function myCallback(info){ 
            //do something here 
        } 
    
     HTML:
      Callback返回的内容 :
       myCallback('Hello world!');</code>

    像以上这种方式直接在页面上写

    8、减少cookie传输

    一方面,cookie包含在每次请求和响应中,太大的cookie会严重影响数据传输,因此哪些数据需要写入cookie需要慎重考虑,尽量减少cookie中传输的数据量。另一方面,对于某些静态资源的访问,如CSS、script等,发送cookie没有意义,可以考虑静态资源使用独立域名访问,避免请求静态资源时发送cookie,减少cookie传输次数。

    9、Javascript代码优化

    (1). DOM  
      a. HTML Collection(HTML收集器,返回的是一个数组内容信息)
      在脚本中 document.images、document.forms 、getElementsByTagName()返回的都是 HTMLCollection类型的集合,在平时使用的时候大多将它作为数组来使用,因为它有 length属性,也可以使用索引访问每一个元素。不过在访问性能上则比数组要差很多,原因是这个集合并不是一个静态的结果,它表示的仅仅是一个特定的查询,每次访问该集合时都会重新执行这个查询从而更新查询结果。所谓的 “访问集合” 包括读取集合的 length属性、访问集合中的元素。
      因此,当你需要遍历 HTML Collection的时候,尽量将它转为数组后再访问,以提高性能。即使不转换为数组,也请尽可能少的访问它,例如在遍历的时候可以将 length属性、成员保存到局部变量后再使用局部变量。  
      b. Reflow & Repaint  
      除了上面一点之外, DOM操作还需要考虑浏览器的 Reflow和Repaint ,因为这些都是需要消耗资源的。

    (2). 慎用 with  
    with(obj){ p = 1}; 代码块的行为实际上是修改了代码块中的 执行环境 ,将obj放在了其作用域链的最前端,在 with代码块中访问非局部变量是都是先从 obj上开始查找,如果没有再依次按作用域链向上查找,因此使用 with相当于增加了作用域链长度。而每次查找作用域链都是要消耗时间的,过长的作用域链会导致查找性能下降。
      因此,除非你能肯定在 with代码中只访问 obj中的属性,否则慎用 with,替代的可以使用局部变量缓存需要访问的属性。

    (3). 避免使用 eval和 Function
      每次 eval 或 Function 构造函数作用于字符串表示的源代码时,脚本引擎都需要将源代码转换成可执行代码。这是很消耗资源的操作 —— 通常比简单的函数调用慢 100倍以上。
      eval 函数效率特别低,由于事先无法知晓传给 eval 的字符串中的内容,eval在其上下文中解释要处理的代码,也就是说编译器无法优化上下文,因此只能有浏览器在运行时解释代码。这对性能影响很大。
      Function 构造函数比 eval略好,因为使用此代码不会影响周围代码 ;但其速度仍很慢。
      此外,使用 eval和 Function也不利于Javascript 压缩工具执行压缩。

    (4). 减少作用域链查找
      前文谈到了作用域链查找问题,这一点在循环中是尤其需要注意的问题。如果在循环中需要访问非本作用域下的变量时请在遍历之前用局部变量缓存该变量,并在遍历结束后再重写那个变量,这一点对全局变量尤其重要,因为全局变量处于作用域链的最顶端,访问时的查找次数是最多的。
      
      低效率的写法:
      

    <code class=" hljs javascript">// 全局变量 
    var globalVar = 1; 
    function myCallback(info){ 
        for( var i = 100000; i--;){ 
            //每次访问 globalVar 都需要查找到作用域链最顶端,本例中需要访问 100000 次 
            globalVar += i; 
        }
    } 
    </code>

    更高效的写法:

    <code class=" hljs javascript">// 全局变量 
    var globalVar = 1; 
    function myCallback(info){ 
        //局部变量缓存全局变量 
        var localVar = globalVar; 
        for( var i = 100000; i--;){ 
        //访问局部变量是最快的 
        localVar += i; 
        } 
        //本例中只需要访问 2次全局变量
        在函数中只需要将 globalVar中内容的值赋给localVar 中
        globalVar = localVar; 
    }</code>

    此外,要减少作用域链查找还应该减少闭包的使用。

    (5). 数据访问
      Javascript中的数据访问包括直接量 (字符串、正则表达式 )、变量、对象属性以及数组,其中对直接量和局部变量的访问是最快的,对对象属性以及数组的访问需要更大的开销。当出现以下情况时,建议将数据放入局部变量:
      
      a. 对任何对象属性的访问超过 1次
      b. 对任何数组成员的访问次数超过 1次
      另外,还应当尽可能的减少对对象以及数组深度查找。

    (6). 字符串拼接
      在 Javascript中使用”+” 号来拼接字符串效率是比较低的,因为每次运行都会开辟新的内存并生成新的字符串变量,然后将拼接结果赋值给新变量。与之相比更为高效的做法是使用数组的 join方法,即将需要拼接的字符串放在数组中最后调用其 join方法得到结果。不过由于使用数组也有一定的开销,因此当需要拼接的字符串较多的时候可以考虑用此方法。

    10、CSS选择符优化

      在大多数人的观念中,都觉得浏览器对 CSS选择符的解析式从左往右进行的,例如
    #toc A { color: #444; }这样一个选择符,如果是从右往左解析则效率会很高,因为第一个 ID选择基本上就把查找的范围限定了,但实际上浏览器对选择符的解析是从右往左进行的。如上面的选择符,浏览器必须遍历查找每一个 A标签的祖先节点,效率并不像之前想象的那样高。根据浏览器的这一行为特点,在写选择符的时候需要注意很多事项,有兴趣的童鞋可以去了解一下。

    CDN加速
    CDN(content distribute network,内容分发网络)的本质仍然是一个缓存,而且将数据缓存在离用户最近的地方,使用户以最快速度获取数据,即所谓网络访问第一跳,反向代理 ,如下图。
    2

    传统代理服务器位于浏览器一侧,代理浏览器将http请求发送到互联网上,而反向代理服务器位于网站机房一侧,代理网站web服务器接收http请求。如下图所示:

    3

    网站安全的作用,来自互联网的访问请求必须经过代理服务器,相当于web服务器和可能的网络攻击之间建立了一个屏障。

    除了安全功能代理服务器也可以通过配置缓存功能加速web请求。当用户第一次访问静态内容的时候,静态内容就被缓存在反向代理服务器上,这样当其他用户访问该静态内容的时候,就可以直接从反向代理服务器返回,加速web请求响应速度,减轻web服务器负载压力。事实上,有些网站会把动态内容也缓存在代理服务器上,比如维基百科及某些博客论坛网站,把热门词条、帖子、博客缓存在反向代理服务器上加速用户访问速度,当这些动态内容有变化时,通过内部通知机制通知反向代理缓存失效,反向代理会重新加载最新的动态内容再次缓存起来。

    此外,反向代理也可以实现负载均衡的功能,而通过负载均衡构建的应用集群可以提高系统总体处理能力,进而改善网站高并发情况下的性能。


    一、搜索引擎工作原理

      当我们在输入框中输入关键词,点击搜索或查询时,然后得到结果。深究其背后的故事,搜索引擎做了很多事情。

      在搜索引擎网站,比如百度,在其后台有一个非常庞大的数据库,里面存储了海量的关键词,而每个关键词又对应着很多网址,这些网址是百度程序从茫茫的互联网上一点一点下载收集而来的,这些程序称之为“搜索引擎蜘蛛”或“网络爬虫”。这些勤劳的“蜘蛛”每天在互联网上爬行,从一个链接到另一个链接,下载其中的内容,进行分析提炼,找到其中的关键词,如果“蜘蛛”认为关键词在数据库中没有而对用户是有用的便存入数据库。反之,如果“蜘蛛”认为是垃圾信息或重复信息,就舍弃不要,继续爬行,寻找最新的、有用的信息保存起来提供用户搜索。当用户搜索时,就能检索出与关键字相关的网址显示给访客。

      一个关键词对用多个网址,因此就出现了排序的问题,相应的当与关键词最吻合的网址就会排在前面了。在“蜘蛛”抓取网页内容,提炼关键词的这个过程中,就存在一个问题:“蜘蛛”能否看懂。如果网站内容是flashjs,那么它是看不懂的,会犯迷糊,即使关键字再贴切也没用。相应的,如果网站内容是它的语言,那么它便能看懂,它的语言即SEO

    二、SEO简介

      全称:Search English Optimization,搜索引擎优化。自从有了搜索引擎,SEO便诞生了。

      存在的意义:为了提升网页在搜索引擎自然搜索结果中的收录数量以及排序位置而做的优化行为。简言之,就是希望百度等搜索引擎能多多我们收录精心制作后的网站,并且在别人访问时网站能排在前面。

      分类:白帽SEO黑帽SEO。白帽SEO,起到了改良和规范网站设计的作用,使网站对搜索引擎和用户更加友好,并且网站也能从搜索引擎中获取合理的流量,这是搜索引擎鼓励和支持的。黑帽SEO,利用和放大搜索引擎政策缺陷来获取更多用户的访问量,这类行为大多是欺骗搜索引擎,一般搜索引擎公司是不支持与鼓励的。本文针对白帽SEO,那么白帽SEO能做什么呢?

      1. 对网站的标题、关键字、描述精心设置,反映网站的定位,让搜索引擎明白网站是做什么的;

      2. 网站内容优化:内容与关键字的对应,增加关键字的密度;

      3. 在网站上合理设置Robot.txt文件;

      4. 生成针对搜索引擎友好的网站地图;

      5. 增加外部链接,到各个网站上宣传;

    三、前端SEO

      通过网站的结构布局设计和网页代码优化,使前端页面既能让浏览器用户能够看懂,也能让“蜘蛛”看懂。

      (1) 网站结构布局优化:尽量简单、开门见山,提倡扁平化结构。
      
      一般而言,建立的网站结构层次越少,越容易被“蜘蛛”抓取,也就容易被收录。一般中小型网站目录结构超过三级,“蜘蛛”便不愿意往下爬,“万一天黑迷路了怎么办”。并且根据相关调查:访客如果经过跳转3次还没找到需要的信息,很可能离开。因此,三层目录结构也是体验的需要。为此我们需要做到:

      1. 控制首页链接数量

      网站首页是权重最高的地方,如果首页链接太少,没有“桥”,“蜘蛛”不能继续往下爬到内页,直接影响网站收录数量。但是首页链接也不能太多,一旦太多,没有实质性的链接,很容易影响用户体验,也会降低网站首页的权重,收录效果也不好。

      因此对于中小型企业网站,建议首页链接在100个以内,链接的性质可以包含页面导航、底部导航、锚文字链接等等,注意链接要建立在用户的良好体验和引导用户获取信息的基础之上。

      2.扁平化的目录层次,尽量让“蜘蛛”只要跳转3次,就能到达网站内的任何一个内页。扁平化的目录结构,比如:“植物”–> “水果” –> “苹果”、“桔子”、“香蕉”,通过3级就能找到香蕉了。

      3.导航优化

      导航应该尽量采用文字方式,也可以搭配图片导航,但是图片代码一定要进行优化,<img>标签必须添加“alt”“title”属性,告诉搜索引擎导航的定位,做到即使图片未能正常显示时,用户也能看到提示文字。

      其次,在每一个网页上应该加上面包屑导航,好处:从用户体验方面来说,可以让用户了解当前所处的位置以及当前页面在整个网站中的位置,帮助用户很快了解网站组织形式,从而形成更好的位置感,同时提供了返回各个页面的接口,方便用户操作;对“蜘蛛”而言,能够清楚的了解网站结构,同时还增加了大量的内部链接,方便抓取,降低跳出率。

      4. 网站的结构布局–不可忽略的细节

      1)页面头部:logo及主导航,以及用户的信息。

      2)页面主体:左边正文,包括面包屑导航及正文;右边放热门文章及相关文章,好处:留住访客,让访客多停留,对“蜘蛛”而言,这些文章属于相关链接,增强了页面相关性,也能增强页面的权重。

      3)页面底部:版权信息和友情链接。

      特别注意:分页导航写法,推荐写法:“首页 1 2 3 4 5 6 7 8 9 下拉框”,这样“蜘蛛”能够根据相应页码直接跳转,下拉框直接选择页面跳转。而下面的写法是不推荐的,“首页 下一页 尾页”,特别是当分页数量特别多时,“蜘蛛”需要经过很多次往下爬,才能抓取,会很累、会容易放弃。

      5.控制页面的大小,减少http请求,提高网站的加载速度。

      一个页面最好不要超过100k,太大,页面加载速度慢。当速度很慢时,用户体验不好,留不住访客,并且一旦超时,“蜘蛛”也会离开。

      (2) 网页代码优化
      
      1.<title>标题:只强调重点即可,尽量把重要的关键词放在前面,关键词不要重复出现,尽量做到每个页面的<title>标题中不要设置相同的内容。

      2.<meta keywords>标签:关键词,列举出几个页面的重要关键字即可,切记过分堆砌。

      3.<meta description>标签:网页描述,需要高度概括网页内容,切记不能太长,过分堆砌关键词,每个页面也要有所不同。

      4.<body>中的标签:尽量让代码语义化,在适当的位置使用适当的标签,用正确的标签做正确的事。让阅读源码者和“蜘蛛”都一目了然。比如:h1-h6是用于标题类的,<nav>标签是用来设置页面主导航的等。

      5.<a>标签:页内链接,要加“title” 属性加以说明,让访客和 “蜘蛛” 知道。而外部链接,链接到其他网站的,则需要加上el="nofollow"属性, 告诉 “蜘蛛” 不要爬,因为一旦“蜘蛛”爬了外部链接之后,就不会再回来了。

      6.正文标题要用<h1>标签:“蜘蛛” 认为它最重要,若不喜欢<h1>的默认样式可以通过CSS设置。尽量做到正文标题用<h1>标签,副标题用<h2>标签, 而其它地方不应该随便乱用 h 标题标签。

      7.<br>标签:只用于文本内容的换行,比如:

    <p>
       第一行文字内容<br/>
        第二行文字内容<br/>
        第三行文字内容
    </p>

     8.表格应该使用<caption>表格标题标签

      9.<img>应使用 “alt” 属性加以说明

     10.<strong>、<em>标签 : 需要强调时使用。<strong>标签在搜索引擎中能够得到高度的重视,它能突出关键词,表现重要的内容,<em>标签强调效果仅次于<strong>标签。

        <b>、<i>标签: 只是用于显示效果时使用,在SEO中不会起任何效果。

     11、文本缩进不要使用特殊符号&nbsp; 应当使用CSS进行设置。版权符号不要使用特殊符号 &copy; 可以直接使用输入法,拼“banquan”,选择序号5就能打出版权符号©。

     12、巧妙利用CSS布局,将重要内容的HTML代码放在最前面,最前面的内容被认为是最重要的,优先让“蜘蛛”读取,进行内容关键词抓取。

     13.重要内容不要用JS输出,因为“蜘蛛”不认识

     14.尽量少使用iframe框架,因为“蜘蛛”一般不会读取其中的内容

     15.谨慎使用display:none :对于不想显示的文字内容,应当设置z-index或设置到浏览器显示器之外。因为搜索引擎会过滤掉display:none其中的内容。

     16. 不断精简代码

     17.js代码如果是操作DOM操作,应尽量放在body结束标签之前,html代码之后。

    展开全文
  • 前端如何进行seo优化

    万次阅读 2019-04-18 11:29:27
    一、合理的title、description、keywords 搜索对着三项的权重逐个减小,title值强调重点即可;description把页面内容高度概括,不可过分堆砌关键词;keywords列举出重要关键词。 1、title title,就是浏览器上...

    一、合理的title、description、keywords

        搜索对着三项的权重逐个减小,title值强调重点即可;description把页面内容高度概括,不可过分堆砌关键词;keywords列举出重要关键词。

    1、title

    title,就是浏览器上显示的那些内容,不仅用户能看到,也能被搜索引擎检索到(搜索引擎在抓取网页时,最先读取的就是网页标题,所以title是否正确设置极其重要。)title一般不超过80个字符,而且词语间要用英文“-”隔开,因为计算机只对英语的敏感性较高,对汉语的敏感性不高。

    用法:<title>网站标题</title>

    (1)首页title写法,一般是“网站名称-主关键词或一句含有主关键词的描述”。一般网站名称放后面,因为搜索引擎给予标题最前面的词比后面的高。比如,做“冰箱”这个词,就这样写“冰箱_变频冰箱-海尔官网”。

    (2)栏目页title写法,一般有2种:“栏目名称-网站名称”、“栏目名称栏目关键词-网站名称”。而且栏目名称最好用关键词来确定,比如企业招聘栏目最好就用企业招聘,而不要起个让人无法识别的名字如企业来人,企业看看,或企业加上一些特殊符号,这种写法虽然很有个性,但会让你的网站在优化上占了下风。

    (3)分类列表页title写法,一般是“分类列表页名称-栏目名称-网站名称”,这个和栏目页差不多。

    (4)文章页title写法,一般有3种:“文章标题-网站名称”、“内容标题-栏目名称”、“内容标题-栏目名称-网站名称”。其中,“内容标题-栏目名称-网站名称”的写法最为规范,但也相对复杂,它能给用户很好的提示,让用户知道他在访问哪篇文章,并且是在哪个网站的哪个栏目下。

    2、description(内容摘要)

    description是对于一个网页的简要内容概况。description一般不超过150个字符,描述内容要和页面内容相关。

    用法:<meta name=”Description” Content=”你网页的简述”>

    (1)首页description写法,一般是将首页的标题、关键词和一些特殊栏目的内容融合到里面,写成简单的介绍。

    (2)栏目页description写法,一般是将栏目的标题、关键字、分类列表名称融合到里面,写成简单的介绍。

    (3)分类列表页description,这个就比较简单了,一般只需要把分类列表的标题、关键词融合在一起,写成简单的介绍。

    (4)文章页description写法,一般有2种写法,标准写法就和前面的一样,将文章标题、文章中的重要内容和关键词融合在一起,写成简单的介绍。这是最好最标准的写法。但是这样写比较麻烦,还有一种种偷懒的方法,你可以在文章首段和标题中加入关键词,比如我这篇文章是讲title、keywords、description的,那么在文章首段和标题中就加入这些内容,然后直接将文章首段的内容复制到description中即可。

    3、keywords(关键词)

    keywords,主要作用是告诉搜索引擎本页内容是围绕哪些词展开的。因此keywords的每个词都要能在内容中找到相应匹配,才有利于排名。keywords一般不超过3个,每个关键词不宜过长,而且词语间要用英文“,”隔开。为什么用英文上文已经说过。而且,尽量将重要的关键字靠前放,因为靠后的关键字排名较差,除非你站有很高的权重。

    用法:<meta name=”Keywords” Content=”关键词1,关键词2,关键词3,关键词4″>

    (1)首页keywords写法,一般是“网站名称,主要栏目名,主要关键词”。

    (2)栏目页keywords写法,一般是“栏目名称,栏目关键字,栏目分类列表名称”。

    (3)分类列表页keywords写法,这个就比较简单了,只要将你这个栏目中的主要关键字写入即可。

    (4)文章页keywords写法,建议大家提取文章中的关键词,比如我的文章主要是讲SEO优化的,那么我关键词肯定是SEO优化,如果你觉得你提取关键词的能力较差,也可以选择文章中出现比较多的词来作为关键词,比如我现在写的内容是关于title、keywords、description的,那我的文章页关键词就是这3个。

    二、语义化的HTML代码,符合W3C规范:语义化代码让搜索引擎容易理解网页

    1. 什么是HTML语义化

        什么是HTML语义化,我的理解是: 用最恰当的标签来标记内容。通俗的说,就是告诉你:“这是一个一级标题或二级标题”,“这是一个段落”,“这是头部”,“这是一个导航栏”,并不会告诉你:“这是红色的”,“这个有多么宽,多么高”。标题脱了CSS这层外衣,它还是一个标题。这就是简单的HTML语义化:表现网页的结构。语义化的HTML元素指的是那些使用最恰当的HTML进行标记的内容,在标记构成中并不关心内容显示。语义化的HTML是构建有效网站的基石。

    2、在写HTML代码时应该注意

    • 尽可能少的使用无语义的标签div和span;
    • 在语义不明显时,既可以使用div或者p时,尽量用p, 因为p在默认情况下有上下间距,对兼容特殊终端有利;
    • 不要使用纯样式标签,如:b、font、u等,改用css设置。
    • 需要强调的文本,可以包含在strong或者em标签中(浏览器预设样式,能用CSS指定就不用他们),strong默认样式是加粗(不要用b),em是斜体(不用i);
    • 使用表格时,标题要用caption,表头用thead,主体部分用tbody包围,尾部用tfoot包围。表头和一般单元格要区分开,表头用th,单元格用td;
    • 表单域要用fieldset标签包起来,并用legend标签说明表单的用途;
    • 每个input标签对应的说明文本都需要使用label标签,并且通过为input设置id属性,在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

    3、HTML5常用的语义元素

        HTML5提供了新的语义元素来定义网页的不同部分,它们被称为“切片元素”,如图所示 

    常用的语义化元素:

    (1)header元素

        header 元素代表“网页”或“section”的页眉。

        通常包含h1-h6元素或hgroup,作为整个页面或者一个内容块的标题。也可以包裹一节的目录部分,一个搜索框,一个nav,或者任何相关logo。

        整个页面没有限制header元素的个数,可以拥有多个,可以为每个内容块增加一个header元素

    <header> 
      <hgroup> 
    	<h1>网站标题</h1>
    	<h1>网站副标题</h1>
      </hgroup> 
    </header>

    header使用注意:

    • 可以是“网页”或任意“section”的头部部分;
    • 没有个数限制。
    • 如果hgroup或h1-h6自己就能工作的很好,那就不要用header。

    (2)footer元素

    footer元素代表“网页”或“section”的页脚,通常含有该节的一些基本信息,譬如:作者,相关文档链接,版权资料。如果footer元素包含了整个节,那么它们就代表附录,索引,提拔,许可协议,标签,类别等一些其他类似信息。

    <footer> 我是页脚 </footer>

    footer使用注意:

    • 可以是“网页”或任意“section”的底部部分;
    • 没有个数限制,除了包裹的内容不一样,其他跟header类似。

    (3)hgroup元素

    hgroup元素代表“网页”或“section”的标题,当元素有多个层级时,该元素可以将h1到h6元素放在其内,譬如文章的主标题和副标题的组合

    <hgroup> 
      <h1>这是一篇介绍HTML 5语义化标签和更简洁的结构</h1> 
      <h2>HTML 5</h2> 
    </hgroup>

    hgroup使用注意:

    • 如果只需要一个h1-h6标签就不用hgroup
    • 如果有连续多个h1-h6标签就用hgroup
    • 如果有连续多个标题和其他文章数据,h1-h6标签就用hgroup包住,和其他文章元数据一起放入header标签

    (4)nav元素

    nav元素代表页面的导航链接区域。用于定义页面的主要导航部分。

    <nav>
    	<ul>
    		<li>HTML 5</li>
    		<li>CSS3</li>
    		<li>JavaScript</li>
    	</ul>
    </nav>

    但是我在有些时候却情不自禁的想用它,譬如:侧边栏上目录,面包屑导航,搜索样式,或者下一篇上一篇文章,但是事实上规范上说nav只能用在页面主要导航部分上。页脚区域中的链接列表,虽然指向不同网站的不同区域,譬如服务条款,版权页等,这些footer元素就能够用了。

    nav使用注意:

    • 用在整个页面主要导航部分上,不合适就不要用nav元素;

    (5)aside元素

    aside元素被包含在article元素中作为主要内容的附属信息部分,其中的内容可以是与当前文章有关的相关资料、标签、名次解释等。(特殊的section)

    在article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏,其中的内容可以是日志串连,其他组的导航,甚至广告,这些内容相关的页面。

    <article>
    	<p>内容</p>
    	<aside>
    		<h1>标题呢</h1>
    		<p>这里是内容呢</p>
    	</aside>
    </article>
    

    aside使用总结:

    • aside在article内表示主要内容的附属信息,
    • 在article之外则可做侧边栏,没有article与之对应,最好不用。
    • 如果是广告,其他日志链接或者其他分类导航也可以用

    (6)section元素

    section元素代表文档中的“节”或“段”,“段”可以是指一篇文章里按照主题的分段;“节”可以是指一个页面里的分组。

    section通常还带标题,虽然html5中section会自动给标题h1-h6降级,但是最好手动给他们降级。如下:

    <section>
    	<h1>section是啥?</h1>
    	<article>
    		<h2>关于section</h1>
    			<p>section的介绍</p>
    			<section>
    				<h3>关于其他</h3>
    				<p>关于其他section的介绍</p>
    			</section>
    	</article>
    </section>

    section使用注意:

    一张页面可以用section划分为简介、文章条目和联系信息。不过在文章内页,最好用article。section不是一般意义上的容器元素,如果想作为样式展示和脚本的便利,可以用div。

    • 表示文档中的节或者段;
    • article、nav、aside可以理解为特殊的section,所以如果可以用article、nav、aside就不要用section,没实际意义的就用div

    (7)article元素

    article元素最容易跟section和div容易混淆,其实article代表一个在文档,页面或者网站中自成一体的内容,其目的是为了让开发者独立开发或重用。譬如论坛的帖子,博客上的文章,一篇用户的评论,一个互动的widget小工具。(特殊的section)

    除了它的内容,article会有一个标题(通常会在header里),会有一个footer页脚。

    <article>
    	<h1>一篇文章</h1>
    	<p>文章内容..</p>
    	<footer>
    		<p><small>small内容</small></p>
    	</footer>
    </article>

    更多语义化元素:https://developer.mozilla.org/en-US/docs/Web/HTML/Element

    4、一些简单的语义化举例

    下面是一段html代码,我们来进行优化

    <div class="main">
    	<div class="h2">标签的语义<a href="#">更多</a></div>
    	<div class="p">段落1内容<span class="strong">强调内容</span></div>
    	<div class="p">段落2内容</div>
    </div>

    上述代码添加CSS样式可以达到效果,但用的只是向div,span这样的无语义标签,我们从标签上看不出结构这样显然是不行的,我们需要用代码清晰表现出:“哪是标题”,“哪是内容”。我们改进一下。

    版本一

    <div class="main">
    	<h2>标签的语义 <a href="#">更多</a></h2>
    	<p>段落一的各种内容.....<strong>强调的内容</strong></p>
    	<p>段落二的内容。。。段落二的内容。。。</p>
    </div>

    版本一比源代码大有改进,从标签可以分清哪是标题哪是内容,也能看到哪被强调,但仔细看有a链接在h2标签中,虽然它们是在同一行,但a链接并不是属于标题。我们也可以添加HTML5语音元素进行改进:

    版本二

    <main>
    	<header class="title">
    		<h2>标签的语义化</h2>
    		<a href="#">更多</a>
    	</header>
    	<article class="content">
    		<p>段落一的各种内容.....<strong>强调的内容</strong></p>
    		<p>段落二的内容。。。</p>
    	</article>
    </main>

    版本二用HTML5定义的新标签是语义化更加完美,写到这里基本上也就可以了,但其实我们还可以利用ARIA(无障碍网页倡议)更加使代码完美。更加具有可读性。

    版本三

    <main role="main">
    	<header class="title" role="heading">
    		<h2>标签的语义化</h2>
    		<a href="#">更多</a>
    	</header>
    	<article class="content" role="contentinfo">
    		<p>段落一的各种内容.....<strong>强调的内容</strong></p>
    		<p>段落二的内容。。。</p>
    	</article>
    </main>

     现在可以看到标签中多了一些role属性,那是ARIA中定义的地标角色定义它们可以使屏幕阅读器更好的工作。当然并不是使用div这些标签就是不重视语义化,有些时候因为样式的需求必须使用这些无语义标签,这时我们就应该大胆使用它们。但能少用尽量少用。

        但是也不要因为html5新标签的出现,而随意用之,错误的使用肯定会事与愿违。所以有些地方还是要用div的,就是因为div没有任何意义的元素,他只是一个标签,仅仅是用来构建外观和结构。因此是最适合做容器的标签。

    三、非装饰性图片必须加alt

    <img> 标签的 alt 属性指定了替代文本,用于在图像无法显示或者用户禁用图像显示时,代替图像显示在浏览器中的内容。

    示例:<img src="xxx.jpg" alt="海尔官网-双门冰箱" />

    1、alt标签的作用:

    • 增强内容相关性

    它是可以利用汉字介绍文章内容的,对于一些特定的企业产品,由于视觉的体验,它往往是少文字的。  

    • 提高关键词密度

    在操作企业站的时候,我们经常遇到是站点首屏一个大的横幅banner,几乎占用了首页的大部分页面,为了有效的提高首页核心关键词密度,我们只能利用一切办法增添关键词,比如:在图片的alt标签中添加。  

    四、友情链接,好的友情链接可以快速的提高你的网站权重

        友情链接,也称为网站交换链接、互惠链接、互换链接、联盟链接等,是具有一定资源互补优势的网站之间的简单合作形式,即分别在自己的网站上放置对方网站的LOGO图片或文字的网站名称,并设置对方网站的超链接(点击后,切换或弹出另一个新的页面),使得用户可以从合作网站中发现自己的网站,达到互相推广的目的,因此常作为一种网站推广基本手段。

        友情链接是指互相在自己的网站上放对方网站的链接。必须要能在网页代码中找到网址和网站名称,而且浏览网页的时候能显示网站名称,这样才叫友情链接。

        友情链接是网站流量来源的根本,比如一种可以自动交换链接的友情链接网站(每来访一个IP,就会自动排到第一),这是一种创新的自助式友情链接互联网模式。

    五、外链,高质量的外链,会给你的网站提高源源不断的权重提升

        外链就是指在别的网站导入自己网站的链接。导入链接对于网站优化来说是非常重要的一个过程。导入链接的质量(即导入链接所在页面的权重)间接影响了我们的网站在搜索引擎中的权重。

        外链是互联网的血液,是链接的一种。没有链接的话,信息就是孤立的,结果就是我们什么都看不到。一个网站是很难做到面面俱到的,因此需要链接到别的网站,将其他网站所能补充的信息吸收过来,连接外链不在于数量,而是在于链接外链的质量。

        外链的效果不只是为了提高网站的权重,也不仅仅是为了提高某个关键词的排名。一个高质量的外部链接是可以给网站带来很好的流量。

    六、向各大搜索引擎登陆入口提交尚未收录站点

    百度提交入口:https://ziyuan.baidu.com/linksubmit/url

    Google提交入口:http://www.google.com/addurl/?hl=zh-CN&continue=/addurl

    360提交入口:http://info.so.360.cn/site_submit.html

    搜狗提交入口:http://fankui.help.sogou.com/index.php/web/web/index?type=1

    必应提交入口:https://www.bing.com/toolbox/webmaster/(必应的匿名提交url已经取消,需要去登陆Bing网站管理员到“配置我的网站”菜单选项中的“提交URL”工具)

    七、重要内容HTML代码放在最前:搜索引擎抓取HTML顺序是从上到下,保证重要内容一定会被抓取

    八、少用iframe:搜索引擎不会抓取iframe中的内容

    九、提高网站速度:网站速度是搜索引擎排序的一个重要指标

     

     

    展开全文
  • 前端优化方案

    千次阅读 2019-04-08 09:11:15
    1 优化css 1.1 避免使用CSS表达式 用CSS表达式动态设置CSS属性,是一种强大又危险的方式。从IE5开始支持,但从IE8起就不推荐使用了。例如,可以用CSS表达式把背景颜色设置成按小时交替的 尽量减少标签选择器的使用...
  • WEB前端优化技巧

    2019-06-10 09:37:28
    当今数字世界,存在着...这篇文章讲述可以帮助改善优化前端的技术,非常有用。主要内容有清理代码、压缩图片、压缩外部资源、使用 CDN,以及一些其它方法。这些方法会为你的网站带显著的速度提升和整体性能提升。 ...
  • Web前端性能优化解决方案

    千次阅读 2018-09-17 23:48:49
    ** ...** 在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出。 ...并按下回车,浏览器再与这个URL指向的服务器建立连接,然后浏览器才能向服务器发送请求...
  • 前端常见的优化问题

    千次阅读 2019-05-19 00:31:11
    (一)Sprites(背景精灵图/雪碧图) ... 2-利用CSS的background-image,background- repeat,background-position的组合进行背景定位,background-position可以用数字精确的定位出背景图片的位置;...
  • 前端性能优化方法

    千次阅读 2018-12-25 21:15:09
    解决办法一: ...网页Gzip,CDN托管,data缓存 ,图片服务器。 前端模板 JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量... 用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能。 当需要设置的样...
  • 前端优化:九个技巧,提高Web性能

    千次阅读 2017-02-11 21:37:05
    当今数字世界,存在着无数的网站...这篇文章讲述可以帮助 改善优化前端 的技术,非常有用。主要内容有清理代码、压缩图片、压缩外部资源、使用 CDN,以及一些其它方法。这些方法会为你的网站带显著的速度提升和整体性
  • Vue + Spring Boot 项目实战(二十):前端优化实战

    千次阅读 多人点赞 2020-04-21 20:12:04
    这一篇我们来尝试一下优化前端项目的一些常见做法并评估其实际效果。
  • 浅谈高并发-前端优化

    千次阅读 2019-09-24 10:08:22
    前言 最近接到个任务,业务场景是需要处理高并发。 原谅我第一时间想到的居然是前段时间阮一峰的博客系统遭到了DDoS攻击,因为在我的理解中,它们的原理是想通的,都是服务器在一定时间内无法处理所有的并行任...
  • 前端优化:9 个技巧,提高 Web 性能

    千次阅读 2016-12-16 10:03:15
    1. 清理 HTML 文档 HTML,即超文本标记语言,几乎是所有网站的支柱。HTML 为网页带来标题、子标题、列表和其它一些文档结构的格式。在最近更新的 HTML5 中,甚至可以创建图表。 HTML 很容易被网络爬虫识别,因此...
  • 12306购票系统前端优化

    千次阅读 2012-10-09 11:36:22
    前端性能优化技术 要解决性能的问题,有很多种常用的方法,我在下面列举一下,我相信12306这个网站使用下面的这些技术会让其性能有质的飞跃。 一、前端负载均衡 通过DNS的负载均衡器(一般在路由器上根据路由...
  • 前端优化之资源加载

    2018-08-06 13:55:09
    一、CSS、JS的装载与执行 html页面加载渲染的过程 特点: 1、顺序执行、并发加载 - 一个域名并发加载有限制,利用多个CDN域名 - 词法分析 - 并发加载 - 并发上限 2、是否阻塞 ......
  • 前端优化——预加载篇

    万次阅读 2018-05-31 16:38:58
    资源预加载是另一个性能优化技术,我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到。预加载简单来说就是将所有所需的资源提前请求加载到本地,这样后面在需要用到时就直接从缓存取资源。 2.为...
  • 前端优化是复杂的,针对方方面面的资源都有不同的方式。那么,前端优化的目的是什么?   1. 从用户角度而言,优化能够让页面加载得更快、对用户的操作响应得更及时,能够给用户提供更为友好的体验。 2. 从服务商...
  • 前端优化之for循环

    2019-11-07 10:04:32
    for循环是前端常用的语句,在满足功能的同时,更重要的是注意性能。接下来讲讲该如何对for循环进行优化。 1.使用break或continue跳出循环:  break 语句可跳出当前循环,继续执行该循环之后的代码。  continue语句...
  • 前端优化-图片加载

    千次阅读 2018-09-12 16:09:39
    前端人员在WEB网站等可能遇到图片量大,琐碎,导致http请求量过大,目前webpack的url-loader虽然可以将图片打包生成base64,但是过多的图片也会导致打包生成的文件过大,初始加载速度缓慢,而且通常图片大于8K,会...
  • 前端优化——懒加载篇

    千次阅读 2018-05-31 16:38:43
    懒加载也叫延迟加载,指的是在长网页中延迟加载图像,是一种很好优化网页性能的方式。用户滚动到它们之前,可视区域外的图像不会加载。这与图像预加载相反,在长网页上使用延迟加载将使网页加载更快。在某些情况下,...

空空如也

1 2 3 4 5 ... 20
收藏数 221,287
精华内容 88,514
关键字:

前端优化