前端优化的技巧

最近有几个搭档开通了自己博客,但却诉苦说因为的买的虚拟空间,所以自己博客网站翻开速度很慢。关于这种景象,依照一般的状况来看,一个网

最近有几个搭档开通了自己博客,但却诉苦说因为的买的虚拟空间,所以自己博客网站翻开速度很慢。关于这种景象,依照一般的状况来看,一个网站的拜访 翻开速度的快与慢,满是看这个网站运用的空间装备,要是这个空间主机的装备不错,那么你的网站拜访速度就会很快;相反,要是你的空间主机的装备很烂,那么 你的网站拜访速度就会很慢。其实抛去空间主机的装备要素不谈,咱们站长或许搜索引擎优化人员也能够从页面制造方面着手,然后从现有的资本上进步网站的拜访速度。 假如你还不知道如何才干优化网站来进步网站的拜访速度,那就看一下马海祥博客为你总结出来的六个小窍门吧,期望对你能有所协助!

  1、利用浏览器缓存你的 js 和 CSS 文件:

  在网站根目录 .htaccess 中参加以下代码

  ExpiresActive on

  ExpiresDefault “access plus 1 year”

  这段代码的意思是对 jpg|gif|png|css|js 发送 header 缓存头,进行一年的缓存、在浏览器不运用 ctrl+F5 强制改写时,会一直缓存到时刻时刻完毕,仅有惋惜的是假如你更改了js或许css文件有必要把曾经的途径或许文件名更改,能够这么 base.js?ver=(x) 这种方法下次浏览器就会主动读取并缓存。

  2、把你的 .js 库文件地址替换成 Google CDN的地址:

  跟着 jquery 和 mootools 等js库的运用需求加载的.js文件越来越多也越来越大,一般传统的网站是上载到网站自身的目录。但关于一个接近70多KB的jquery.js体积的确不利于网站响应速度的提升,此刻就应当运用Google API 。

  例如:把你的 http://www.***.cn/jquery.x.x.js 替换为 http://ajax.谷歌apis.com/ajax/libs/jquery/1.4.4/jquery.min.js,其意义在于当一个 用户拜访过运用 谷歌 api 的网站以后,再次拜访别的调用了该api地址的网站就不需求再次加载该文件了。然后到达提速的意图。

  不单是jquery库,别的诸如mootools yui 也能够运用这种方法。

  3、精简和优化你的 js 和 CSS:

  尽管有了缓存和gzip保驾护航,可是关于 js 和 css 的优化却也是有必要的。咱们写的javascript脚本和 css 代码都是经过缩进和换行的,合适人类阅览,可是浏览器履行这些脚本不并需求这些无意义的空格和换行。所以咱们应当去掉这一些空格换行,乃至缩短 javascript和 css 里面的变量。诸如此类的优化东西有 YUI Compressor 和 Closure Compiler 。这两个东西都是根据 java 的,运用应当装置jdk而且设置 JAVA_HOME 。(关于非程序员的网站管理员而言的确有点艰难)

  此东西能够不用在本地装置jdk,直接上载 js 和 css 文件进行紧缩,可选择是选用 YUI Compressor 或 Closure Compiler 。

  4、GZIP 紧缩你的 JS 和 CSS 文件:

  紧缩js和css能够经过服务器动态脚本进行也能够更简单的运用apache服务器能够在网站根目录 .htaccess 中参加以下代码

  AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/x-javascript application/json

  Header append Vary Accept-Encoding

  这段代码的意思是调用服务器的紧缩模块对以上文件输出之前进行GZIP紧缩,gzip的紧缩以后一切文件都应当能削减30%以上的体积。特别是关于很多运用js的博客有了gzip保驾护航以后速度能进步不少。

  5、运用css sprites兼并图像

  一个网站常常运用小图标和小图像进行美化,可是很惋惜这些小图像占用了很多的HTTP恳求,因而能够选用sprites的方法把一切的图像兼并成一张图像 ,能够经过有关东西在线兼并,也能够在ps中兼并。

  6、优化你网站图像:

  很多运用的图像和图标尽管能够给网站带来美轮美奂的作用,图文混编更是一种十分艳丽的博文展示方法。可图像的体积的确不是很给力,jpg是一种 有损紧缩格局,而png尽管是无损的,但缺憾是体积颇大。为了削减图像体积到达最快的下载速度,每一张图像上载前应当优化一下体积。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏章志青的专栏

如何通过代码分析精简用例(2)

上一次分享的如何通过代码分析精简用例主要是针对 WEB 侧逻辑复用,从而精简冗余用例的案例。本次的案例分享是希望通过对 SVR 代码的分析,完成用例执行的精简。

550
来自专栏斑斓

MongoDB的数据建模

MongoDB是一种面向Document的NoSQL数据库,如果我们还是按照RDB的方式来思考MongoDB的数据建模,则不能有效地利用MongoDB的优势;然...

3096
来自专栏生信宝典

在线浏览器,在线PS,在线AI,在线编程 ...

现在越来越习惯使用在线工具,拿来即用,用完即走。只要有网,在哪都可以用。比如我们推出的在线绘图 (http://www.ehbio.com/ImageGP)已经...

813
来自专栏Android机动车

手把手教你写高质量Android技术博客,画图工具,录像工具,Markdown写法

作为程序员,写博客是一件很有意义的事情,可以加深自己对技术的理解,可以结交更多的朋友,记录自己的技术轨迹,而且分享可以让更多的人从中受益,独乐乐不如众乐乐嘛。

871
来自专栏BestSDK

一文看懂 iOS 11所有新功能:文件管理器、多任务处理、全新文件 App等

全新文件 App 通过这个App,可以把各类文件汇集在一起,浏览、搜索和整理文件。用户最近使用过的各种文件都会在一个专属的位置,以方便查看。除了 iPad 上的...

2988
来自专栏FreeBuf

那些年绕过的反爬手段

笔者第一份工作就是以java工程师的名义写爬虫,不得不说第一份工作很重要啊,现在除了爬虫不会干别的,到现在已经干了近5年了,期间经历了不少与反爬策略的斗争。最近...

1044
来自专栏小白课代表

Autodesk Navisworks 2014 安装教程。

Autodesk Navisworks软件能够将AutoCAD和Revit®系列等应用创建的设计数据,与来自其它设计工具的几何图形和信息相结合,将其作为整体的三...

553
来自专栏极乐技术社区

『教程』微信小程序canvas辑合(教程+Demo+跳坑)

社区里有一群canvas爱好者,比jsh5css,安静的小智,jeffer等同学他们在canvas方面都有着自己的学习心得和见解。 但是极乐叔发现在小程序开发学...

8149
来自专栏小白课代表

Autodesk Navisworks 2015 安装教程。

Autodesk Navisworks软件能够将AutoCAD和Revit®系列等应用创建的设计数据,与来自其它设计工具的几何图形和信息相结合,将其作为整体的三...

622
来自专栏Windows Community

UWP 手绘视频创作工具技术分享系列

开篇先来说一下写这篇文章的初衷。     初到来画,通读了来画 UWP App 的代码,发现里面确实有很多比较高深的技术点,同时也是有很多问题的,扩展性,耦合,...

32711

扫码关注云+社区