2 HTML中的JavaScript

程序猿本员
144 阅读3分钟

HTML基础知识

html从服务器到浏览器显示过程

  1. DNS解析获取IP地址
  2. TCP3次握手
  3. HTTP获取HTML文件
  4. 浏览器渲染HTML：
    1. 从<html>开始生成DOM节点树
    2. 如果之间需要请求css、JavaScript文件，发送请求
    3. 获得css文件、<style>之后开始解析CSSOM
    4. Javascript获得文件后就会执行代码，并阻塞DOM/CSSOM生成
    5. 使用DOM和CSSOM来构建渲染树，其包含了所有可见的DOM节点及其对应的样式信息
    6. 布局：确定每个元素在页面上的位置
    7. 绘制：将元素渲染到屏幕上
  5. 断开TCP
    参考链接

css渲染过程

  1. 父元素先渲染，然后是子元素
  2. 每个元素上的所有css属性都必须有值，确定值：
    1. 样式声明（样式表：自定义/浏览器默认）
    2. 样式表冲突后，就计算层叠：
      比较重要性（自定义>浏览器默认）
      比较选择器权重值（自定义的还冲突） 后来者居上（权重相同情况下）
    3. 继承，注意有些属性是无法继承的，如background-color
    4. 赋予默认值
      参考链接

跨域问题

1. 不同源

协议、地址、端口号有一个不同，就是不同源

2. 起因

以为js脚本可以发送请求获得数据，这就涉及到隐私问题，如果不加以限制，则可能被非法脚本获得重要数据进行非法操作，比如银行转账等操作。

3. 解释

跨域就是js脚本请求了不同源的资源，服务器会返回，但是浏览器识别出跨域后将消息进行拦截，并报错

4. CORS

用于解决跨域请求，服务器在浏览器的配合下，决定自己资源的走向，即能否被不同域的网页加载

href与src区别

  • src：引用资源，替换当前元素。如image，script，iframe
  • href：超文本引用，指向其他资源。如link，a

<script>元素

作用

用于将JavaScript插入html中，两种插入方式

1. 直接在元素内部写js

<script>
    function sum(a,b){
        return a+b;
    }
</script>

2. 外部引入

属性src指向js文件地址，可以是跨域请求

<script src='http://local:5000/demo.js'></script>

3. 动态加载

通过js添加元素script，并设置属性src，注意此默认设置了async

let element = document.createElement('script');
element.src = 'demo.js';
element.async = false;//动态加载默认位true，显式修改位false
document.head.appendChild(element);

属性

  1. src:要执行的外部文件，可以跨域
  2. type:脚本语言内容类型（MIME类型），text/javascript（默认）、module（此类型才可以使用import来引入模块）、text/plain（指定脚本不被执行）
  3. async
    立即下载资源，延迟执行，但是不确定执行时机，且如果有多个script配置async，执行时没有顺序的
  4. defer
    立即下载，延迟脚本到html解析完成后（碰见</html>）执行，只对外部脚本有用，多个script配置defer后，按照出现顺序进行执行
  5. crossorigin:anonymous（默认，也可以写''）/use-credentials
    配置CORS，<script>本身就能跨域，但是跨域脚本执行时报错后默认只会抛出错误script Error，而不会给出详细错误，如果配置use-credentials时，就能抛出详细错误到window.error中，当然代价就是服务器response头部必须包含'Access-Control-Allow-Credentials' = true
  6. intergrity:验证子资源内容完整性
avatar
文章
阅读
粉丝