前端性能优化

css，js的加载与执行

javascript是单线程的

一个网站在浏览器是如何进行渲染的呢？

html页面加载渲染的过程

html渲染过程的一些特点

  • 顺序执行，并发加载

    • 词法分析
    • 并发加载
    • 并发上限
  • 是否阻塞
  • 依赖关系
  • 引入方式

css阻塞

  • css head中阻塞页面的渲染
  • css阻塞js的执行
  • css不阻塞外部脚本的加载

js阻塞

  • 直接引入的js阻塞页面的渲染
  • js不阻塞资源的加载
  • js顺序执行，阻塞后续js逻辑的执行

依赖关系

  • 页面渲染依赖于css的加载
  • js的执行顺序的依赖关系
  • js逻辑对于DOM节点的依赖关系

js引入方式

  • 直接引入
  • defer
  • async
  • 异步动态引入js

加载和执行的一些优点

  • css样式表置顶
  • 用link代替import
  • js脚本置地
  • 合理使用js的异步加载能力

可以使用Chrome浏览器的performance工具分析页面的加载过程

性能优化-css，js的加载与执行的更多相关文章

  1. JS的加载和执行

    从JS的加载和执行谈性能优化 ---高性能JS读后感(第一章) 从脚本的"霸道"说起,随着浏览器的进步,js越来越听话了,所以,我们先说说以前的浏览器是怎么加载js的,以及js如何 ...

  2. JS 动态加载脚本 执行回调

    JS 动态加载脚本  执行回调 关于在javascript里面加载其它的js文件的问题可能很多人都遇到过,但很多朋友可能并不知道怎么判断我们要加载的js文件是否加载完成,如果没有加载完成我们就调用文件 ...

  3. 前端性能优化 css和js的加载与执行

    一个网站在浏览器端是如何进行渲染的? html本身首先会被渲染成 DOM 树,实际上 html 是最先通过网址请求过来的,请求过来之后,html 本身会由一个字节流转化成一个字符流,浏览器端拿的就是字 ...

  4. JS脚本加载与执行对性能的影响

    高性能JavaScript-JS脚本加载与执行对性能的影响 在web产品优化准则中,很重要的一条是针对js脚本的加载和执行方式的优化.本篇文章简单描述一下其中的优化准则. 1. 脚本加载优化 1.1 ...

  5. 页面性能优化：preload预加载静态资源

    本文主要介绍preload的使用,以及与prefetch的区别.然后会聊聊浏览器的加载优先级. preload 提供了一种声明式的命令,让浏览器提前加载指定资源(加载后并不执行),在需要执行的时候再执 ...

  6. VUE项目性能优化实践——通过懒加载提升页面响应速度

    本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 最近我司因业务需求,需要在一个内部数据分析平台集成在线Excel功能,既然我 ...

  7. JS 动态加载脚本 执行回调_转

    关于在javascript里面加载其它的js文件的问题可能很多人都遇到过,但很多朋友可能并不知道怎么判断我们要加载的js文件是否加载完成,如果没有加载完成我们就调用文件里面的函数是不会成功的.本文讲解 ...

  8. 阿里无线前端性能优化指南 (Pt.1 加载优化)

    前言 阿里无线前端团队在过去一年对所负责业务进行了全面的性能优化.以下是我们根据实际经验总结的优化指南,希望对大家有所帮助. 第一部分仅包括数据加载期优化. 图片控制 对于网页特别是电商类页面来说,图 ...

  9. Web前端性能优化——如何提高页面加载速度

    前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个"Duang"的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒, ...

随机推荐

  1. [Redis-CentOS7]Redis列表操作(三)

    LPUSH添加列表 127.0.0.1:6379> LPUSH websites www.baidu.com (integer) 1 LRANGE 获取全部值 127.0.0.1:6379> ...

  2. 修改kali软件源并配置网络

    一.配置kali使用xshell连接 查看ssh服务状态 # service ssh status 开启ssh服务 # service ssh start 修改ssh配置文件 # vi /etc/ss ...

  3. c#音乐播放器

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  4. python len函数(41)

    在python中除了print函数之外,len函数和type函数应该算是使用最频繁的API了,操作都比较简单. 一.len函数简介 返回对象的长度(项目数)参数可以是序列(例如字符串str.元组tup ...

  5. 记录 Spine骨骼动画导入unity 步骤[unity3d 4.6.6版本 2d动画]

    1:准备好unity使用Spine所需要的运行库,可到如下地址 https://github.com/EsotericSoftware/spine-runtimes/tree/master/spine ...

  6. SpringBoot安全管理--（一）SpringSecurity基本配置

    简介: Spring Boot针对Spring Security提供了自动化配置方案,因此可以使Spring Security非常容易地整合进Spring Boot项目中,这也是在Spring Boo ...

  7. MySql学习-4.查询1

    1.基本查询语法: select * from 表名: **注意** 1.select 后写列名,*代表是所有列:        2.列名可以用as起别名,其出现在结果集中: 3.查询多个列,之间用逗 ...

  8. python練習

    #登录,账户密码储存在文件中,限制登录 count = 0 for i in range(3): b = input("账号:") c = b + "," + ...

  9. Freefilesync-文件夹自动同步

    在企业的相关设置中,若两台物理机,主副之间需要做到文件同步,可以推荐使用Freefilesync作为自动同步设置 话不多说,直接搞机 开始设置好文件比对-点击红色漏斗设置(比较/同步) 点击确定 手动 ...

  10. qt creator源码全方面分析(2-2)

    目录 Common Extension Tasks Common Extension Tasks 本节总结了可用于将UI组件添加到Qt Creator的API函数. 任务 详细 API 添加菜单或菜单 ...