热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

每日思维洞察:2020年8月19日的深度分析与反思

在2020年8月19日的深度分析中,我们探讨了HTML标签中同时存在`a`标签的`href`和`onclick`属性时的触发顺序问题。此外,还讨论了如何在一个自适应高度的父级`div`中,使两个子`div`中的一个固定高度为300px,另一个自动填充剩余空间的方法。最后,文章详细介绍了JavaScript异步加载的多种实现方式,包括但不限于`async`、`defer`属性以及动态脚本插入技术,为开发者提供了丰富的技术参考。

题目概览



  • a标签的href和onclick属性同时存在时哪个先触发

  • 外层有一个自适应高度的div,里面有两个div,一个高度固定300px,另一个怎么填满剩余的高度

  • js异步加载有哪些方案

  • 对robots文件的理解


题目解答


a标签的href和onclick属性同时存在时哪个先触发



  • onclick属性先触发



  • 判断依据是在onclik中使用preventDefault方法可以阻止a标签的跳转,说明a标签的跳转行为是一个默认行为

    test



外层有一个自适应高度的div,里面有两个div,一个高度固定300px,另一个怎么填满剩余的高度



  • 可以设置外层自适应高度的容器为flex布局,利用flex-basis属性即可实现自动填满剩余高度(flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。它可以设为跟width或height属性一样的值,比如350px,则项目将占据固定空间。

    一句话就是项目占据了固定的高度,再使用flex: 1填空间的时候,不会考虑固定的空间)

















js异步加载有哪些方案



  • 将script标签放在body结束标签之前:先加载dom树,然后再加载js脚本




    .....





  • 在onload方法中给dom树动态添加script标签:先加载dom树,然后触发onload方法添加script标签加载js脚本



    {
    var element = document.creatElement(‘script‘);
    element.type = ‘text/Javascript‘;
    element.src = ‘...‘;
    var headTag = document.getElementsByTagName(‘head‘)[0];
    headTag.insertBefore(element, headTag.firstChild);}">
    .....




  • 使用defer属性:并行加载dom树和下载js脚本,js脚本下载后会等dom树解析完再执行





    .....



  • 使用async属性:会并行加载dom树和下载js脚本,js脚本下载完后立刻并行执行





    .....



  • (自带 defer 效果) 和 动态加载模块的 import() 函数,配合 async/await 实现,参考在浏览器中使用JS module




对robots文件的理解



  • robots.txt文件对抓取工具(如爬虫)在访问路径等方面做出了规定,用于阻止或引导抓取工具对网站下特定内容的抓取

  • 参考文档:Robots.txt 规范 | 搜索 | Google Developers


