一站式百度SEO排名优化!-找老刘博客 低投入,高转化,精益求精、一丝不苟:旨在提供更好的SEO服务!

首页>>SEO技术

「Web前端」合并css和javascript有什么意义,有哪些常用方法?

首页 2019-08-20 SEO技术 1573 ℃Tags: web前端


做搜索优化除了发文章和外部链接还有哪些工作能做?至今还能听到小白们这样的疑问,其实SEO在很多时候与Web前端分不开(之前提过【手机站加载速度怎么优化?】),关于seo基础知识网上随随便便就能搜索到一大把,本人仅就一些难点和要点,总结SEO和web网站性能提升及用户体验等方面的技术要点,主要内容来源自本人过往的项目经验以及自我梳理,由衷的希望大家每天都有进步!

image.png

对刚从事SEO或者Web前端的朋友来讲,web性能优化或许有些遥远,但是不得不提的是,真正的竞争力就来源于知识体系的错位运用能力,脱颖而出才能与其他人拉开差距,当然性能优化大多时候需要经验的积累,但是重要性可能还远远大于基础之处,换句话来说:基础决定下限,性能和效率的差距决定上限!

image.png

一、为什么要合并CSS/JS,合并css和javascript有什么意义?

合并JS和css是为了减少http请求,但是当浏览器第一次访问该网站后,就会将JS和CSS缓存起来,那么合并js和css的意义还大么?耗费的资源和时间,是否值得?

动态加载的基于时间的缓存,除非客户清除缓存,否则不会访问服务器。

否则:

如果是基于时间的缓存,在过期之前刷新会请求服务器。

如果是基于ETag的缓存,每次都会请求服务器。


为什么要压缩?不同于大部分放在服务端的后台代码,前端所有的文件程序代码都是要通过浏览器下载下来运行使用,这就牵扯到网络和请求延时,所以前端文件的精简和压缩决定了前端性能的第一步。

合并css和javascript有什么意义

JS合并的必要性分析

  • 效率因素

一般来说,在一个WEB工程中,需要使用大量的JS,这些JS可能来自许多提供者。

而在页面访问时,每次访问资源都要发起一个http请求,因此,即使文件已经缓冲,也需要发出一次http请求来确认文件是否被改变过。如果js个数比较少,那么没有什么问题,但是当JS文件数目比较多的时候,就会导致页面访问效率下降。如果能把所有的js都合并为一个文件,那么就可以节省几百毫秒,甚至几秒的时间,视网络状况而定。如果不需要做任何人为处理,就节省下来这些时间,无疑是相当有意义的。

  • JS引入顺序问题

如果说,效率问题还只是用户体验的问题,而JS引入顺序问题,就会导致你的页面是否可以执行的问题。我们知道,如果JS如果有依赖其它JS库,则被依赖的JS库就要放在依赖的JS库的前面,否则就会发生js错误。当引用的JS库比较小的时候,问题当然不大,但是做企业应用的时候,要用到的JS非常多,甚至在开发后期或维护期还会增加新的JS,这时稍有不慎,就会出现JS引入顺序问题。


二、合并、压缩的常用方法

  • html的压缩

HTML代码压缩就是压缩这些在文本文件中有意义,但是在HTML中不显示的字符,包括空格,制表符,换行符等,还有一些其他意义的字符,如HTML注释也可以被压缩。常用工具有很多,比如站长工具等。

我们来看看百度首页是有做html压缩的

image.png

  • JS的压缩和混乱

1566268458103876.png

首先来看一下百度首页对js的压缩,主要对js做以下四件事情:无效字符的删除(空格,回车),剔除注释,代码语义的缩减和优化(将一些变量的长度进行缩短等),代码保护(js代码是可以在客户端看到的,将js代码混乱后就变的不容易看懂,对代码进行了一定的保护作用)。

JS代码压缩的方法有如下几种:使用在线网站进行压缩, nodejs提供了html-minifier工具对html中的js进行压缩,使用uglifyjs2对js进行压缩.

  • CSS压缩

还是来看一下百度首页的css压缩代码,去掉了回车和空格,还做了无效代码删除(注释,无效的字符),css语义合并。

1566268766754537.png

CSS代码压缩的方法有如下几种:使用在线网站进行压缩, 同构构建工具比如(fis3,webpack)自动压缩,nodejs提供了html-minifier工具对html中的css进行压缩,使用clean-css对css进行压缩。


总结: 

文件合并方法挺多,合并方式和工具也是五花八门,当然也不是每个文件都需要合并,具体情况具体对待,实际项目过程中取舍无处不在,更需要考虑后期维护的便利性,最后才是最终的执行方案。下面是优化网站性能的14条规则

1. 尽可能的减少 HTTP 的请求数[content]
2. 使用 CDN(Content Delivery Network)[server]
3. 添加 Expires 头(或者 Cache-control )[server]
4. Gzip 组件[server]
5. 将 CSS 样式放在页面的上方[css]
6. 将脚本移动到底部(包括内联的)[javascript]
7. 避免使用 CSS 中的 Expressions[css]
8. 将 JavaScript 和 CSS 独立成外部文件[javascript] [css]
9. 减少 DNS 查询[content]
10. 压缩 JavaScript 和 CSS (包括内联的)[javascript] [css]
11. 避免重定向[server]
12. 移除重复的脚本[javascript]
13. 配置实体标签(ETags)[css]
14. 使 AJAX 缓存


搜索
分类
热门标签
  • 首页
  • 电话
  • QQ
  • 联系老刘手机
    1043025812
    联系老刘微信
    扫描微信二维码