开发者社区> Star时光> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

前端优化方案

简介: 前端优化方案
+关注继续查看

精简HTML代码

  • 减少HTML的嵌套
  • 减少DOM节点数
  • 减少无语义的代码
  • 删除http或者https,如果URL的协议头和当前页面的协议头一致,或者此URL在多个协议都是可用的,侧可以考虑删除协议
  • 删除多余空格,换行符吗,缩进和不必要的注释
  • 省略不必要的标签和属性
  • 使用相对路径的URL

文件放在合适位置

  • css样式文件链接尽量放在页面头部

    • CSS加载不会阻塞DOM tree 解析,但是会阻塞DOM Tree渲染,也会阻塞JS执行。任何body元素之前,可以确保在文档部分中解析所有css样式,(内联和外联),从而减少了浏览器必须重排文档的次数,如果放置页面底部,就要等到最后一个css文件下载完成,此时会出现白屏,影响用户体验
  • js引用放在HTML底部

    • 防止JS的加载,解析,执行对阻塞页面后续元素的正常渲染
  • 设置favicon.ico

    • 网站如果不设置favicon.ico,控制台会报错,另外页面加载过程中也没有图标,loading过程,同时也利于记忆网站品牌,建议统一价
  • 增加首屏必要的css和js

    • 页面如果需要等待所的依赖js和css加载完成才显示,侧在渲染过程中页面会一直显示空白,影响用户体验,建议增加首屏必要的css和js,比如页面框架背景图和loading图标,内联在html页面中,这样做,首屏能快速显示出来,相对减少用户对页面加载等待过程,

渲染性能

  • 提升CSS渲染性能

    • 谨慎使用expensive属性

      • 如nth-child属性;position:fixed定位
    • 尽量减少样式层级树数

      • 如div ul li span
    • 尽量避免使用占用过多CUP和内存的属性

      • 如text-indnt:-99999px
    • 尽量避免使用耗电量大的属性

      • 如css3 3d transforms
  • 合适使用css选择器

    • 尽量避免使用css表达式
    • 尽量避免使用通配符选择器

      • body > a {font-size:blod}
    • 尽量避免正则的属性选择器
  • 提升CSS文件加载性能

    • 使用外链的css
    • 尽量避免使用@import
  • 合理使用Web Fonts

    • 将字体部署在CDN上
    • 将字体以base64形式保存在css中并通过localStorage进行缓存
    • Google字体库因为某些不可抗拒原因,应该使用国内托管服务
  • CSS动画优化

    • 尽量避免同时动画
    • 延迟动画初始化
    • 结合SVG
  • js变量和函数优化

    • 尽量使用id选择器
    • 尽量避免使用eval
    • js函数尽可能保持简洁
    • 使用事件节流函数
    • 使用事件委托
  • js动画优化

    • 避免添加大量js动画
    • 尽量使用css3动画
    • 尽量使用canvas动画
    • 合理使用requestAnimationFrame动画代替setTimeout,setlnterval

      • requestAnimationFrame可以在正确的时间进行渲染,setTimeout和setlnterval无法保证callback回调函数的执行时机
  • 合理使用缓存

    • 合理缓存dom对象
    • 缓存列表长度
    • 使用可缓存的ajax

cookie

  • 通常有浏览器存储,然后将cookie与每个后续请求一起发送到统一服务。收到HTTP请求时,服务器可以发送带有cookie的header头,可以给cookie设置有效时间
  • 应用于:

    • 会话管理,登录名,购物车商品,游戏得分或服务器要记录的其他任何内容
    • 个性化,用户首选项,主题或其他设置
    • 跟踪,记录和分析用户行为,

sessionStorage

  • 创建于本地存储的键/值,浏览器关闭的时候,数据就会清除
  • 应用于

    • 页面应用页面直接传值

IndexedDB

  • 索引数据库
  • 应用于

    • 客户端存大量结构化数据
    • 没有网络连接的情况下使用
    • 将冗余,很少修改,但经常访问的数据,以避免随时从服务器获取数据

