渲染

  • DOM|CSSOM => Object Model
  • Render Tree
  • Script会阻塞渲染进程,因为里面的内容会改变Render Tree
  • css的link标签在head中,在渲染body里面内容时候,已经知道了样式应该怎么渲染(提升性能),body出来之前把样式定了
  • script标签在body最底部,不然会阻塞后面标签内容的渲染
  • window监听的load事件,页面全部资源加载完之后(图片,视频也包括),才执行
  • document监听的DOMContentLoaded事件,DOM加载完成后就可以执行了
  • nodejs做的PDF渲染服务,puppeteer,headless browser 里面提供的几个回调状态(不同加载和渲染状态)(TO BE COMP)
  • 懒加载(img => src(小图的地址) | data-realsrc(真正大图的地址), 在最后的script标签里面(真正要用图的时候),再执行拉取资源替换图片的操作)
  • DOM查询缓存(构建list),合并DOM插入(document.createDocumentFragment)-通用处理策略
  • 事件节流(咱有个timeOutId,监听事件的时候呢,如果id有,就clear掉,如果没有,就赋值个定时器)

资源

  • 压缩,合并|分离
    • 构建工具处理这部分的plugin-模式,类型,经验总结(TO BE COMP)
  • 缓存 – 浏览器缓存策略
    • 文件命名
  • CDN - 域名CDN加速

安全

  • signature
  • DNS劫持(找运营商)
  • 上https
  • 456(集团接口正则匹配拦截)- 题目内容(公式加密转码后还是被误拦截了)
  • 集团安全组(端扫描)
  • http only cookie, 防止XSS攻击,获取cookie处理
  • 注意输入内容的控制(前端替换,后端替换),数据库maybe会报错(反解之后);长度控制(约定,在设计数据库字段时候对类型的设计);
  • 核心流程滑块+短信验证(XSRF)