当前位置: 主页 > 行业新闻 > seo >

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

来源：未知日期：2017-06-23 | 分类：seo

代码优化 seo

　　两个基本点

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

　　l 核心优先

　　通常来讲，系统是都是庞大的，不要太完美主义，先抓住重点，理解那些是我们的核心页面，那些页面对我们来说是最重要的，那些页面访问量最高，核心优先。绵阳网站建设推荐阅读>>> 代码优化,

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

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

　　2. 简单有效才是硬道理

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

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

　　Js处理

　　1. 尽量放到页面尾部

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

　　2. 延迟加载（按需加载）

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

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

　　按照BBS项目经验估计，普通页面的所有业务逻辑中需要在首次请求中加载的不到50%，我们的JS又由此砍掉了一半。绵阳做网站推荐阅读>>> Html代码标签SEO优化建议,

　　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>

　　<js>

　　</js>

　　</root>

　　2. 常见分析与调试工具

　　IE Httpwatch

　　Firefox firebug

织梦DEDECMS列表页标签页分页标题SEO优化

从SEO优化角度考虑，列表页标题一样有些不好，就想着修改一下，可以从网上有很少这方面的资料，而且不是很完美。自己就动手修改了下，花了不少时间总算有点那么回事了，特记录。普通...
手机网站怎么优化，有哪些要点

来到2020年，移动互联网发展至今，手机应用遍地开花，每个企业不仅有自己的电脑端官方网站，同时还有适合用户浏览的手机网站，现在搜索引擎手机电脑端排名各不相同，那么我们怎样进行...
什么是外链优化，如何进行外链优化（基本常识你要懂）

如果你是做SEO的，自然知道外链的重要性，如果你不懂seo，绵阳蟠龙网络小编可以认真负责的告诉你，外链优化很重要，可以很显著的提供网站的权重及网站关键词的排名。什么是外链呢，就...
用三个月SEO优化获得网站排名的项目策划方案

时间：三个月 (给自己定个目标计划) 行业分析： SEO就是基于搜索引擎来做一些网站方面的调整规划，更深一层次上说是根据用户需求来做一些网站优化，满足用户需求。反之，没有用户需求的...
绵阳网站优化SEO推广服务

SEO优化有什么作用？ SEO优化是通过把网站调整成为符合搜索引擎喜好的网站，使网站排名靠前，让网站获得更多曝光率，提升企业的品牌和知名度。为网站带来大量的潜在客户流量，把握好这...
网站策划方案_企业网站建设设计制作SEO营销方案书

企业网站建设设计制作SEO营销方案书一、域名选择二、网站栏目规划三、网站设计要求四、网站功能要求五、网站推广营销方案六、综合具体情况选择服务器、网站加速服务器 2019年更严寒...
你们做网站SEO优化排名吗

网站优化SEO排名也是我们提供的服务之一，经过这几年的发展，搜索引擎的算法越来越智能，越复杂，所以我们会根据客户的预算及目的制定更为合适的网络营销方式，而且我们会根据优化的...
虚拟主机对网站SEO优化带来的影响

站长对网站的SEO优化是非常关注的，网站关键词排名的提升，也就意味着流量的增加，很多人非常注重网站结构的优化、网站页面的优化以及网站代码的优化，可你知道吗?虚拟主机对网站的优...
死链的产生的原因_死链对网站seo的影响

在学习SEO的时候我们会接触链接这个东西，在SEO界链接基本分为内链、外链（友情链接也被称为外链）、反链、死链四大类。那么，我为何要单独阐述死链这个东西呢？因为死链是当内链和外...
dedecms（织梦cms）网站SEO优化教程

DEDEcms是国内一套开源的cms程序，现在用dedecms建站的人越来越多了，所以本人觉得很有必要出品一套比较系统化的 DEDEcms优化教程来帮助大家了解和学习如何优化用DEDEcms搭建的产品。为了本套...