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)为你的站点提供静态资源内容服务,以减少他们加载的时间。

  • 相关阅读:
    每天一道LeetCode--141.Linked List Cycle(链表环问题)
    每天一道LeetCode--119.Pascal's Triangle II(杨辉三角)
    每天一道LeetCode--118. Pascal's Triangle(杨辉三角)
    CF1277D Let's Play the Words?
    CF1281B Azamon Web Services
    CF1197D Yet Another Subarray Problem
    CF1237D Balanced Playlist
    CF1239A Ivan the Fool and the Probability Theory
    CF1223D Sequence Sorting
    CF1228D Complete Tripartite
  • 原文地址:https://www.cnblogs.com/lakeInHeart/p/7419182.html
Copyright © 2011-2022 走看看