• 前端优化


    (1) 减少http请求次数:CSS Sprites, JS、CSS源码压缩、图片大小控制合适;网页Gzip,CDN托管,data缓存 ,图片服务器。

    (2) 前端模板 JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数

    (3) 用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能。

    (4) 当需要设置的样式很多时设置className而不是直接操作style。

    (5) 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。

    (6) 避免使用CSS Expression(css表达式)又称Dynamic properties(动态属性)。

    (7) 图片预加载,将样式表放在顶部,将脚本放在底部 加上时间戳。

    (8) 避免在页面的主体布局中使用table,table要等其中的内容完全下载之后才会显示出来,显示比div+css布局慢。
    对普通的网站有一个统一的思路,就是尽量向前端优化、减少数据库操作、减少磁盘IO。向前端优化指的是,在不影响功能和体验的情况下,能在浏览器执行的不要在服务端执行,能在缓存服务器上直接返回的不要到应用服务器,程序能直接取得的结果不要到外部取得,本机内能取得的数据不要到远程取,内存能取到的不要到磁盘取,缓存中有的不要去数据库查询。减少数据库操作指减少更新次数、缓存结果减少查询次数、将数据库执行的操作尽可能的让你的程序完成(例如join查询),减少磁盘IO指尽量不使用文件系统作为缓存、减少读写文件次数等。程序优化永远要优化慢的部分,换语言是无法“优化”的。

    请说出三种减少页面加载时间的方法。
    1.优化图片
    2.图像格式的选择(GIF:提供的颜色较少,可用在一些对颜色要求不高的地方)
    3.优化CSS(压缩合并css,如margin-top,margin-left...)
    4.网址后加斜杠(如www.campr.com/目录,会判断这个“目录是什么文件类型,或者是目录。)
    5.标明高度和宽度(如果浏览器没有找到这两个参数,它需要一边下载图片一边计算大小,如果图片很多,浏览器需要不断地调整页面。这不但影响速度,也影响浏览体验。
    当浏览器知道了高度和宽度参数后,即使图片暂时无法显示,页面上也会腾出图片的空位,然后继续加载后面的内容。从而加载时间快了,浏览体验也更好了。)

    6.减少http请求(合并文件,合并图片)。


    javascript之DOM优化
    最小化DOM访问,在javascript端做尽可能多的事。
    在反复访问的地方使用局部变量存放DOM引用。
    小心地处理HTML集合,因为他们表现出“存在性”,总是对底层文档重新查询。将集合length属性缓存到一个变量中,在迭代中使用这个变。如果经常操作这个集合,可以将集体拷贝到数组中。
    可能的话,使用速度更快的API,诸如querySelectorAll()和firstElementChild。
    注重重绘和重排版:批量修改风格,离线操作DOM树,缓存并减少对布局信息的访问。
    (1)批量修改
    (2)离线操作DOM
    (3)缓存布局信息
    动画中使用绝对坐标,使用拖放代理。
    使用事件托管技术最小化事件句柄数量。

    1. JavaScript 压缩和模块打包
    打包css文件,合并图片
    2. 按需加载资源
    资源(特别是图片)的按需加载或者说图片懒加载
    减少向服务器发出的并发请求数量
    减少浏览器的内存使用率
    减少服务器端的负载
    3. 缓存

    页面级优化
    1. 减少 HTTP请求数
    减少 HTTP请求数的主要途径包括:
    (1). 从设计实现层面简化页面
    (2). 合理设置 HTTP缓存 例子:缓存css文件和js文件
    (3). 资源合并与压缩
    CSS、 Javascript、Image 都可以用相应的工具进行压缩
    (4). CSS Sprites(合并 CSS图片)

    2. 将外部脚本置底(将脚本内容在页面信息内容加载后再加载)
    3. 异步执行 inline脚本(其实原理和上面是一样,保证脚本在页面内容后面加载。)
    4. Lazy Load Javascript(只有在需要加载的时候加载,在一般情况下并不加载信息内容。)
    5. 将 CSS放在 HEAD中
    6. 异步请求 Callback(就是将一些行为样式提取出来,慢慢的加载信息的内容)
    7. 减少不必要的 HTTP跳转
    8. 避免重复的资源请求
    代码级优化
    1. Javascript
    (1). DOM
    (2). 慎用 with
    (3). 避免使用 eval和 Function
    (4). 减少作用域链查找
    (5). 数据访问
    (6). 字符串拼接
    2. CSS选择符
    3. HTML
    4. Image压缩


    把样式表置于顶部
    把脚本置于页面底部
    避免使用 CSS 表达式(Expression)
    使用外部 JavaScript 和 CSS
    削减 JavaScript 和 CSS
    用 <link> 代替 @import
    避免使用滤镜
    剔除重复脚本
    减少DOM访问

    Coockie:

    减小Cookie体积
    对于页面内容使用无coockie域名

    图片:

    优化图像
    优化CSS Spirite
    不要在HTML中缩放图像
    favicon.ico要小而且可缓存

  • 相关阅读:
    理解WebKit和Chromium: Chromium的多线程机制
    java.lang.IllegalStateException: Web app root system property already set to different value
    MySQL 深入剖析 char varchar 类型,有了VARCHAR,为什么还要有CHAR?
    Ubuntu包管理命令大全,包括apt命令和dpkg命令
    GHashTable不能以字符串作为key,可以使用data list来代替
    LFS全过程历险
    忘记了root密码怎么办?
    ArchLinux安装几天的经验总结、bug修正和软件配置
    mplayer加载srt字幕乱码,或是下划线等问题解决
    从串口登录Linux主机
  • 原文地址:https://www.cnblogs.com/yll134/p/6226821.html
Copyright © 2020-2023  润新知