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

    https://blog.csdn.net/xustart7720/article/details/79960591

    1. 减少Http请求

    合并CSS、合并javascript、合并图片。

    将浏览器一次访问需要的javascript和CSS合并成一个文件,这样浏览器就只需要一次请求。图片也可以合并,多张图片合并成一张,如果每张图片都有不同的超链接,可通过CSS偏移响应鼠标点击操作,构造不同的URL。

    2. 合理设置 HTTP缓

    通过设置http头中的cache-control和expires的属性,可设定浏览器缓存,缓存时间可以是数天,甚至是几个月。

    在某些时候,静态资源文件变化需要及时应用到客户端浏览器,这种情况,可通过改变文件名实现,即更新javascript文件并不是更新javascript文件内容,而是生成一个新的JS文件并更新HTML文件中的引用。MD5缓存

    例如,很少变化的图片资源可以直接通过 HTTP Header中的Expires设置一个很长的过期头 ;变化不频繁而又可能会变的资源可以使用 Last-Modifed来做请求验证。尽可能的让资源能够在缓存中待得更久。

    3. zgip压缩

    4. 懒加载

    5. 

    浏览器会在下载完成全部CSS之后才对整个页面进行渲染,因此最好的做法是将CSS放在页面最上面,让浏览器尽快下载CSS。如果将 CSS放在其他地方比如 BODY中,则浏览器有可能还未下载和解析到 CSS就已经开始渲染页面了,这就导致页面由无 CSS状态跳转到 CSS状态,用户体验比较糟糕,所以可以考虑将CSS放在HEAD中。

    Javascript则相反,浏览器在加载javascript后立即执行,有可能会阻塞整个页面,造成页面显示缓慢,因此javascript最好放在页面最下面。但如果页面解析时就需要用到javascript,这时放到底部就不合适了。


    6. 减少cookie传输

    一方面,cookie包含在每次请求和响应中,太大的cookie会严重影响数据传输,因此哪些数据需要写入cookie需要慎重考虑,尽量减少cookie中传输的数据量。另一方面,对于某些静态资源的访问,如CSS、script等,发送cookie没有意义,可以考虑静态资源使用独立域名访问,避免请求静态资源时发送cookie,减少cookie传输次数。

  • 相关阅读:
    Useful for Android the development engineer from Github
    Compile a native C Android application
    android-non-ui-ui-thread-communications-part-5-5
    android-non-ui-to-ui-thread-communications-part-4-of-5
    Android Non-UI to UI Thread Communications(Part 3 of 5)
    webpack 配置的相关标准化
    eslint 配置规则
    移动端自己实现table的思路
    前端 转pdf的方法
    关于git 提交的一些规范
  • 原文地址:https://www.cnblogs.com/shine-lovely/p/14504461.html
Copyright © 2011-2022 走看看