面试题集—（DOM元素渲染原理）

1. 在浏览器内核可以分为渲染引擎，js引擎

2. 在构建DOM的时候解析器遇到JS会暂停构建DOM，直到JS运行完毕才会继续执行DOM构建。

3. 重绘：只改变元素样式，风格，不影响布局

重排：元素的尺寸，位置，布局发生变化
重排一定会引起重绘，但重绘不一定导致重拍

4. 直接操作DOM缓慢的原因：

  - DOM属于渲染引擎中的东西，而JS是JS引擎中的东西，当通过JS操作DOM会涉及两个线程之间的通信。
 - 如果频繁操作DOM相当于一直在进行两线程之间的通信，而且还会导致重绘和重排

5. 在渲染页面的时候会出现白屏 / 无样式闪烁

浏览器工作的流程：
- 解析HTML生成DOM tree
- 解析CSS 生成 CSS Rule tree
- 将两者结合构建成rendering tree
- 布局和绘制，重绘（repaint）和重排（reflow）

可以使用服务器端渲染：1. 第一阶段SSR初步渲染DOM第一屏先在服务器端通过JS渲染。这是将大量的通信从客户网络 ->服务器转换成服务器 ->服务器这样可以大幅度缩减通信时间。2. 第二阶段，前端渲染
主要目的是减少首屏加载的时间
或者采用骨架屏，在页面还在加载时展示loading
FOUC原因：1. 使用import方法导入样式 2. 将样式表放在页面底部3. 有几个样式表放在HTML结构的不同位置。如果样式表比html加载要晚，当加载到这个样式的时候页面会停止之前的渲染，等样式表被加载和解析之后次啊会重新渲染页面才会出现断在的闪烁。
方案：使用LINK标签，反正该HRAD中

6. 从输入URL到页面展示的详细过程

输入网址 -> DNS解析 -> 建立tcp连接 -> 客户端发送HTTP请求 -> 服务器处理请求 -> 服务器响应请求 -> 浏览器展示HTML -> 浏览器发送请求获取其他资源

参考： https://blog.csdn.net/lvxin15353715790/article/details/89930313

DNS:通过主机名最终获得该主机名对应的IP地址的过程叫做域名解析
DNS查询的两种方式：递归查询和迭代查询
TCP三次挥手的目的：为了防止已经失效的连接请求报文突然又传送到服务端，因而产生错误
301/302区别
301和302都表示重定向，301表示旧地址被永久移除，302表示旧地址资源还在，只是临时的
Nginx反向代理

客户端请求nginx,nginx请求应用服务器，然后将结果返回客户端

image.png

7. 前端性能优化

减少HTTP请求次数，大小
css ，js 放到外部文件中，避免使用style javascript标签直接引入
设置缓存
cache-control / expires / etag / last-modified
尝试使用PWA模式：
使用静态资源分域存放增加下载并行数

<link rel="stylesheet" href="//cdn1.domain.com/path/main.css" >
<script src="//cdn2.domain.com/path/main.js"></script>

接口缓存数据
使用一部的js资源

<script src="main.js" defer></script>
<script src="main.js" async></script>

async 加载无序，defer时有序的，都不会阻塞html解析

避免js /css 文件过长，合理拆分
图片尽量指定大小，避免图片加载过程中发生大量重排。图片里过大的时候可以使用图片懒加载，图片压缩，如果是小图片，可以合理使用base64内嵌图片，可以根据移动端屏幕尺寸和分辨率，加载不同大小的图片

<picture>
    <source media="(min-width: 320px) and (max-width: 640px)" srcset="img/minpic.png">
    <source media="(min-width: 640px)" srcset="img/middle.png">
    <img src="img/picture.png" alt="this is a picture">
</picture>

减少DOM元素数量和深度
尽量减少使用js动画，可以使用css动画代替，由于js直接操作DOM容易引起页面的重排
不要频繁操作DOM ,可以批量操作
对需要重复使用的对象，设置变量缓存它，避免重新查找
尽量使用事件代理，避免直接事件绑定
避免scroll ，touchmove连续事件处理，可以设置时间节流，用settimeout
参考：https://www.jianshu.com/p/d9c20eafa67e

8. PWA渐进式web应用程序

可靠（即使网络不稳定，也可以瞬间加载并展示）
快速响应，操作平滑流畅
粘性（用户可以添加到桌面上）
主要有 APP Manifest , Service Worker , Push API , Notification API
1.service work--离线缓存
优点：良好的离线体验 / 同期的后台同步 / 消息推送通知 / 拦截和处理网络请求 / 管理资源缓存 /
前提条件： HTTPS环境下 / 其缓存之际依赖于 Cache API / 依赖于HTML5 fetch API / 依赖于promise
生命周期
installing（service worker 注册之后，开始安装，触发 install事件回调指定一些静态资源安装） -> installed （安装完成，等待其他service worker 线程关闭）-> activating （如果没有被其他的service worker控制，允许当前的worker完成安装）-> activated （处理activate事件回调，处理fetch ，aync,push事件）-> redundant(被替换，被销毁)

manifest.json
能够将你浏览的网页添加到你的手机屏幕上，
在安卓上可以全屏启动不显示地址栏


{
    //被提示安装应用时出现的文本
    "name": "PQJ-PWA",
    //添加至主屏幕后的文本
    "short_name":"PQJ",
    "description": "测试demo",
    //添加之后，启动地址
    "start_url": "/index.html",
    //图标信息
    "icons": {
      "128": "/asset/sw.jpg"
    },
    "developer": {
      "name": "pqj",
      "url": ""
    },
    "display": "standalone",
    "background_color": "#287fc5",
    "theme_color": "#fff",
    "permissions": {
        "desktop-notification": {
          "description": "Needed for creating system notifications."
        }
      }
} 

<link rel="manifest" href="/mainfest.json" />

Push Notification- 推送通知
Push：服务器端将更新的信息传递给 SW ，Notification： SW 将更新的信息推送给用户。

参考：https://blog.csdn.net/margin_0px/article/details/83000235
https://www.jianshu.com/p/fad8aa9e277f

9. graphql优势

一个用于API的数据查询语言,主要目的在于使用简单描述数据需求和交互的灵活语法和系统

api有强类型schema，可以根据schema自动生成api
按需获取：可以决定返回的数据及结构
scheam支持拼接，可以整合接口