• 提升页面性能的方法


    1、原则
    (1)多使用内存、缓存或者其他方法。
    (2)减少cpu占用,减少网络。

    提升页面性能的方法有哪些?

    一、加载页面和静态资源
    1、静态资源压缩合并,减少http请求。
    (1)减少http请求数量
    (2)减少请求资源大小
    2、非核心代码异步加载。
    3、静态资源缓存:通过链接名称控制缓存,只有内容改变的时候,链接名称才会改变。
    4、利用浏览器缓存
    5、使用cdn让资源加载更快
    6、预解析dns
    7、使用ssr后端渲染,数据直接输出到html中(ssr:server site render)
    二、页面渲染
    1、css、js及放置位置
    (1)尽量避免在HTML标签中写style属性
    (2)css放前面,js放后面。
    (3)避免使用CSS Expression
    2、图片
    (1)避免图片和iFrame等的空Src。空Src会重新加载当前页面,影响速度和效率
    (2)懒加载(图片懒加载,下拉加载更多)

    3、dom操作
    (1)减少dom查询,对dom查询做缓存。

    (2)减少dom操作,多个操作尽量合并在一起执行。

    (3)用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能
    4、事件
    (1)尽早执行操作(如DOMContentLoaded)
    (2)事件节流

    5、代码细节优化
    (1)用hash-table来优化查找
    (2)多个变量声明合并
    (3)少用全局变量
    (4)避免全局查询
    (5)避免使用with(with会创建自己的作用域,会增加作用域链长度)
    (6)用setTimeout来避免页面失去响应
    三、移动端性能优化
    1、css
    (1)不滥用Float。Float在渲染时计算量比较大,尽量减少使用
    (2)不滥用Web字体。Web字体需要下载,解析,重绘当前页面,尽量减少使用。
    (3)避免使用css3渐变阴影效果。
    2、css动画
    (1)尽量使用css3动画,开启硬件加速。
    可以用transform: translateZ(0)来开启硬件加速。
    CSS中的属性(CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video)会触发GPU渲染,请合理使用。过渡使用会引发手机过耗电增加
    3、合理使用requestAnimationFrame动画代替setTimeout
    4、适当使用touch事件代替click事件。
    ————————————————

  • 相关阅读:
    织梦后台如何安装
    Java JFrame实现无边框无标题
    SharePoint 2013的100个新功能之网站管理(一)
    cvFindContours之轮廓个数
    RequireJS 入门指南
    RESTFUL Service : based on Jersey
    hdu 1548 A strange lift(优先队列)
    SharePoint 用户配置文件服务
    SharePoint Foundation 搜索-PowerShell
    SharePoint 企业搜索-PowerShell
  • 原文地址:https://www.cnblogs.com/gitwusong/p/11368480.html
Copyright © 2020-2023  润新知