前端性能优化

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. Apache 的多站点配置

    1.修改httpd.conf 文件 Apache的主配置文件路径: D:\phpTools\Apache24\conf 用编辑器打开 httpd.conf 文件,查找 #Include conf/ex ...

  2. Basic Auth攻击

    1.Basic Auth认证简介 Basic身份认证,是HTTP 1.0中引入的认证方案之一.虽然方案比较古老,同时存在安全缺陷,但由于实现简单,至今仍有不少网站在使用它. 例如Apche Tomca ...

  3. 写入时复制（CopyOnWrite）

    一.CopyOnWrite 思想 写入时复制(CopyOnWrite,简称COW)思想是计算机程序设计领域中的一种通用优化策略.其核心思想是,如果有多个调用者(Callers)同时访问相同的资源(如内 ...

  4. C#设计模式学习笔记：(22)备忘录模式

    本笔记摘抄自:https://www.cnblogs.com/PatrickLiu/p/8176974.html,记录一下学习过程以备后续查用. 一.引言 今天我们要讲行为型设计模式的第十个模式--备 ...

  5. golang单元测试简述

      Golang中内置了对单元测试的支持,不需要像Java一样引入第三方Jar才能进行测试,下面将分别介绍Golang所支持的几种测试: 一.测试类型   Golang中单元测试有功能测试.基准测试. ...

  6. Android中调用另一个Activity并返回结果-以模拟选择头像功能为例

    场景 Android中点击按钮启动另一个Activity以及Activity之间传值: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/detail ...

  7. hadoop3自学入门笔记(2)—— HDFS分布式搭建

    一些介绍 Hadoop 2和Hadoop 3的端口区别 Hadoop 3 HDFS集群架构 我的集群规划 name ip role 61 192.168.3.61 namenode,datanode ...

  8. Linux内核的LED设备驱动框架【转】

    /************************************************************************************ *本文为个人学习记录,如有错 ...

  9. .NET CLI简单使用

    官方文档https://docs.microsoft.com/zh-cn/dotnet/core/tools/?tabs=netcore2x 创建新项目 查看能创建什么类型的项目 dotnet new ...

  10. Git操作：一次性强制push所有分支

    现在手上有两个分支,master和rotation,想一次性推送所有分支,可以用--all参数来实现: git push --all origin 如果远程仓库有更改,但你需要直接推送,那就可以使用强 ...