美文网首页
JS基础知识点总结--好记性不如烂笔头

JS基础知识点总结--好记性不如烂笔头

作者: 落叶的小窝世界 | 来源:发表于2019-01-20 10:22 被阅读0次

    最近的项目实践中发现自己经常犯一些低级错误,其实总结下来就是自己的基础知识不扎实。所以这篇文章的主要意义就是帮助整理我不清晰的基础知识点,并且会持续更新。

    谈谈URL

    基本URL(统一资源定位符)包含模式(或称协议)、服务器名称(或IP地址)、路径和文件名,如“协议://授权/路径?查询”。

    1、绝对URL

    绝对URL显示文件的完整路径,这意味着绝对资源本身所在的位置与被引用的实际文件的位置无关。

    2、相对URL

    相对URL(relative URL)以包含URL本身的文件夹的位置为参考点,描述目标文件夹的位置。如果目标文件与当前页面(也就是包含URL的页面)在同一个目录,那么这个文件的相对URL仅仅是文件名和扩展名,如果目标文件在当前目录的子目录中,那么它的相对URL是子目录名,后面是斜杠,然后是目标文件的文件名和扩展名。在使用相对路径时,我们用符号“.”来表示当前目录,用符号“..”来表示当前目录的父目录。

    以下为建立路径所使用的几个特殊符号,及其所代表的意义。

    .:代表目前所在的目录,相对路径。 如:<a href="./abc">文本</a> 或 <img src="./abc" />
    ..:代表上一层目录,相对路径。 如:<a href="../abc">文本</a> 或 <img src="../abc" />
    ../../:代表的是上一层目录的上一层目录,相对路径。 如:<img src="../../abc" />
    /:代表根目录,绝对路径。 如:<a href="/abc">文本</a> 或 <img src="/abc" />
    D:/abc/:代表根目录,绝对路径。

    谈谈src和href的区别

    src和href都是用于外部资源的引入,像图片、CSS文件、HTML文件、js文件或其他web页面等。
    那么在SRC和HREF之间是否有一个明确的区别呢?在哪些地方或者什么时候应该用SRC还是HREF?我想它们的使用并不是可以随意替换的。
    我先给出几个这两个属性的使用例子:

    • 引用css文件时:href="cssfile.css"
    • 引用js文件时:src="myscript.js"
    • 引用图片:src="mypic.jpg"
    • 网站链接:href="http://www.webpage.com"

    它们之间的主要区别可以用这样一句话来概括:src用于替代这个元素,而href用于建立这个标签与外部资源之间的关系。

    下面是别人在Quora中的解释:

    src is to used to add that resource to the page, whereas href is used to link to a particular resource from that page.
    When you use <link href="style.css" rel=stylesheet" /> in your webpage, the browser sees that its a style sheet and hence continues with the page rendering as the style sheet is downloaded in parellel.
    When you use <script src="script.js"></script> in your webpage, it tells the browser to insert the resource at the location. So now the browser has to fetch the js file and then loads it. Until the browser finishes the loading process, the page rendering process is halted. That is the reason why YUI recommends to load your JS files at the very bottom of your web page.

    其实这里有一个问题:浏览器渲染页面的过程和顺序是怎样的?如果DOM和CSSOM的构建是可以并行的,或者是串行但不保证顺序的,那么用href表示CSS也不一定会不阻塞页面渲染。(留个作业,后面完成)

    相关文章

      网友评论

          本文标题:JS基础知识点总结--好记性不如烂笔头

          本文链接:https://www.haomeiwen.com/subject/yyztjqtx.html