zoukankan      html  css  js  c++  java
  • 前端设计师---优化页面的加载速度

    一:从脚本入手的优化:

    删除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。

  • 相关阅读:
    真不容易...终于我也有了个js的语法高亮
    持久层相关概念
    测试语法高亮显示
    BSTR简介和内部结构
    Debugging JavaScript in Your Applications
    Google Analytics 跟踪代码迁移手册
    我对事件驱动的理解
    imagettftext 可调整字间距输出
    投票机的实现及相关技术
    js光标定位到文本末尾
  • 原文地址:https://www.cnblogs.com/lihongfei0602/p/3993702.html
Copyright © 2011-2022 走看看