浏览器基础梳理

渲染

• 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）

cookie

如果不设置有效期，默认存在内存，退出浏览器即没有了
设置之后，存在了本地存储里面，退出浏览器再重新登录，可以不用重新登录；

域名

• www or not
• https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/Choosing_between_www_and_non-www_URLs
• http://www.hyperarts.com/blog/www-vs-non-www-for-your-canonical-domain-url-which-is-best-and-why/

setcookie

如果请求的接口和origin不是一个域名
那么，设置的时候，需要加上； secure; same-site=none;来允许跨域请求，这样才能set上
要支持多个前端域名都可以访问，不过接口是其中一个域名，所以set-cookie的时候要增加这个配置

如果是Safari浏览器的一些版本，则这么设置就不可以了，除非修改浏览器配置；出于安全策略考虑，就保持一个根域，请求的origin和接口的域；如果需要使用cookie的情况下。

• https://bugs.webkit.org/show_bug.cgi?id=198181
• https://github.com/GoogleChromeLabs/samesite-examples
• https://web.dev/samesite-cookie-recipes/ - 说明了same-site属性的一些当下的情况和解决方案

  Require Secure with SameSite=None
  Flag: chrome://flags/#cookies-without-same-site-must-be-secure
  Chrome Status entry: Reject insecure SameSite=None cookies
  Turn on this flag along with the previous flag to have Chrome enforce the need for any SameSite=None cookie to also specify the Secure attribute.

web performance

• https://speakerdeck.com/stevekinney
• https://web.dev/i18n/zh/tbt/ - TBT的概念 - Total Blocking Time 总阻塞时间 (TBT)

  总阻塞时间 (TBT) 是测量加载响应度的重要实验室指标，因为该项指标有助于量化在页面交互性变为可靠前，不可交互程度的严重性，较低的 TBT 有助于确保页面的可用性。

performance.now()

https://developer.mozilla.org/zh-CN/docs/Web/API/Performance/now
oasis deltaTime计算

link

• https://blog.csdn.net/kaosini/article/details/42495471 比较早的一个说前端性能监控的文章，顺了下相关概念

Xpath

https://developer.mozilla.org/en-US/docs/Web/XPath

browserlist

• https://github.com/browserslist/browserslist

HTML

form

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form

  enctype
  If the value of the method attribute is post, enctype is the MIME type of the form submission. Possible values:
  
  application/x-www-form-urlencoded: The default value.
  发送前编码所有字符 - 空格转为加号，特殊符号转为ASCII HEX值
  multipart/form-data: Use this if the form contains <input> elements with type=file.
  不对字符编码
  text/plain: Introduced by HTML5 for debugging purposes.
  空格转换为加号，但不对特殊字符编码
  This value can be overridden by formenctype attributes on <button>, <input type="submit">, or <input type="image"> element

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/enctype

web APIs

DOM

• https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model

  The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a document on the web. This guide will introduce the DOM, look at how the DOM represents an HTML document in memory and how to use APIs to create web content and applications.

赞赏

感谢鼓励