• 注册
  • 登录
  • 当前位置:网站首页 > 网站建设 > SEO优化 > 正文

    javascript如何做seo优化_前台javascript速度优化总结

    爱上技术导航 2019-11-14 202 浏览 0 评论

    如何做seo优化_前台javascript速度优化总结!

    两个基本点

    1. 择重避轻,有所取舍。

    l 核心优先

    通常来讲,系统是都是庞大的,不要太完美主义,先抓住重点,理解那些是我们的核心页面,那些页面对我们来说是最重要的,那些页面访问量最高,核心优先。

    l 主要问题在那,抓住瓶颈点。

    治病要医本。优化前,需要进行细致的分析,抓住主要瓶颈点,对症下药。优化那么多的方子,别全采用,通常几个就能达到效果

    2. 简单有效才是硬道理

    越是简单的东西越容易控制,越不容易出错,尽量避免将系统设计的过于庞大,过于复杂,记住,这是在做产品,而不是在搞研发。很多看似很蠢的方法,往往越是有效。

    新技术,新方法的引用是具备一定的风险的,要评估,要慎重。

    Js处理

    1. 尽量放到页面尾部

    Js的加载时阻塞页面的,没下载完毕后面的内容不会出来,所以尽量避免把JS放到页面头部,按照经验估计,整个页面中所用的JS逻辑,90%都是可以放到页面尾部。

    2. 延迟加载(按需加载)

    很多的业务逻辑并非每次都使用也不是要立即使用,首次加载过程中仅仅加载那些必须的,只有当必要的条件触发,才去加载请求必要的JS.比如说权限验证通过,加载管理模块。点击发表文章按钮,加载与发表文章有关的验证和处理函数。

    如果写过C++的肯定会接触过动态库和静态库,这个与之类似,什么时候需要什么时候再加载,首次打开页面肯定会清净了许多,而且业务逻辑也由此分离开来,管理和维护也会方便很多,毕竟减少了那么多的耦合。

    按照BBS项目经验估计,普通页面的所有业务逻辑中需要在首次请求中加载的不到50%,我们的JS又由此砍掉了一半。

    3. 合并JS,减少请求

    请求多个小文件的效率远小于请求一个大文件的效率,因为需要多次DNS解析,多次连接,浏览器和server端也需要进行多次开启进程、权限验证和预处理,以及 http请求在数据包传递上的一些问题。

    所以尽量避免在页面中加载一堆的js 文件,需要先讲需要的小的JS合并成一个大的JS文件统一输出,页面因此被卡住的时间肯定会减少很多。

    为了提高开发效率,合并建议不要每次都手动来进行,导致之后维护成本很大,相信些个XML配置文件,确定合并规则以及依赖关系后,用程序自动合并效率会高很多,后面有我附上的一个配置示例,仅作参考形式不重要

    4. JS压缩

    此手段属前端特有,毕竟流量意味着速度,意味着金钱。是在降低代码的可读性为前提。但事物的两面性告诉我们,可读性差也意味着安全,而且可读性可以通过保存压缩前的源文件来解决。

    所谓的压缩,就是把场的变量名换成短的变量名,去掉没用的空格和换行符,从而节省我们JS程序的长度,不过目前这种处理已经很成熟,通过搜索可以搜出很多相关的工具。不再细说

    经验值,能压缩50%以上,视程序与压缩工具而论。

    5. 尽量少用第三方库

    在我的印象中,很多框架都是很庞大20K以上,虽然很强大很方便,但如果不是做企业级应用,不要用,因为我们也许只可能用到其中很少的一部分功能却加载了整个框架。

    不过框架中的很多方法是可以提取出来滴,或者精简成一个轻量级的框架,比如说trimPath,完全可以精简到4k.

    6. 合并ajax请求

    Ajax请求的数据,如果涉及请求多种数据,尽量考虑到将其合并。

    7. 合理的使用缓存

    缓存视乎是server端的事,但是js中也是经常用的。

    一种是缓存在一个全局变量中,一些很复杂的计算和查找操作可以这样做。如果大家在使用模板类trimPath经常是需要对模板进行预处理,这种预处理的结果是可以被缓存的。这种缓存的缺点是页面刷新后数据就会失效。

    另外一种是缓存在window.name或cookie里面,经常用来缓存一些AJAX调用的结果,避免反复请求server端,比如一些用户的权限验证信息,就没必要总是调用server端接口,缓存了也就减少了请求,提高了性能,但cookie大家要慎用,存于一些数据比较小的还行,每次http请求他是占用上行带宽的。

    还有一种缓存的实现是借助于flash或其他的第三方组件,特点是可以缓存超大的数据,但是适应场景优先,需要特殊的平台支持,不过FLASH目前已经很通用了。

    8. 能静态化输出,尽量少用JS渲染输出

    页面制作

    1. 素材合并

    尽量把页面中的图片合并在一起,利用css sprite切割。这样减少了请求的次数。通常合并成3长大的图片,一张是有固定宽高的(比如说按钮),另外两张是分别横向或纵向平铺的1像素的小图,用来做背景用。

    2. CSS压缩处理

    道理同JS压缩,也是有很多工具实用的可用。

    3. 图片背景切割与平铺

    切图是很有讲究的,很多区域能切成用1像素平铺,尽量用1像素小图平铺,尽量用一个较大的图片设置成背静。

    4. 少用iframe和frameset

    首先一点frame会阻塞页面,第二,产生额外的请求,第三,如果涉及交互,增加开发维护成本,第四对搜索引擎优化不好

    5. CSS尽量放到页面头部

    浏览器只有等CSS下载完毕后,才会真正的显示页面,所以为了让页面尽快有所输出,把CSS放到头部,而且浏览器对CSS的处理时并行的,不会像JS那样会阻塞页面。

    Server处理

    1. 启用gzip压缩,约能压缩70%~80%

    2. js,css,图片添加过期头,让浏览器能缓存。能减少1/3以上的请求。

    3. 静态页面、js、css等静态文件单独迁移

    第一, 可以针对静态文件做专门优化,比如说squid反向代理,nginx代替apache做静态server。

    第二, 便于管理和维护,以后迁移和拓展方便。

    4. js、css、图片等静态文件与当前应用放到不同的域名下。

    不再传递那些无必要的cookie,减少传输。

    5. 图片服务器分多域名。

    浏览器对同一域名的只允许使用2个并发,如果页面图片过多,会由于并发排队从而阻塞页面。但域名也不能太多,会消耗DNS解析的时间,建议4个为佳。

    附加

    1. JS合并配置文件示例

    <?xml version="1.0" encoding="gb2312" ?>

    <root>

    <include>

    <list><![CDATA[qStandBottom_static]]></list>

    </include>

    <js>

    <list><![CDATA[/lib/postJs.obj.js]]></list>

    <list><![CDATA[/lib/JSON.obj.js]]></list>

    <list><![CDATA[/qmeditor/qmeditor/qmeditor/editor.js]]></list>

    <list><![CDATA[/control/subjectList/subjectWriteLib.js]]></list>

    <list><![CDATA[/control/subjectList/subjectWriteVote.obj.js]]></list>

    <list><![CDATA[/control/subjectList/naviFilter.obj.js]]></list>

    <list><![CDATA[/control/subject/checkDomain.js]]></list>

    <list><![CDATA[/control/subjectList/subjectWriteBottomGlobal.js]]></list>

    <list><![CDATA[/control/subjectList/subjectWriteBottom_asyncDeclare.js]]></list>

    <list><![CDATA[/control/subjectList/subjectWriterEditor.js]]></list>

    <list><![CDATA[/control/subjectList/subjectWriteBottom.obj.js]]></list>

    <list><![CDATA[/control/subjectList/subjectWritePhoto.js]]></list>

    </js>

    </root>

    2. 常见分析与调试工具

    IE Httpwatch

    Firefox firebug


    相关推荐

    熊掌号天级收录正式下线
    熊掌号天级收录正式下线

    百度资源平台发布公告:熊掌号的移动专区的小时/周级提交、天级提交都将下线。1、小时/周级提交:将于本周四下线,此后请在搜索资源平台-搜索服务-资源提交-链接提交...

    4个月前 (04-21) 爱上技术导航

    一个不会写代码的纯SEO优化排名方法
    • 一个不会写代码的纯SEO优化排名方法
    • 一个不会写代码的纯SEO优化排名方法
    • 一个不会写代码的纯SEO优化排名方法
    • 一个不会写代码的纯SEO优化排名方法
    互联网平台付费运营套路解析
    • 互联网平台付费运营套路解析
    • 互联网平台付费运营套路解析
    • 互联网平台付费运营套路解析
    • 互联网平台付费运营套路解析
    Google搜索停止收录Flash网页
    Google搜索停止收录Flash网页

    谷歌搜索停止收录Flash网页。2020年底彻底停止Flash服务支持。近期,谷歌浏览器内部再次推送谷歌搜索彻底停止Flash服务支持的信息,计划2020年底前...

    4个月前 (04-17) 爱上技术导航

    长文网站为什么要设置“阅读更多”按钮?
    长文网站为什么要设置“阅读更多”按钮?

    一、从产品角度1.引流/转化用户进入内容详情页,只显示部分内容,如果对这篇文章感兴趣,通过点击“阅读更多”按钮,阅读剩余内容的设置,可以为网站带来一定的引流和...

    4个月前 (04-17) 爱上技术导航

    seo招聘 创业公司眼中的SEO和SEM
    seo招聘 创业公司眼中的SEO和SEM

      什么是搜索引擎营销?  首先在讲SEO和SEM之前,我们需要了解什么是搜索引擎。以Google为首的搜索引擎,会以搜索关键词为基础在网站上进行排名显示。排名...

    4个月前 (04-08) 爱上技术导航

    南京seo BC排名优化_排名实战教程!

      第一步:xyft关键词分析,竞争对手分析  1:先去挖掘一下这个词的下拉和相关搜索,下拉词有:xyft官网、xyft计划软件、  xyft开奖、xyft是哪个国家的。相关词有:xyft开奖/xyf...

    黑帽seo逆冬:新站进入百度沙盒,怎么办

    黑帽seo逆冬:新站进入百度沙盒,怎么办!  1.保证网站没有关键词堆砌  这里为什么要强调关键词堆砌的现象呢?大家应该知道清风算法吧,这个算法,导致了很多老站出现了降权,这也说明了搜索引擎对关键词的...

    北京seo优化:想学SEO还是先看看这个吧
    北京seo优化:想学SEO还是先看看这个吧

      在北京不管你是通过什么方法了解了SEO这个行业,并且你还想学习SEO,那么把你的思想工作做通,请把下面这些问题给想透彻,再下定决心学习SEO吧。  一、学习...

    4个月前 (04-08) 爱上技术导航

    百度信风算法说明与讲解
    百度信风算法说明与讲解

      在百度官方给出的例子中,无论PC端还是移动端,都是使用了点击“下一页”跳转到站内频道目录页。  百度信风算法即将上线  我们很多SEOer可能也深有体会,在...

    4个月前 (04-08) 爱上技术导航

    取消回复欢迎 发表评论: