高性能js-加载和执行

怎甘沉沦 提交于 2020-01-31 19:38:53
  • js会使网页速度变慢,可以从加载速度,执行效率,DOM 交互,网页生命周期方面优化
  • 语言特性,数据结构,浏览器机理,网络传输

脚本加载

  • js的阻塞性: js加载和http请求,用户界面刷新等用的是同一进程,js加载会阻塞其他
  • 浏览器在解析到 <body 标签之前,不会渲染页面任何部分,把脚本放在<head 里会导致明显的延迟
  • <script 标签在加载外部资源时不会阻塞其他 <script ,但是仍会阻塞其他资源如图片的下载
  • 将<script 标签放在<body标签底部

脚本组织

  • <script 标签初始加载时会阻塞页面渲染,所以要减少内嵌外链<script标签数量
  • 把内嵌脚本放在<link 外链样式表之后,会使得样式表先加载阻塞页面渲染,为了确保内嵌脚本在执行时能获得精确的样式信息。不要把内嵌脚本紧跟在<link 标签后
  • http请求会带来额外的性能开销,把多个文件合并成一个,只用一个<script标签,减少性能消耗
  • 文件合并可通过离线打包工具,雅虎合并处理器,以供通过内容传输网络CDN,分发YUI library文件时使用,任何网站都可以使用一个把指定文件合并处理后的URL来获取任意数量的YUI文件

加粗样式

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!