web页面性能优化及seo

Good morning~superman!今天又是充满希望的一天！

一：什么是seo呢？seo有什么用？

经常听到关于SEO，做seo排名？SEO其实就是搜索引擎优化，是一种通过特定的方法优化自己网站的自然搜索排名的方法。

也就是为了使网站更容易被搜索引擎所接受。

更深的理解是：通过seo优化，这种无需付费的基础营销方式，使自己的网站从同类网站中脱颖而出。从而获得品牌收益。

SEO可分为两类：站外SEO和站内SEO。

1、站内seo

主要包括网站的链接结构、网站的树结构和网站资源的优化（文章和产品等）。

一般的企业网站做好后，网站的树结构和链接结构基本上都做得很好，只需更新原来的内容，并做好网站里面的锚文本链接即可。

从这个角度来看，选择一个易于使用和适合SEO的企业网站建设系统是非常重要的。我们在这一点上就做得很好，包括锚文本、伪静态等等。

2、站外seo

包含友情链接和其他外部链接。

不管是友情链接、社会化书签、或者是在贴吧、知乎和论坛发帖等推广方式，其实都是在做站外锚文本。

我们的网站在搭建完成后，要做好seo优化其实就做好两点：多更新原创内容以及添加丰富的锚文本。掌握了这两点，SEO其实很简单。

不知道大家平常喜不喜欢发微博，微博最吸引人的地方就是一个全球的公众平台，我们可以从微博里获取最新的新闻资讯，

而且微博还有个热搜的功能，不知道你有没有通过发表热门话题，浏览量暴涨呢，通过我的发现，当我发与时下最热门的有关话题，我的浏览量暴涨，

曾经有一次我发表过我的见解，浏览量高达二十多万。其实很多网红也是这样吸引流量的，当下热搜什么话题最火爆，就发什么内容。

其实seo跟它很类似。是不是觉得很简单鸭。对我们程序员来说没有任何bug是我们解决不了的对吧哈哈哈哈哈。而seo仅仅是个小“bug”。

了解了seo那么我们怎么来做seo优化呢？

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个为佳。

二：web页面性能优化：

浏览器访问优化：

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

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

       减少http的主要手段是合并CSS、合并javascript、合并图片。将浏览器一次访问需要的javascript和CSS合并成一个文件，这样浏览器就只需要一次请求。图片也可以合并，多张图片合并成一张，如果每张图片都有不同的超链接，可通过CSS偏移响应鼠标点击操作，构造不同的URL。

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，这时放到底部就不合适了。

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

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 压缩工具执行压缩。

原文链接：https://www.cnblogs.com/Narkea/p/10499540.html