zoukankan      html  css  js  c++  java
  • 前端页面性能优化

    部署(如何进行网站性能优化)

    站点在提供服务的时候,尽可能的可靠和快速。

    性能

    提高性能,最简单的也是最显著的方法就是:减少HTTP请求数量。每一个HTTP请求除了有TCP开销以外,还含有大量的头信息。保存最小的独立链接数可以保证用户的页面加载速度更快。这显然涉及到了服务器需要传输的数据量的问题。让页面和其起源文件保持较小的体积将减少网络用时--对任何互联网上的应用而言,这才是真正的瓶颈。

    按照静态资源的分类,可以分为js、css、img,那么就可以从这三个方面入手。

    将多个脚本文件合成一个脚本文件,或者将多个css合并成一个样式表,能减少页面渲染所需要的Http链接数量。使用css Sprites 技术合并多张小图为一张大图,然后使用css的background-image和background-position属性在页面中显示对应的图片。只需要设定图片需要显示的尺寸和背景位置的偏移坐标。

    为了加速页面渲染,现代浏览器并行下载所需要的资源。但是,在所用的样式表和脚本下载完成之前,页面是不会开始渲染的,有些浏览器更是变本加厉,在处理任何javascript文件时,都会阻塞其下载其他资源的下载。解决方案为设置属性defer(es5之前),或者设置async(es5)

    缓存

    缓存就是将最近请求的资源存储到本地,以便接下来的请求能够从磁盘中使用这些资源,而不用再次去下载。明确地告诉浏览器什么是可以被缓存的是很重要的。有些浏览器会使用自己默认的缓存策略,但也不能就此完全依赖它,同时也要兼顾其他的浏览器。

    此处,需要在后台在http响应头中,相对当前日期设置一个表示“很远的将来”失效的日期。但是,当文件本缓存之后,当当前资源被修改之后,浏览器的资源不是最新的,而强制刷新有时候都无法完成(在服务端也有缓存),此时可以在引用资源文件的url查询参数中添加文件修改的时间,即添加所谓的版本号。当然,此处也可以设置last-modifed。

    代码压缩

    此处的压缩主要指的是借助于前端工具的压缩,压缩js,css,将小图片转换为base64、、、

    Gzip

    浏览器通过在发送请求的时候增加Accept-Encoding头信息来识别自己支持的压缩方式:

    Accept-Encoding:gzip,deflate
    

    如果服务器看到这条头信息,并且支持列出的压缩方式,它将会对相应结果进行压缩,并且通过Content-Encoding头信息表示其压缩方式。

    Content-encoding:gzip
    

    然后,浏览器才能正确地解码,得到解码后的相应。显然,压缩数据可以减少网络传送的时间,Gzip通常能减少70%的体积,巨大的体积压缩减极大地加速了网站的加载速度。

    使用CDN

    内容分发网络(CDN)为你的站点提供静态资源内容服务,以减少他们加载的时间。

  • 相关阅读:
    How to install php 7.x on CentOS 7
    Azure新建的CentOS设置root账户的密码
    远程激活.NET REFLECTOR(不能断网)
    C# WebApi 配置复杂路由不生效的问题
    在Mac上激活Adobe产品
    WIN10更新后出现无法联网的问题
    Mac安装SSHFS挂载远程服务器上的文件夹到本地
    输入三个数值,输出其中的最大值和最小值
    登录接口,只为自己能尽快吐槽一下这段代码
    随手记
  • 原文地址:https://www.cnblogs.com/lakeInHeart/p/7419182.html
Copyright © 2011-2022 走看看