js和css文件位置对页面性能有什么影响?入门基础_文件基础知识教程

CSS和JS的位置会影响页面效率 –网页性能js脚本文件的位置js脚本应该放在底部,原因在于js线程与GUI渲染线程是互斥的关系,如果js放在首部,当下载执行js的时候,会影响渲染行程绘制页面,js的作用主要是处理交互,而交互必须得先让页面呈现才能进行,所以为了保证用户体验,尽量让页面先绘制出来。CSS文件的位置CSS 是页面渲染的关键因素之一,(当页面存

js和css文件位置对页面性能有什么影响?入门基础

CSS和JS的位置会影响页面效率 –网页性能

js和css文件位置对页面性能有什么影响?入门基础_文件基础知识教程

js脚本文件的位置

js脚本应该放在底部,原因在于js线程与GUI渲染线程是互斥的关系,如果js放在首部,当下载执行js的时候,会影响渲染行程绘制页面,js的作用主要是处理交互,而交互必须得先让页面呈现才能进行,所以为了保证用户体验,尽量让页面先绘制出来。

CSS文件的位置

CSS 是页面渲染的关键因素之一,(当页面存在外链 CSS 时,)浏览器会等待全部的 CSS 下载及解析完成后再渲染页面。关键路径上的任何延迟都会影响首屏时间,因而我们需要尽快地将 CSS 传输到用户的设备,否则,(在页面渲染之前,)用户只能看到一个空白的屏幕。

CSS文件放在顶部一方面是因为放置顺序决定了下载的优先级,更关键的是浏览器的渲染机制。

css在加载过程中不会影响到DOM树的生成,但是会影响到Render树的生成,进而影响到layout,所以一般来说,style的link标签需要尽量放在head里面,因为在解析DOM树的时候是自上而下的,而css样式又是通过异步加载的,这样的话,解析DOM树下的body节点和加载css样式能尽可能的并行,加快Render树的生成的速度。

将CSS放在底部,页面可以逐步呈现,但在CSS下载并解析完毕后,已经呈现的文字和图片就要需要根据新的样式重绘,这是一种不好的用户体验。

广义而言,CSS 是(渲染)性能的关键,这是由于:

1、浏览器直到渲染树构建完成后才会渲染页面;

2、渲染树由 DOM 与 CSSOM 组合而成;

3、DOM 是 HTML 加上(同步)阻塞的 JavaScript 操作(DOM 后的)结果;

4、CSSOM 是 CSS 规则应用于 DOM 后的结果;

5、使 JavaScript 非阻塞非常简单,添加 async 或 defer 属性即可;

6、相对而言,要让 CSS 变为异步加载是比较困难的;

7、所以记住这条经验法则:(理想情况下,)最慢样式表的下载时间决定了页面渲染的时间。

基于上述考虑,我们需要尽快构建 DOM 与 CSSOM。一般情况下,DOM 的构建是相对较快,(当请求某个页面时,)服务器响应的首个请求是 HTML 文档。但一般 CSS 是作为 HTML 的子资源而存在,因此 CSSOM 的构建通常需要更长的时间。

海计划公众号
(0)
上一篇 2020/03/20 23:49
下一篇 2020/03/20 23:49

您可能感兴趣的内容

  • 前端最常用的vscode插件集基础入门_插件入门基础教程

    在前端开发中,使用Visual Studio Code有哪些你常用的插件?推荐几个自己喜欢的,不带链接,自己搜索安装吧。这些都是比较实用、前端必备的插件集
    vue【vetur】 vue语法高亮【vueHelper】vue2代码段react【react playground】react租金啊运行环境【react standard style code snip

    2020/04/03
  • js解析剪切板里的excel内容小白知识_excel攻略教程

    这次记录的是昨晚一个想法:把excel内容复制到剪切板并转成自己想要的json格式,核心是要把excel内容转json,这部分主要看excel的格式和json如何业务的映射,不展开。倒是通过实践,收获了剪切板的一些知识点。注:因为只是为了自己的小工具实现,不考虑兼容,在chrome下实践整个步骤是:从一封有内容的excel里,选中内容,ctrl+c复制到剪切

    2020/03/20
  • 解决webpack引入moment包过大的问题使用教程_打包小白帮助

    在vue工程中,在引入moment时,发现build之后的包比不引入moment的包文件大了整整两百多kb,后来发现webpack会把moment的语言包也一起打包
    解决方案:
    webpack plguin增加:new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
    Vue-cli2在webpack.prod.

    2020/03/20
  • HTML5触摸事件演化tap事件菜鸟教程网_事件攻略教程

    触摸事件是移动浏览器特有的HTML5事件,虽然click事件在pc和移动端更通用,但是在移动端会出现300ms延迟,较为影响用户体验,300ms延迟来自判断双击和长按,因为只有默认等待时间结束以确定没有后续动作发生时,才会触发click事件。所以触摸事件反应更快,体验更好。触摸事件的类型:为了区别触摸相关的状态改变,存在多种类型的触摸事件。可以通过检查触摸事

    2020/03/24
  • 在JavaScript中交换变量的4种方法使用攻略_变量小白攻略

    在JavaScript中交换变量的4种方法使用攻略 许多算法需要交换2个变量。在编码面试中,可能会问您“如何在没有临时变量的情况下交换2个变量?”。我很高兴知道执行变量交换的多种方…

    2020/03/19
  • JS之继承(ES5 & ES6)入门攻略_继承使用指南

    定义继承到底是什么?维基百科是这样说的:继承(英语:inheritance)是面向对象软件技术当中的一个概念。如果一个类别B“继承自”另一个类别A,就把这个B称为“A的子类”,而把A称为“B的父类别”也可以称“A是B的超类”。继承可以使得子类具有父类别的各种属性和方法。var a = new Array()
    a.valueOf()上面的a为什么可以使用val

    2020/03/29
  • 关于 injectBabelPlugin is not a function菜鸟指南_bug小白帮助

    在学习ant design的自定义主题这一功能时候,官方给到创建config-overrides.js文件,并且写入如下代码: const { injectBabelPlugin } = require(‘react-app-rewired’);module.exports = function override(config, env) {config =

    2020/04/03
  • JS引擎V8如何与 Lite 模式两开花?菜鸟指南_引擎基础入门

    去年年底,V8 团队启动了一个名为 V8 Lite 的项目,旨在大幅降低 V8 的内存使用率。最开始,团队准备把 V8 Lite 作为 V8 的独立模式,专门用于低内存的移动设备与嵌入式设备,因为这些设备更关注的是减少内存使用而不是执行速度。在这个项目研发的过程中,开发团队发现专门为这个 Lite 模式所做的内存优化其实也可以迁移到原来的 V8 上,直接两开

    2020/03/24
  • AlloyFinger基础指南_一款非常轻量的开源手势库

    AlloyFinger基础指南 官方网址:http://alloyteam.github.io/AlloyFinger/ GitHub:https://github.com/All…

    2020/03/06
  • tink小白教程_npm 出品的下一代包管理器

    tink小白教程 GitHub:https://github.com/npm/tink 简介描述:npm 出品的下一代包管理器 npm 出品的下一代包管理器 ,能够更好处理 nod…

    2020/03/06
  • $(document).on(click)点击事件在ios无效的解决方案菜鸟教程网_事件入门基础教程

    点我

    $(document).on(“click”, “#name”, function() {console.log()(“name”);});
    以上代码在Pc浏览器和android上都能触发点击事件,但是在ios上点击却完全没有反应。在查询相关资料后发现:在ios中这些元素没有c

    2020/03/20
  • 如何代码获取 Flutter APP 的 FPS小白基础_Flutter入门教程

    众所周知,官方提供了好几个办法来让我们在开发 Flutter app 的过程中可以使用查看 fps等性能数据,如 devtools ,具体见文档 Debugging Flutter apps 、 Flutter performance profiling等。但是这些工具统计到的数据充其量只能算开发过程中的“试验室”数据,假如需要统计app 在线上在用户手机上

    2020/03/26
  • CDN与DNS知识汇总指南攻略CDN/DNS是什么?有什么好处?_CDN入门基础

    在性能优化的时候,比较常见的一个建议是,把资源部署在CDN上,那么问题来了,CDN是什么?这样做有什么好处?DNS我们先讲一下域名系统DNS(Domain Name System)吧。他是一个分布式数据库,功能是联系域名和ip地址。域名与ip的对应关系,被称为记录(record),可分为各种类型A: Address,域名指向的IP地址,一个域名可以有多个A记

    2020/04/05
  • Js event对象offsetX,pageX,screenX,clientX使用指南_对象使用指南

    平时在测量元素位置时难以确定,下面给出具体的event对象中的各种属性,以便日后使用。检测相对于浏览器的位置:clientX和clientY,当鼠标事件发生时,鼠标相对于浏览器左上角的位置检测相对于文档的位置:pageX和pageY,当鼠标事件发生时,鼠标相对于文档左上角的位置。(IE7/8无)(类似于event.clientX和event.clientY)

    2020/03/26
  • uniapp登录流程详解uni.login使用帮助_登录入门百科

    H5平台登陆注意事项:微信内嵌浏览器运行H5版时,可通过js sdk实现微信登陆,需要引入一个单独的js,详见 普通浏览器上实现微信登陆,并非开放API,需要向微信申请,仅个别开发者有此权限 H5平台的其他登陆,比如QQ登陆、微博登陆,uni-app未封装,请在条件编译里按普通H5写法编写。OBJECT 参数说明参数名 类型 必填 说明 平台差异说明 pro

    2020/03/23
  • Pressure.js使用教程_用于处理Force Touch,3D Touch的Js库

    Pressure.js使用教程 官方网址:https://pressurejs.com GitHub:https://github.com/stuyam/pressure 简介描述…

    2020/03/06