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

释放双眼,带上耳机,听听看~!
javascript如何做seo优化_前台javascript速度优化总结01两个基本点1.择重避轻,有所取舍。l核心优先通常来讲,系统是都是庞大的,不要太完美主义,先抓住重点,理解那些是我们的核心页面,那些页

目录

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

    %title插图%num

    01

    两个基本点

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

    l 核心优先

    一般来说,系统是巨大的,不太完美,首先抓住关键点,理解这些是我们的核心页面,这些页面对我们来说是最重要的,这些页面访问最高,核心优先。

    l 核心优先

    一般来说,系统是巨大的,不太完美,首先抓住关键点,理解这些是我们的核心页面,这些页面对我们来说是最重要的,这些页面访问最高,核心优先。

    l 主要问题是抓住瓶颈。

    治病要医本。在优化之前,需要仔细分析,抓住主要瓶颈,对症下药。优化这么多处方,不要全部使用,通常几个可以达到效果。

    2. 简单有效是硬道理

    事情越简单,越容易控制,越不容易出错,尽量避免系统设计太大,太复杂,记住,这是做产品,而不是从事研发。许多看似愚蠢的方法往往更有效。

    引用新技术、新方法有一定的风险,要慎重评估。

    02

    Js处理

    1. 尽量放在页面的末尾

    Js如果页面在加载过程中被堵塞,未下载后的内容将不会出来,因此尽量避免使用JS放在页面的头部,根据经验估计,整个页面使用JS90%的逻辑可以放在页面的末尾。

    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渲染输出

    03

    页面制作

    1. 素材合并

    尽量把页面中的图片合并在一起,利用css sprite切割。

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

    03

    页面制作

    1. 素材合并

    尽量将页面中的图片合并在一起使用css sprite切割。这减少了要求的次数。通常合并成3张生长图片,一张是固定宽度(如按钮),另外两张是横向或纵向铺设的1像素图片,用于背景。

    2. CSS压缩处理

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

    3. 切割和平铺图片背景

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

    4. 少用iframe和frameset

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

    5. CSS尽量放在页面的头部

    只等浏览器CSS下载后,页面会真正显示,所以为了让页面尽快输出,把CSS把它放在头上,浏览器对准CSS并行处理,不像JS这会阻塞页面。

    04

    Server处理

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

    2. js,css,将过期头添加到图片中,以缓存浏览器。

    04

    Server处理

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

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

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

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

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

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

    不再传达那些不必要的东西cookie,减少传输。

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

    同一域名的浏览器只允许两个并发,如果页面图片太多,页面就会被并发排队阻塞。但域名也不能太多,会消耗DNS建议分析四个时间。

    05

    附加

    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>%title插图%num

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

    %title插图%num<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

    给TA打赏
    共{{data.count}}人
    人已打赏
    SEO

    Google Blogger十大SEO优化技巧

    2022-8-6 15:07:41

    SEO

    Python与SEO,三大SEO网站查询工具关键词查询收集源码!

    2022-8-6 15:08:41

    0 条回复 A文章作者 M管理员
      暂无讨论,说说你的看法吧
    个人中心
    购物车
    优惠劵
    今日签到
    有新私信 私信列表
    搜索