前端性能优化

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. [MacOS]Chrome 强制刷新

    Chrome 调试的时候经常发现缓存没有清理 MacOS :⌘+⇧+r Windows:Ctrl + F5

  2. light oj 1014 - Ifter Party分解因子

    1014 - Ifter Party   I have an Ifter party at the 5th day of Ramadan for the contestants. For this r ...

  3. window下建立vue.js项目

    安装node.js 直接下载安装文件安装就可以了 vue项目搭建 .到自己要件项目的文件夹运行cmd命令 .如果没有安装vue-cli .npm install -g vue-cli .vue ini ...

  4. Windows下CMD常用命令

    清理DNS的缓存 ipconfig /flushdns 查看dns nslookup 重置socket服务 netsh winsock reset 重置tcp/ip协议栈 netsh int ip r ...

  5. Vue中的递归组件

    递归函数我们都再熟悉不过了,也就是函数自己调用自己.递归组件也是类似的,在组件的template内部使用组件自身.那递归组件有什么使用场景呢? 我们都知道树这个数据结构就是一种递归的结构,因此我们可以 ...

  6. AndroidStudio更新时报错：Connection Error,Temp directory inside installation

    场景 在将Android Studio的 .AndroidStudio目录修改为别的目录后,打开AS,提示更新,点击更新后提示: Connection Error,Temp directory ins ...

  7. Zookeeper机制

    顾名思义 zookeeper 就是动物园管理员,他是用来管 hadoop(大象).Hive(蜜蜂).pig(小 猪)的管理员, Apache Hbase 和 Apache Solr 的分布式集群都用到 ...

  8. DEVIL MAY CRY V：《鬼泣5》

    “又是一个带孝子的故事”

  9. dotMemory 2019.3.1一直试用

    创建一个bat脚本, 里面写上: reg delete HKEY_CURRENT_USER\Software\JetBrains\dotMemory /freg delete HKEY_CURRENT ...

  10. centos7 lnmp环境搭建

    1- 安装gcc c++编译器 yum install gcc gcc-c++ cmake 2- 安装nginx-1.8.1及依赖包 2.1- 安装nginx依赖包 yum -y install pc ...