前端笔记(运行环境)

爱吃薯条的Ray
200 阅读3分钟

运行环境

  • 运行环境即浏览器(server端有node.js)
  • 下载网页代码，渲染出页面，期间会执行若干JS
  • 要保证代码在浏览器中：稳定且高效

网页加载过程

题目

  • 从输入url到渲染出页面的整个过程 见知识点
  • window.onload和DOMContentLoaded的区别
    • window.onload资源全部加载完才能执行，包括图片
    • DOMContentLoaded DOM渲染完成即可，图片可能尚未下载 msedge_oDX6GTScQj.png

知识点

- 加载资源的形式

  • html代码
  • 媒体文件，如图片、视频等
  • javascript css

加载资源的过程

  • DNS解析：域名->IP地址
  • 浏览器根据IP地址向服务器发起http请求
  • 服务器处理http请求，并返回给浏览器

渲染页面的过程

  • 根据HTML代码生成DOM Tree
  • 根据css代码生成CSSOM
  • 将Dom Tree和CSSOM整合形成 Render Tree
  • 根据Render Tree渲染页面
  • 遇到script标签则暂停渲染，优先加载并执行JS代码，完成再继续
  • 直至把Render Tree 渲染完成

性能优化&体验优化

  • 是一个综合性问题，没有标准方案，但要求尽量全面
  • 某些细节问题可能会单独提问：手写防抖、节流

原则

多使用内存，缓存或其他方法 减少cpu计算量，减少网络加载耗时

从何入手

让加载更快

  • 减少资源体积：压缩代码
  • 减少访问此数：合并代码，SSR服务器渲染，缓存
  • 使用更快的网络：CDN

扩展：SSR

  • 服务器端渲染：将网页和数据一起加载，一起渲染
  • 非SSR(前后端分离)：先加载网页，再加载数据，再渲染数据
  • 早先的JSP ASP PHP，现在的vue React SSR

让渲染更快

  • CSS放在head,JS放在body最下面
  • 尽早开始执行JS，用DOMContenentLoaded触发
  • 懒加载(图片懒加载，上滑加载更多)
  • 对DOM查询进行缓存 msedge_0e9Fiy0SsC.png
  • 频繁DOM操作，合并到一起插入DOM结构 msedge_E8cMEGfKMQ.png
  • 节流throttle防抖debounce

防抖debounce

  • 用户在结束操作后才执行相关事件：如拖动滚动条，输入文字给出提示等
//ES5
function debounce(fn,delay = 500){
  // timer 是闭包中的
  let timer = null
  return function () {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(()=>{
      fn.apply(this,arguments)
      timer = null
    },delay)
  }
}
//ES6
function debounce(fn,delay = 500){
  // timer 是闭包中的
  let timer = null
  return (...args)=> {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(()=>{
      fn(...args)
      timer = null
    },delay)
  }
}
input.addEventListener('keyup',debounce(function(){
    console.log(input1.value)
}),600)

节流throttle

//ES5
function throttle(fn, delay = 100) {
  let timer = null
  return function () {
    if (timer) {
      return
    }
    timer = setTimeout(() => {
      fn.apply(this,arguments)
      timer = null
    }, delay)
  }
}
//ES6
function throttle(fn, delay = 100) {
  let timer = null
  return (...args)=> {
    if (timer) {
      return
    }
    timer = setTimeout(() => {
      fn(...args)
      timer = null
    }, delay)
  }
}
div1.addEventListener('drag',throttle(function (e) {
  console.log(e.offsetX,e.offsetY)
},200))

WEB安全

题目

常见的web前端攻击方式有哪些？

  • XSS跨站请求攻击
  • XSRF跨站请求伪造

XSS预防

  • 替换特殊字符，如<变成&lt;>变成&gt;
  • <script>变为&lt;script&gt;,直接显示，而不会作为脚本执行
  • 前端要替换，后端也要替换。双保险 应用：使用XSS插件 官网

XSRF攻击

  • 你正在购物，看中了某个商品，商品id是100
  • 付费接口是xxx.com/pay?id=100,但没有任何验证，或只有登入验证，你已经登入过了。
  • 我向你发送一封电子邮件，邮件标题很吸引人
  • 但邮件正文隐藏着<img src=xxx.com/pay?id=200/>链接
  • 你查看邮件，就帮我购买了id是200的商品

SXRF预防

  • 使用post接口
  • 增加验证，例如密码，短信验证码，指纹等秘钥。
avatar
文章
阅读
粉丝