前端性能优化

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. React之深入了解虚拟DOM

    JS在手机中也可运行,React Native通过将虚拟DOM转换为底层的原生组件,即可在手机端运行,在浏览器运行时,只需要将虚拟DOM转换为真实DOM即可运行,虚拟DOM就是将真实DOM转换为JS对 ...

  2. JMeter接口测试响应数据中乱码问题解决方法

    乱码产生原因: 结果处理编码与被测对象的编码不一致,JMeter是默认按照ISO-8859-1编码格式进行解析. 解决方法一: 根据接口文档或者找开发确认项目编码是哪种,因为有的项目用的是GBK,有的 ...

  3. 传智播客C++视频学习笔记（5）

    #include <iostream> using namespace std; void swapInt(int& a, int& b) { int temp = a; ...

  4. 现在连Linux都搞不懂，当初我要是这么学习操作系统就好了！

    原创声明 本文首发于微信公众号[程序员黄小斜] 本文作者:黄小斜 转载请务必在文章开头注明出处和作者. 本文思维导图 简介 学习编程,操作系统是你必须要掌握的基础知识,那么操作系统到底是什么呢? 这还 ...

  5. Git分支管理介绍

    分支管理 软件的版本控制以及分支管理贯穿于整个软件产品的生命周期,日常的项目管理对于开发团队能否有节奏且顺利的交付软件也很重要.本分支管理和版本控制规范主要分为3个部分,即分支管理规范.版本号规范.需 ...

  6. mysql 的root 用户无法授权，navicat 远程授权提示1044解决方案

    先看解决方案 #------------mysql root 用户无法赋权问题解决 -------- ,登录 mysql -u root -p ,use mysql; 选择mysql数据库 ,执行以下 ...

  7. mybatis 自学笔记

    MyBatis 是一款优秀的持久层框架,它支持定制化 SQL.存储过程以及高级映射.本页作为自学整理资料,信息来源网络,侵权速联,但大部份经过自己测试.使用说明:本人测试用编辑软件eclipse_st ...

  8. RestTemplate + okhttp 实现远程调用

    1. 添加依赖 <!-- https://mvnrepository.com/artifact/com.squareup.okhttp3/okhttp --> <dependency ...

  9. C#连接数据库的方法

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

  10. FIB表与RIB表的区别与联系

    RIB (route information base) 和 FIB (forwarding information base),又称Ip路由表 和 CEF表,它们之间的关系可以用下面这张图片来高度概 ...