zoukankan      html  css  js  c++  java
  • 常见的网站性能优化手段

    一、了解web?

    HTML创造结构,CSS表现样式,JS控制行为,三者一起形成了用户可见可操作的web页面。

    但是不同网站页面的加载速度、用户请求的执行速度却大相径庭。

    页面初始加载的HTML资源、CSS资源、JS资源、多媒体资源、数据资源等,都会影响页面的加载速度和执行速度。

    但是好的web页面不仅要简洁易懂,还要让人赏心悦目,还得有内容。

    所以前端程序员不仅得会写代码,还得注重网站优化和网站安全,更得保证用户体验。

    二、优化的目的是什么?

        1. 从用户角度而言,优化能够让页面加载得更快、对用户的操作响应得更及时,能够给用户提供更为友好的体验。
      2. 从服务商角度而言,优化能够减少页面请求数、或者减小请求所占带宽,能够节省可观的资源。
          总之,恰当的优化不仅能够改善站点的用户体验而且能够节省相当的资源。

    三、性能优化的手段

         1、HTML优化方法

             1)使iframe的数量最小 

             2)尽量不要在HTML中缩放图像(大图片缩成小图片会浪费带宽,尽量直接用小的图片) 
         2、CSS优化方法

             1)把style样式表置于顶部head中

             2)避免使用CSS表达式(Expression) 

             3)用<link>代替@import 

             4)优化CSS Spirite

             5)削减JavaScript和CSS (使用grunt、gulp压缩CSS)

        3、JS优化方法

            1)减少DOM元素数量 

            2)把脚本置于页面底部 

            3)减少DOM访问 

            4)异步请求 Callback

         4、网站优化

            1)尽量减少HTTP请求次数 ----(文件合并、如CSS Sprites、image Map)

                  CSS Sprites是减少图像请求的有效方法。把所有的背景图像都放到一个图片文件中,然后通过CSS的ackground-position属性来显示图片的不同部分;

            2)文件压缩打包----目的是减少文件下载的体积

            3)使用缓存----设置Http Header里面缓存相关的字段,做进一步的优化(原则很简单,能缓存越多越好,能缓存越久越好。)

            4)使用CND(内容分布网络)来托管资源

  • 相关阅读:
    【皇甫】☀ 亮眼的颜色
    【皇甫】☀独一无二
    【皇甫】☀唯一
    【皇甫】☀一本好书 你值得浏览
    【皇甫】☀标题自己起 进来看像啥就是啥
    【皇甫】☀说说那些选择器
    【皇甫】☀标题被你吃了
    【皇甫】☀四套写入方案(仅供参考)
    【皇甫】☀内侧小解析---小行动(2)
    【皇甫】☀内侧小解析---小行动(1)
  • 原文地址:https://www.cnblogs.com/jiayuexuan/p/7527347.html
Copyright © 2011-2022 走看看