首页 > 代码库 > 前端设计师---优化页面的加载速度
前端设计师---优化页面的加载速度
一：从脚本入手的优化：
删除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。
前端设计师---优化页面的加载速度