• 前端学习之---性能优化


     今天学习到了性能优化这一块,写个随笔记录一下学习的心得。

    众所周知,基本每个项目都需要经过性能优化这一步,所谓性能优化,通俗的理解就是让网页加载迅速,能及时响应用户的各种操作,用户体验友好。

    性能的优化,这要从以下三个方面优化:

    一、页面级优化

    1、减少http请求

      http请求次数的减少,能大大的减少响应的时间。减少http请求可以从一下几个方面着手:合并js,css文件并且把css文件放在,head内,js文件放在最后。使用css sprites。

    2、静态资源缓存

    有时候很多资源都没有改变,当我们每次加载页面时都去请求下载这些资源的话很浪费时间,所以对于一些不变的静态资源,可以设置较长的缓存时间,每次我们加载页面时可以直接从缓存中读取而不需要再次下载,这样能节约很多时间和带宽。

    3、异步执行内部脚本

    内部脚本会和外部脚本一样阻塞浏览器的渲染,所以当有大量内部脚本时页面会有出现空白,为了避免这种情况发生,异步执行内部脚本,使得在执行内部脚本的同时也能渲染页面。

    4、懒加载

    在js很多库中,有时候我们只用到一个库中的某些技术,这时就可以使用懒加载技术,用到什么加载什么,不浪费资源,减少加载时间。

    5、避免不必要的http跳转

    6、减少cookie的发送

    每次的请求和相应都会包含cookie,大量的cookie会减慢数据的传输,所以需要考虑那些资源需要填入cookie,像静态资源,没有必要添加cookie

    7、尽量避免使用iframe

    iframe会组织页面的加载。

    二、服务器端优化

    1、使用CDN

    像一些大型的网站,基本都有自己的CDN。对于静态资源,最好上传到最近的CDN,这样访问时下载的速度会提高很多。

    2、添加expires和cache-control

    像修改频率较低的资源,可以设置较长的过期时间,这样每次请求的时候可以从缓存中读取,减小带宽流量,降低浏览器的压力。

    3、gzip压缩文件

    gzip压缩可以时美容大小减少70%,大大减少带宽流量。

    4、配置etags

    配置etags可以使服务器判断一个文件是否改变了,从而避免下载没有修改的文件

    三、编码优化

    1、DOM

    在dom操作中,需要注意的是,像HTML collection等操作,最后用局部变量过滤一下,不然像每次使用document.forms操作时,都会全局查找一次,这样会当dom没有发生改变时,会大大的浪费时间。

    2、避免全局查找

    当需要多次查找一个全局变量时,最好用局部变量过渡一下,减小查找的范围和查找的时间。

    3、避免使用eval和Function(速度很慢)

    4、尽量减少循环的次数

  • 相关阅读:
    ASP.NET MVC5+ 路由特性
    老李分享:大数据,数据库,数据仓库之间是什么关系
    老李分享:DBA
    老李提问:开源家族你认识几个
    米尔格伦连锁信实验
    老李分享:六度分隔理论
    三者关系
    老李分享:JDK,JRE,JVM区别与联系
    Linux简介与厂商版本下
    Linux简介与厂商版本上
  • 原文地址:https://www.cnblogs.com/qiaoyun/p/7504530.html
Copyright © 2020-2023  润新知