首页 > 代码库 > 前端设计师---优化页面的加载速度

前端设计师---优化页面的加载速度

一:从脚本入手的优化:

删除javascript中不必要的注释,简洁优化代码是必须养成的好习惯,尽量不要将函数的调用直接加在HTML标签中<div onclick="">这种用法不被提倡。尽量使用js动态添加,减少标签污染,提高代码的可复用性。

合并相似的js代码,或者可以直接封装成函数,既提高代码复用性,又省去加载脚本的时间。

引入JavaScript 编写的 jQuery 插件Lazy Load,它可以延迟加载长页面中的图片。在浏览器可视区域外的图片不会被载入,直到用户将页面滚动到它们所在的位置。例如本人的破折君博客就采用这个图片延迟加载功能。

Script中的Defer属性

如果是编写脚本的时候加入defer属性,那么浏览器在下载脚本的时候就不必立即对其进行处理,而是继续对页面进行下载和解析,这样会提高下载的性能。
这样的情况有很多种。比如你定义了很多javascript变量,或者在引用文件(.inc)中写了很多的脚本需要处理,那不妨在这些脚本中加入defer属性,对性能的提高肯定有所帮助。

二:从HTML标签入手的优化:

HTML标签中一些默认的属性可以省略,例如<input type="text">可以不用写,input的默认属性即为text。例如<form method="get">可以省略,因为默认属性就是get.

<head>中字符集以及<meta>字符编的完整准确定义与声明会减少页面加载过程中的渲染次数,

三 :从CSS入手的优化:

标签的CSS样式中,img标签的height和width如果提前设定的话,会在浏览器加载页面时省去计算图片尺寸,从而提高页面的加载速度。

直接使用例如sass,compass这种CSS工具,减少代码的冗余。

整合CSS代码:比如margin-left:0px;margin-right:10px;;margin-top:20px;写成margin:20px  10px 0 0 ;

使用雪碧图工具Sprite将同类的图片整合在一起,减少页面的请求加载图片的次数。

提前定义图片的大小,减少加载过程中计算图片大小的时间。

选择合适格式的图片:我们通常都用JPG PNG 或者GIF。

 

前端设计师---优化页面的加载速度