菜鸟IT的博客
"菜鸟IT"的博客 (WWW.17WX.NET)
熟悉HTML网站的前端美工到切图制作,搭配DIV+TABLE+CSS,熟悉Fireworks和Dreamwear的网站制作实战应用,专注于学习和记录JS脚本对于网页改造的各种新奇技术.平时的工作既要做销售,也要做前端开发,也要做后期的客户售后维护,此博客为博主自己平时的IT工作的实战学习笔记,记录自己工作和学习中遇到的各种坑,也分享给有需要的新人...
博客首页 网站前端制作 网赚 软件应用 Windows系统 Python
谷歌联盟提供的广告↓
[网站前端制作]有关标签↓
[网赚]有关标签↓
[软件应用]有关标签↓
[Windwos系统]有关标签↓
 | 
菜鸟IT的博客 >> 网站前端制作

优化网页速度|优化Html代码的浏览器加载速度|优化web网站页面加载速度|给javaScrit的js脚本加上defer或者async有什么作用?
文章来自:https://www.toutiao.com/article/7159540386376155655/?app=news_article×tamp=1666970295&use_new_style=1&req_id=20221028231814010141069013005BBE7D&group_id=7159540386376155655&tt_from=mobile_qq&utm_source=mobile_qq&utm_medium=toutiao_android&utm_campaign=client_share&share_token=0df59534-ee6f-44a8-b6c0-420c0cb3681c&source=m_redirect

【经过我个人实践试验】:头部head里的外部加载JS代码,不要加这个defer属性

# ————————————————————————————
在面试的时候,经常会遇到一道经典的面试题:

如何优化网页加载速度?

常规的回答中总会有一条:

把 css 文件放在页面顶部,把 js 文件放在页面底部。

那么,为什么要把 js 文件放在页面的最底部呢?



浏览器的解析规则是:如果遇到 script 标签,则暂停构建 DOM,转而开始执行 script 标签,如果是外部 script,那么浏览器还需要一直等待其「下载」并「执行」后,再继续解析后面的 HTML。


如果请求并执行「vue.global.js」需要 3 秒,「vue-router.global.js」需要 2 秒,那么页面中的 Hello ~,则至少需要 5 秒以上才会展示出来。





可以看到,script 标签会阻塞浏览器解析 HTML,如果把 script 都放在 head 中,在网络不佳的情况下,就会导致页面长期处于白屏状态。

在很久以前,一般都是将这些外联脚本,放在 body 标签的最后面,确保先解析展示 body 中的内容,然后再一个个请求执行这些外联脚本。

那有没有其他更优雅的解决方案呢?

答案是肯定的,现在 script 标签新增了 2 个属性:defer 和 async,就是为了解决此类问题,提升页面性能的。

菜鸟IT博客[2022.10.30-00:16] 访问:866
[关闭窗口]  
  ※※相关信息专题※※

§Scrit_JS
§HTML

Google公司(谷歌联盟)提供的广告↓
本页的htm伪静态链接网址:分享链接加载中....

收藏链接: www.ems-help.com | www.17ckd.com | www.17post.com | m.17ckd.com | www.17track.wang | www.kd100.wang | www.17ckd.com/p1 | www.17ckd.com/p0 | www.17wx.net | www.17ckd.com/17tracking | www.11185cha.com | yf.17ckd.com | yfm.17ckd.com | www.sftrack.net | www.17htm.net | www.kdjiage.com | m.kdjiage.com | www.expba.net | m.expba.net | www.pptrack.net
学习Python的关键点
【1】★ Python:解决小数点后面四舍五入的精度丢失问题(二进制转换导致,另解决prec动态保留小数点后多少位)
【2】 ★ Python:单个py文件打包exe程序
【3】 ★ 给自己写的exe程序加上注册授权保护
【4】 ★ Python的http请求超时设置(timeout)| 异常类型/捕获异常
【5】 ★ Python的多线程的线程池的使用| ThreadPoolExecutor
【6】 ★ Python能用到的免费代理IP网址
【7】 ★ Python_用于测试代理IP是否有效
【8】 ★ Python Requests post() 方法 | post方式提交api
【9】 ★★★ Python Tkinter Gui视频学习教程
【10】 ★★★ Python 小项目实战-视频学习教程
【11】 ★★★ Python 爬虫项目实战-视频教程
【12】 ★★★ 高级进阶的关于python的五本书: 「Python从菜鸟到高手」、「html5+css3+JavaScript从入门到精通」、「Django Web应用开发实战」、「漫画算法」
【13】 ★★★ Request库-爬虫
【14】 ★★★ Python 图形识别文字
【15】 ★★★ Python 滑动验证码识别【图文教程】
【16】 ★★★ Python 滑动验证码识别【视频教程】
【18】 ★★★ Python 关于Class类的应用【视频教程】
【19.1】 ★★★ Python 关于进度条的制作(1)
【19.2】 ★★★ Python 关于进度条的制作(2)
【20】★★★ Python 抓取某宝的商品信息
【21】★★★ Python 一小时学会全栈开发浏览器版本的企业管理系统【视频教程】
【22】★★★ Python 全栈开发——前端+后端【视频教程】
【23】★★★ Layui 浏览器前端模块化UI框架
【24】★★★ Python-Django-Web应用开发【视频教程】
【25】★★★ Python 从0开始学【视频教程】
【26】★★★ Python的tkinter界面打包exe以后关于icon图标报错的解决办法!
【27】★★★ Python的tkinter视频学习教程【N个系统性学习合集视频】★★★
【28】★★★ Python全栈开发【视频教程】★★★
Copyright © 17WX.NET 版权所有 Manage 沪ICP备13006304号-5 沪公网安备31011702006630号
,sitemap.html,sitemap.xml
网站人气值: