天河区做网站的公司,网站域名注册信息,seo搜索优化公司报价,如何评判网站建设岗位#x1f9d1;#x1f4bb; 写在开头 点赞 收藏 学会#x1f923;#x1f923;#x1f923;
如题#xff0c;惯性思路很简单#xff0c;就是直接撸上一个空内容的html。
注#xff1a;以下都是在现代浏览器中执行#xff0c;主要为**Chrome 版本 120.0.6099.217 写在开头 点赞 收藏 学会
如题惯性思路很简单就是直接撸上一个空内容的html。
注以下都是在现代浏览器中执行主要为**Chrome 版本 120.0.6099.217正式版本 64 位和Firefox123.0.1 (64 位) ** !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titledemo/title
/head
body
/body
/html
؏؏☝ᖗ乛◡乛ᖘ☝؏؏~
但是要优雅~咱玩的花一点如果这个HTML中加入一行文字比如下面这样如何让这行文字一直不显示出来呢
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titledemo/title
/head
body
div放我出去/div
/body
/html
思考几秒~有了江湖一直传言Javascrip代码执行不是影响Render树生成么上循环于是如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titledemo/title
/head
body
div放我出去/div
scriptwhile (1) {let a;}// 或者这样/*(function stop() {var message confirm(我不想让文字出来);if (message true) {stop()} else {stop()}})()*/
/script
/body/html
一下一下
bingo可以实现那再换个思路呢加载资源说干就干在开发者工具上设置上下载速度为1kb/s测试了以下三种类型资源html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titledemo/title
/head
body!-- link relstylesheet hrefhttps://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/static/bytedesign.min.css asstyle/ --!-- img srchttps://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/static/bytedesign.min.css/ --div classlet-it-go放我出去/divscript srchttps://lf3-cdn-tos.bytescm.com/obj/static/log-sdk/collect/5.1/collect.js/scriptstyle.let-it-go {color: red;}/style
/body
/html
总得来说JS和CSS文件需要排在.let-it-go元素前面或者样式前面才会影响到渲染DOM或者CSSOM图片或者影片之类的不管放前面还是后面都无影响。如果在css文件中一直有import外部CSS也是有很大影响 但正如题目这种只能影响一时却不能一直影响就算你在代码里写一个在头部不停插入脚本也没有用比如如下这么写按依旧无效
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titledemo/title
/head
bodylink relstylesheet hrefhttps://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/static/bytedesign.min.cssasstyle /!-- img srchttps://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/static/bytedesign.min.css/ --script// setInterval((){// 不停插入script脚本 或者css文件let index ;(function fetchFile() {var script document.createElement(script);script.src https://lf3-cdn-tos.bytescm.com/obj/static/log-sdk/collect/5.1/collect${index}.js;document.head.appendChild(script);script.onload () {fetchFile()}script.onerror () {fetchFile()}index1// 创建一个 link 元素//var link document.createElement(link);// 设置 link 元素的属性// link.rel stylesheet;// link.type text/css;// link.href https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/app.f81e9f9${index}.css;// 将 link 元素添加到文档的头部//document.head.appendChild(link);})()// },1000)/scriptdiv classlet-it-go放我出去/divstyle.let-it-go {color: red;}/style!-- script srchttps://lf3-cdn-tos.bytescm.com/obj/static/log-sdk/collect/5.1/collect.js/script --
/body/html
那么还有别的方法吗暂时没有啥想法了等后续再在这篇上续接~
另外在实验过程中有一个方式让我很意外以为以下代码也会造成页面一直空白但好像不行。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titledemo/title
/head
bodydiv idappp/divscript(function createElement() {var parentElement document.getElementById(appp);// 创建新的子元素var newElement document.createElement(div);// 添加文本内容可选newElement.textContent 这是新的子元素;// 将新元素添加到父元素的子元素列表的末尾parentElement.appendChild(newElement);createElement()})()/scriptdiv classlet-it-go放我出去/div
/body
/html
这可以很好的证明插入DOM元素这个任务会在主HTML渲染之后再执行。
如果对您有所帮助欢迎您点个关注我会定时更新技术文档大家一起讨论学习一起进步。
