JavaScript高程第二章重读之问题提炼

  • 1.<script>元素有哪些属性?
    • 8个
    • async,表示即可开始下载脚本,但不能阻止其他页面动作
    • charset,代码字符集。很少使用
    • crossorigin,配置cors跨域设置。默认不使用cors。
    • defer,脚本延迟到文档被解析和显示之后再执行。只对外部脚本有效。
    • integrity,允许比对接收到的资源和指定的加密签名以验证子资源完整性(SRI)。如果接收到的资源的签名与这个属性指定的签名不匹配,则页面会报错,脚本不会执行。该属性可以用来确保内容分发网络(CDN)不会提供恶意内容。
      • vue 2.6.x版本中的yarn.lock中下载的依赖中都会有integrity属性,作用是保证资源完整性。不知道yarn.lock里的integrity和<script>里的integrity有相同的作用
      • yarn.lock参考
      • vue项目下载package.json中的包依赖后,会生成本地的package-lock.json文件,文件中每个依赖项都包含integrity属性,作用和<script>中的integrity属性相同。
      • <script>标签的integrity属性是防范这种问题的一个武器,但这个属性也不是所有浏览器都支持。
    • language,废除
    • src,包含要执行的代码的外部文件
    • type,代替language,表示代码块中脚本语言的内容类型(MIME类型)
    • 惯例都是text/javascripttext/javascripttext/ecmascript都废弃了;
    • js文件的MIME类型通常是application/x-javascript
    • 在非IE浏览器中有效的其他值还有application/javascriptapplication/ecmascript
    • 若值是module则代码会被当成ES6模块,只有这种情况可以使用import和export。

  • 2.使用<script>的方式?

    • 1.直接在网页中嵌入js代码
    • 2.在网页中包含外部js文件
  • 3.两种使用script的方式有何异同?

    • 包含在<script>中的代码会被从上到下解释。在<script>中的代码被计算完成之前,页面的ita内容不会被加载,也不会显示。且行内js代码中不能出现字符串</script>。可以使用转义字符’’。

    • 要包含外部文件中的js代码,必须使用src属性。src属性的值是一个URL,指向包含js的文件。与解释行内JavaScript一样,在解释外部JavaScript文件时,页面也会阻塞。(阻塞时间也包含下载文件的时间。)

    • 外部js文件的扩展名是.js,但不是必须的。浏览器不检查扩展名。所以可以使用服务器端脚本语言动态生成js代码。

    • 使用src属性后,不可以再在<script></script>之间写代码。因为浏览器会忽略行内代码而只下载外部文件。

    • 可维护性

    • 缓存

    • 适应未来


  • 4.<script>元素放在<head>元素里与放在<body>元素页面内容后面的区别?
    • 所有的<script>元素都放在head元素里,浏览器就必须先把所有的js代码下载、解析和解释完之后,才能开始渲染页面(浏览器解析到<body>)。这会导致页面渲染的明显延迟。为了解决这个问题,所以将script元素放在了body页面内容之后。

  • 5.推迟执行脚本的方式?

    • 使用defer属性。脚本被延迟到页面解析完之后在运行。浏览器立即下载但延迟执行
  • 6.异步执行脚本的方式?

    • 使用async属性,但不保证脚本的执行顺序。
    • 给脚本添加async的目的在于告诉浏览器不必等脚本下载和执行完后再加载页面。同样也不必等到该异步脚本下载和执行后再加载其他脚本。异步脚本不应该在加载期间修改DOM。
    • 异步脚本保证会在页面的load事件前执行,但可能会在DOMContentLoaded(参见第17章)之前或之后。
  • 7.动态加载脚本的方式?

    • 使用DOM API动态添加script元素。
    • 以这种方式获取的资源对浏览器预加载器是不可见的。这会严重影响它们在资源获取队列中的优先级。根据应用程序的工作方式以及怎么使用,这种方式可能会严重影响性能。要想让预加载器知道这些动态请求文件的存在,可以在文档头部显式声明它们:
      <link rel="preload" href="gibberish.js">

  • 8.文档模式的类型及其之间的区别?
    • 混杂模式quirks mode,混杂模式在所有浏览器中都以省略文档开头的doctype声明作为开关
    • 标准模式standards mode,<!DOCTYPE html>
    • 两种模式的主要区别只体现在通过CSS渲染的内容方面,但对JavaScript也有一些关联影响,或称为副作用。
      • 副作用有哪些?
    • 准标准模式almost standard mode

  • 9.<noscript>元素是为了解决什么问题?
    • 被用于给不支持js的浏览器提供替代内容
    • 开启条件:
      • 浏览器不支持脚本
      • 浏览器对脚本的支持被关闭
    • 上述情况下,<noscript>内的内容会被渲染
    • Vue中也会使用到这个元素去做一些动作
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值