Please enable JavaScript.

Coggle requires JavaScript to display documents.

js基础 (js-web-API (Dom的实质 (Document Object Model, Dom的本质是一个树, attribute 节点…

- - - - 如果识别浏览器的类型？
      - 分析拆解url各个部分
    - - navigator:浏览器信息
      - screen(屏幕的信息）
      - location（地址信息)
      - history(前进后退信息)
  - - - 编写一个通用的事件监听函数
    - - addEventListener
    - - 把代理事件绑定到父元素上，优点，代码简洁，减少浏览器内存占用，但是，不要滥用
  - - - readyState
        
        0-(未初始化)还没有调用send()方法
        
        1-（载入)一调用send()方法，正在发送请求
        
        2-（载入完成）send()方法执行完成，已经接收到全部相应内容
        
        3-（交互)正在解析响应内容
        
        4-（完成）响应内容解析完成，可以在客户端调用
      - status
        
        2xx-表示成功处理请求，如200
        
        3xx需要重定向，浏览器直接条状，如301 302 304
        
        4xx- 客户端请求错误， 404表示没有找到页面，403没有页面
        
        5xx服务器端错误
    - - 同源策略
        
        ajax请求是，浏览器要求当前页面和server必须同源(安全）
        
        同源：协议，域名，端口，三者必须一致
        
        加载图片css js可无视同源策略
        
        实现
        
        <link href=跨域的css地址 />
        
        <script src=跨域的js地址></script>
        
        <img src=跨域的图片地址/>
        
        用处
        
        <img />可用于统计打点，可用于第三方统计服务
        
        <link /><script>可使用CDN, CDN一般是外语
        
        <script>可实现JSONP
      - 服务器设置cors，设置返回字段setHeader,允许跨域
  - - - cookie
        
        作用
        
        被借用做本地存储
        
        本身用于浏览器与server端通信的
        
        特点
        
        缺点
        
        只能用document.cookie="..."来修改，泰国与简陋
        
        http请求是需要发送到服务端，增加请求数据量
        
        大小：最大4kb
    - - 特点
        
        Api简单易用setItem getItem
        
        不会随着http请求发送出去
        
        Html5专门为存储而设计，最大可存5M
      - 区别
        
        localStorage数据会永久存储，除非代码或手动删除
        
        sessionStorage数据只存在于当前会话，浏览器关闭则清空
        
        一般用loaclStorage会多一些
    - - 容量
      - api的易用性
      - 每次请求是否会带上这些信息
- - - - 普通类型的值会将原先的值拷贝一份然后赋给后面的值，而内存中也会拷贝一份，也就是说栈中，key: a, value:
        内存地址1.将会拷贝一份到key:b,value:内存地址2，两者除了内存地址中的值相同以外，其他的不相同，两个变量被分配到不同的内存地址上。
      - 常见类型 undefined, 字符串, number, boolean, Symbol
    - - 对象类型是复杂类型，js引擎拿到的时候，会将内存头尾划分成栈与堆，那么当存储复杂类型时，key:a，value:内存地址1会将内存地址复制，那么就会生成另外一个key: b,value:内存地址1.注意虽然key不同，但是他们的value存着同一个内存地址。而内存尾是堆，那么那个复杂对象就被存储在这里，他的key是内存地址，他的val是那个存储的对象
      - 常见类型：对象，数组，(特殊的有null,指针指向空地址，还有函数，但是不用于存储数据，所以没有拷贝，复制函数这一说)
    - - 考虑到性能问题，引用类型太大，需要考虑到性能，需要深拷贝
    - - 操作符
        
        typeof
        
        可判断的类型,undefined,number,string,boolean,function
        
        不可以判断的类型null,数组，对象，这三者都是object
  - - - extends表示继承
      - super表示继承父类的构造函数
      - 扩展或重写方法
  - - - js是单线程语言，只能做一个事儿
      - 浏览器和node.js已支持js启动进程，如Web Worker
      - js和Dom渲染公用同一个线程，因为js可修改Dom结构
      - 遇到等待（网络请求，定时任务）不能卡住
      - 需要异步
      - 回调callback函数形式
- - - - html代码
      - 媒体文件，如图片，视频
      - javascript css
    - - DNS解析：域名 -> IP地址
      - 浏览器根据IP地址想服务器发起http请求
      - 服务器处理http请求，并返回给浏览器
    - - 根据HTML代码生成DOM Tree
      - 根据CSS代码生成CSSDOM
      - 将DOM Tree和CSSOM整合成Render Tree
    - - 根据Render Tree渲染页面
      - 遇到<script>则暂停渲染，优先加载并执行js代码，完成再继续
      - 直至把render Tree渲染完成
    - - onload表示当页面的全部资源加载完才会执行，包括图，视频等
      - DOMContentloaded表示Dom渲染完即可执行，此时图片，视屏还可能没有加载完
  - - - 多使用内存，缓存或其他方法
      - 减少CPU计算量，减少网络加载耗时
      - （适用于所有编程的性能优化-空间换时间)
    - - 让加载更快
        
        减少资源体积：压缩代码
        
        减少访问次数：合并代码，ssr服务器端渲染，缓存
        
        使用更快的网络:CDN
      - 让渲染更快
        
        css放在head，js放在body最下面
        
        今早开始执行js,用DOMContentLoaded触发
        
        懒加载（图片懒加载，上滑加载更多）
      - 让渲染更快-2
        
        对DOM查询进行缓存
        
        频繁Dom操作，合并到一起插入Dom结构
        
        节流，防抖
    - - 缓存
        
        静态资源加hash后缀，根据文件内容计算hash,文件内容不变，则hash不变，则url不变，url和文件不变，则自动触发http缓存机制，返回304
      - ssr
        
        服务器端渲染：将网页和数据一起加载，一起渲染
        
        非ssr(前后端分离）：先加载网页，在加载数据，再渲染数据.
      - 懒加载
      - 缓存DOM查询
        
        利用js查询比dom操作快很多的特性
      - 多个DOM操作一起插入到Dom结构
      - 尽早执行js语句
      - 防抖
  - - - 作用形式：比如说发表一篇博客，其中嵌入<script>脚本
      - 脚本内容：获取cookie,发送到我的服务器(服务器配合跨域)
      - 发布这篇博客，有人查看它，我轻松收割访问者的cookie
      - 预防
        
        替换特殊字符，如<变成&It; >变成&gt
        
        <script>变成<script>直接显示，而不会作为脚本执行
        
        前端要替换，后端也要替换，都做总不会有错
      - 跨站请求攻击
    - - 我向你发送一封电子邮件，邮件标题很吸引人，但邮件正文隐藏着
        <img src=xxx.com/pay?id=200/>，你已查看邮件，就帮我购买id是200的商品
      - 1.使用post接口 2.增加验证，断行验证码，指纹等