推荐阅读
  • 在HDU 1166敌军布阵问题中,通过运用线段树数据结构,可以高效地计算指定区间的敌军数量。该算法不仅能够在限定的时间和内存条件下快速求解,还能够灵活应对动态变化的战场局势,为实时决策提供支持。 ... [详细]
  • 本文深入探讨了 hCalendar 微格式在事件与时间、地点相关活动标记中的应用。作为微格式系列文章的第四篇,前文已分别介绍了 rel 属性用于定义链接关系、XFN 微格式增强链接的人际关系描述以及 hCard 微格式对个人和组织信息的描述。本次将重点解析 hCalendar 如何通过结构化数据标记,提高事件信息的可读性和互操作性。 ... [详细]
  • Java Web开发中的JSP:三大指令、九大隐式对象与动作标签详解
    在Java Web开发中,JSP(Java Server Pages)是一种重要的技术,用于构建动态网页。本文详细介绍了JSP的三大指令、九大隐式对象以及动作标签。三大指令包括页面指令、包含指令和标签库指令,它们分别用于设置页面属性、引入其他文件和定义自定义标签。九大隐式对象则涵盖了请求、响应、会话、应用上下文等关键组件,为开发者提供了便捷的操作接口。动作标签则通过预定义的动作来简化页面逻辑,提高开发效率。这些内容对于理解和掌握JSP技术具有重要意义。 ... [详细]
  • FastDFS Nginx 扩展模块的源代码解析与技术剖析
    FastDFS Nginx 扩展模块的源代码解析与技术剖析 ... [详细]
  • MongoVUE基础操作指南:轻松上手数据库管理
    本文介绍了MongoVUE的基础操作,旨在帮助用户轻松掌握数据库管理技巧。MongoVUE是一款功能强大的MongoDB客户端工具,虽然需要注册,但其用户友好的界面和丰富的功能使其成为许多开发者的首选。文中详细解释了安装步骤、基本配置以及常见操作方法,并对一些常见的问题进行了修正和补充,确保用户能够快速上手并高效使用MongoVUE进行数据库管理。 ... [详细]
  • 在处理遗留数据库的映射时,反向工程是一个重要的初始步骤。由于实体模式已经在数据库系统中存在,Hibernate 提供了自动化工具来简化这一过程,帮助开发人员快速生成持久化类和映射文件。通过反向工程,可以显著提高开发效率并减少手动配置的错误。此外,该工具还支持对现有数据库结构进行分析,自动生成符合 Hibernate 规范的配置文件,从而加速项目的启动和开发周期。 ... [详细]
  • 【Linux进阶指南】第一阶段第三课:体验与部署Ubuntu系统
    在正式踏上Linux学习之旅之前,本课程将引导你深入体验和部署Ubuntu系统。通过详细的操作步骤和实践演练,你将掌握Ubuntu的基本安装、配置及常用命令,为后续的进阶学习打下坚实的基础。此外,课程还将介绍如何解决常见问题和优化系统性能,帮助你更加高效地使用Ubuntu。 ... [详细]
  • 在学习LVM(逻辑卷管理)技术的过程中,我对MD(多设备)、DM(设备映射器)以及逻辑设备和RAID的实现有了深入的理解。LVM2架构主要由DM主模块及其多个子模块组成,其中linear子模块用于创建线性设备,类似于简单的磁盘分区拼接。此外,还探讨了其他子模块如striped、mirror等在提高性能和数据冗余方面的应用。通过实际操作,我掌握了LVM的基本配置和管理方法,能够灵活应对不同存储需求。 ... [详细]
  • 基于域名、端口和IP的虚拟主机构建方案
    本文探讨了在单台物理服务器上构建多个Web站点的虚拟主机方案,详细介绍了三种主要的虚拟主机类型:基于域名、基于IP地址和基于端口的虚拟主机。每种类型的实现方式及其优缺点均进行了深入分析,为实际应用提供了全面的技术指导。 ... [详细]
  • 在MySQL中更新密码时,首先需要在DOS窗口中切换到mysql安装目录,并使用`--skip-grant-tables`参数启动MySQL服务,以跳过权限表验证。接着,在MySQL命令行中执行相应的SQL语句来设置新密码。完成密码更新后,重启MySQL服务以使更改生效。此外,对于电脑快捷方式的修改,可以通过右键点击快捷方式,选择“属性”,在弹出的窗口中进行路径或目标的修改,最后点击“应用”和“确定”保存更改。 ... [详细]
  • 本文深入探讨了在Spring Boot中处理RESTful风格的表单请求的方法,包括请求参数处理、请求映射以及RESTful设计原则的应用。文章详细介绍了如何利用HTTP动词(如GET、POST、PUT、DELETE)来操作资源,并结合Spring Boot的注解(如@GetMapping、@PostMapping等)实现高效、清晰的请求处理逻辑。通过实例分析,展示了如何在实际项目中应用这些技术,提高开发效率和代码可维护性。 ... [详细]
  • TypeScript 实战分享:Google 工程师深度解析 TypeScript 开发经验与心得
    TypeScript 实战分享:Google 工程师深度解析 TypeScript 开发经验与心得 ... [详细]
  • 如何正确获取Oracle TNS_ADMIN环境变量的值
    如何正确获取Oracle TNS_ADMIN环境变量的值?TNS_ADMIN 是 Oracle 客户端配置中的一个重要环境变量,用于指定网络配置文件(如 tnsnames.ora)的路径。本文将详细介绍如何在不同操作系统中准确获取该变量的值,并提供实用的命令和步骤,帮助用户确保 Oracle 客户端的网络连接配置正确无误。 ... [详细]
  • 掌握PHP编程必备知识与技巧——全面教程在当今的PHP开发中,了解并运用最新的技术和最佳实践至关重要。本教程将详细介绍PHP编程的核心知识与实用技巧。首先,确保你正在使用PHP 5.3或更高版本,最好是最新版本,以充分利用其性能优化和新特性。此外,我们还将探讨代码结构、安全性和性能优化等方面的内容,帮助你成为一名更高效的PHP开发者。 ... [详细]
  • 本文探讨了文件传输过程中的优化与安全策略。具体而言,研究了如何将客户端的文件高效上传至服务器。通过使用结构体对象,可以封装文件的相关信息,如位置和大小,并利用缓冲区存储实际数据,从而实现高效的数据传输。此外,文章还讨论了在传输过程中确保数据完整性和安全性的多种方法,包括加密技术和身份验证机制。 ... [详细]
author-avatar
Evan-ZWU_680
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有