localStorage

  • 本地存储,长期存储,只有当用户手动清除的时候,才会清理
  • 应用于

    • 缓存静态文件内容JS/CSS
    • 缓存不常变更API接口数据
    • 存储地理位置信息
    • 浏览器页面具体位置

js模块加载方案和选型

  • ConmmonJS

    • 旨在web浏览器之外为JavaScript建立模块生态系统
    • Node.js模块化方案受CommonJS
  • AMD(异步模块定义)规范

    • RequireJS模块化加载器,基于AMD API实现
  • CMD(通用模块定义)规范

    • seaJS模块化加载器,遵循CMD API编写
  • ES6 import

怎么才能减少浏览器回流和重绘

  • CSS

    • 避免过多样式嵌套

      - 避免使用css表达式
      • 使用绝对定位,可以让动画脱离文档流
      • 避免使用table布局
      • 尽量不使用float布局
      • 图片最好设置width和height
      • 尽量简化浏览器不必要的任务,减少页面重新布局
      • 使用viewport设置屏幕缩放级别
      • 避免频繁设置样式,最好吧新的style属性设置完之后,进行一次性修改
      • 避免使用引起回流/重绘的属性。最好相应变量缓存起来
  • JavaScript

    • 最小化回流和重排

      • 为了减少回流发生次数,避免频繁活操作DOM。可以结合并多次对DOM修改,然后一次性处理
    • 控制绘制过程和绘制区域

      • 绘制过程开销比较大的属性设置应该尽量避免减少使用
      • 减少绘制区域范围

控制DOM大小

  • 众所周知,页面交互卡顿流畅很大一部分原因页面有大量DOM元素,想象一下,从一个上万节点DOM树上,使用querySelectorAll或者getElementTagName方法查找某一个节点,是非常耗时的,另外元素绑定事件,事件冒泡和事件捕获的执行也会相对耗时
  • 通常控制DOM大小的技巧包括

    • 合理的业务逻辑
    • 延迟加载即将呈现的内容

简化DOM操作

  • 对DOM节点的操作统一处理后,在统一插入到DOM Tree中
  • 可以使用fragment,尽量不在页面DOM Tree里直接操作
  • 现在流行的框架都在使用虚拟DOM技术,通过diff算法,简化和减少DOM操作

前端构建工具介绍

  • Grunt 一个项目需要定制多个小任务应用多个插件
  • Gulp 通过流来简化多个任务的配置和输出,配置代码比较少
  • webpack 预编译,中间文件在内存处理,支持多中模块化,配置相对简单
  • parcel 多核编译。同时有文件系统缓存,即使在重启构建后也能快速再编译,极速零配置Web应用打包工具

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
前端性能优化-图像优化
前端性能优化-图像优化
30 0
前端内存优化的探索与实践
前端内存探索,为不同的开发场景选择更合适的数据保存方式。
595 0
前端内存优化的探索与实践
标注是地图最基本的元素之一,标明了地图每个位置或线路的名称。在地图 JSAPI 中,标注的展示效果及性能也是需要重点解决的问题。
608 0
前端内存优化的探索与实践
在地图 JSAPI 中,标注的展示效果及性能也是需要重点解决的问题。
6326 0
前端性能优化的方法
一、浏览器访问优化 浏览器请求处理流程图 1.减少http请求 http协议是无状态的用用层协议,意味着每次http请求都需要建立通信链路、进行数据传输,而在服务器端,每个http都需要启动独立的线程去处理。
1647 0
前端css性能优化
1. 避免使用@important 外部的css文件中使用@important会使得页面在加载时增加额外的延迟。最好使用link   2. 避免使用css表达式(表达式可能会造成极大的计算量)   3. 避免通配选择器 在初期使用*{margin:0;padding:0},以此来消除标签的默认布局和不同浏览器的对同一个标签的不同的渲染。
860 0
前端优化系列 - JS解析性能分析
通常我们觉得页面已经写得非常好,已经没有优化空间了,但实际性能却不尽如人意。本文尝试从各个维度详细解析JS的性能消耗情况,找出导致页面性能大幅下降的根源。
5708 0
+关注
10
文章
6
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载