如何做好网站前端优化

文章出处： admin 人气：69 发表时间：2021-08-18 02:20:01

。

如何做好网站前端优化

。

1、运用浏览器缓存你的 js 和 CSS 文件：

。

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

。

ExpiresActive on

。

ExpiresDefault “access plus 1 year”

。

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

。

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

。

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

。

例如：把你的 http://www.***.cn/jquery.x.x.js 替换为 http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js，其含义在于当一个用户拜访过运用 google 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保驾护航之后速度能进步不少。