前端性能优化

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. iptables之路由网关共享上网/端口映射

    linux-A 主机配置eth0即可: [root@linux-A ~]# ifconfig eth0|sed -n '2p' inet addr:192.168.20.3 Bcast:192.168 ...

  2. Element-UI ( Dropdow )下拉菜单组件command传输对象

    通过 :command绑定对象数据,handleCommand方法处理数据 template <div v-for="(item, index) in FlyWarningList&q ...

  3. CentOS 7.6下安装 NVM 管理不同版本的 Node.js

    学习网站:https://www.linuxidc.com/Linux/2019-10/160918.htm

  4. Windows下配置开机自启Tomcat服务

    给单位内部做了一个管理系统,部署项目要求服务器启动管理系统自启..直接给出操作流程. 一.配置环境变量 由于Tomcat启动依赖jdk,因此需要配置jdk与Tomcat两项环境变量,如系统已安装jdk ...

  5. 联合索引在B+树上的存储结构及数据查找方式

    能坚持别人不能坚持的,才能拥有别人未曾拥有的.关注编程大道公众号,让我们一同坚持心中所想,一起成长!! 引言 上一篇文章<MySQL索引那些事>主要讲了MySQL索引的底层原理,且对比了B ...

  6. OpenCV3入门（十）图像轮廓

    1.图像轮廓 1.1图像轮廓与API函数 轮廓是一系列相连的点组成的曲线,代表了物体的基本外形,相对于边缘,轮廓是连续的,边缘并不全部连续.一般地,获取图像轮廓要经过下面几个步骤: 1)     读取 ...

  7. P1058 立体图

    链接:Miku ------------------------------ 蒟蒻在线%lmk,ljx,lpy,yyq大佬们 ------------------------------ Good N ...

  8. pycharm中新建Vue项目时没有vue.js的解决办法

    可能很多小伙伴在使用pycharm 1,新建vue项目的时候并没有发现vue.js的名字, 2,新建.vue文件(即单文件组件)的时候没有 下面就来帮助大家一下,仅供参考 如图: 1.首先我们打开设置 ...

  9. PHP0024：PHP 博客项目开发

  10. 10.python内置模块之os模块

    os模块的作用:os 模块提供了非常丰富的方法用来处理文件和目录(管理和维护目录以及文件). os.path模块的作用:主要用于获取文件的属性(管理路径的(物理地址)). 小生总结了一些平时常用到的属 ...