网站加载优化方法之一
来源:互联网 发布:淘宝大股东是谁 编辑:程序博客网 时间:2024/05/05 06:29
现在的插件大大提升了我们开发的速度,但是同时,插件使用过多也会造成加载过慢的情况。
1 一般我们建议把非必须先执行的JS代码放在最后,因为JS文件的加载是阻塞性的,当执行到这里的时候,浏览器会等待JS加载完毕再往下运行,当然我们也可以选择异步加载JS,
async的定义和用法(是HTML5的属性)
async 属性规定一旦脚本可用,则会异步执行。
<script type="text/javascript" src="demo_async.js" async="async"></script>
即使文件再小,也是需要加载的,加载就必然耗费时间,所以尽可能少用插件。
2 另外有一些库我们又必不可少,比如JQ,或者MUI,BOOTSTRAP等等,这些库或者框架所包含的文件
即使有min的版本,它也占了一百甚至两三百K,这对加载速度来说影响是很大的,所以如果官方有给出CDN的地址,就尽量选择使用官方提供的CDN而不要自己下载到本地服务器。
3 压缩、格式化文件
我们编程过程中,产生的空格本身也是占字符的,所以在项目完成后自己也可以做一个压缩处理,形成min版本文件,尽管这个效果看起来不是特别明显,但我觉得还是有必要的。可以直接进入站长工具压缩,
要注意的是,压缩工具是有可能导致格式错乱的,我不知道是个人没有复制完整还是什么原因,压缩了两个结果文件都显示少了一些结尾符之类的,所以我就没有压缩了,如果要使用这个功能的请检查压缩后的文件是否发生错误。
4 GZIP压缩
开启Gzip压缩可以提高40%-80%的压缩率,是的,这是个重点,
查看服务器是否开启Gzip压缩可以进入
http://tool.chinaz.com/Gzips
如果没有开启则可以将服务器Gzip压缩开启,IIS,APACHE等都有这个功能
这里讲一下关于wampserver中 apache的开启
首先打开apache中的配置文件http.conf:
去掉 #LoadModule headers_module modules/mod_headers.so 前面的注释#
去掉 #LoadModule deflate_module modules/mod_deflate.so 前面的注释#
去掉 #LoadModule filter_module modules/mod_filter.so 前面的注释#
接着在http.conf配置文件的文末的include之前 加入以下代码:
<IfModule mod_deflate.c>AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/x-javascript application/javascript application/json #对指定的内容进行压缩,压缩方式为默认的一个方法</IfModule>
重启wampserver ,即开启了gzip网页压缩。
要注意的是,不要开启图片格式的压缩,因为压缩比率很大,对图片影响也大。
5 浏览器会缓存JS等文件,如果有需要可以设置meta 为no-cache模式,但我发现我的360浏览器大部分情况都没有缓存这些文件,我还没搞懂这是怎么一回事,而谷歌浏览器有缓存一些文件,而这些文件都是通过CDN加载进来的,查了一下response header发现存在cache-control:max-age=691200
也就是缓存存在的最大时间,在这里我也想知道,请求CDN的资源是如何返回这个头部内容的?接下来还会慢慢更新
- 网站加载优化方法之一
- 网站优化的方法之一:网站更新
- 优化网站加载速度的一些方法
- 网站加载优化
- 网站优化(改变图片加载)
- 如何优化网站加载速度
- 高性能网站优化之一内容部分
- 网站优化方法
- 网站性能优化方法。
- 网站优化--页面快速加载,显示
- 非阻塞JavaScript脚本加载【优化网站】
- blog网站中的图片加载优化问题
- 优化网站页面的加载速度技巧
- 优化网站加载时间(GTmetrix)
- 优化网页加载速度方法
- PHP网站基础优化方法
- 网站文章内容的优化方法
- 网站优化十大方法-----
- java -- Map集合取出元素的两种方式
- 用TCL调用Hypermesh中的求解器
- java两个比较常用的工具方法代码
- 通过判断圆台边直径大小选择倒圆的角
- 项目部署,同时开启两台tomcat服务,应修改的端口号(3处)
- 网站加载优化方法之一
- c++实验6-数组操作
- 分页存储管理的基本方法(相关计算)
- 基础练习 回文数
- saprk rdd使用中遇到的一个典型问题
- html加载外部css、js的问题
- C++第6次实验
- 2016年华为面试题第一题
- TRUNCATE TABLE 与 DELETE在删除整个表的所有记录时的区别