面试视频知识点整理1-12(渲染机制,js运行机制,页面性能,错误监控)
技巧(赞美面试官研究的比较深)
1、渲染机制
什么是DOCTYPE及作用?
DTD(文档类型定义)是一系列的语法规则,用于定义文件类型。浏览器会根据它来判断文档类型,决定使用何种协议来解析以及切换浏览器模式;
DOCTYPE用来声明文档类型和DTD规范用于文件的合法性验证,如果不合法解析就会报错
html5:<!DOCTYPE html> html4.01分严格和宽松模式
浏览器的渲染过程?
1)解析html,解析css
2)将html,css整合在一起
3)生成renderTreee
4)渲染
重排Reflow?
DOM结构中各个元素都有自己的盒子,这些都需要浏览器根据各种样式来计算结果将元素放到它出现的位置,这个过程称之为reflow。
触发Reflow:DOM节点发生变化,css样式修改,窗口发生改变,修改字体等
重绘Repaint?
将DOM的按照计算的属性,特性呈现再页面上(可以将要操作的节点放在一个虚拟节点,一次append避免多次Repaint)
2、js运行机制
如何理解单线程?
在同一时间,只能做一件事
什么是任务队列?
同步任务和异步任务,同步任务会优先执行,异步任务会放到队列里,等同步任务执行完才执行
异步任务:setTimeout、setInterval、DOM事件、promise
什么是Event Loop?
1、运行栈
2、异步队列
3、将运行栈的任务执行完,然后去将队列里的任务放入运行栈中执行,执行完了。如此循环至队列为空
3、页面性能
1、资源压缩合并,减少http请求
2、非核心代码异步加载
1)动态加载脚本
2)async
3)defer
4)按需加载
3、浏览器缓存
缓存的分类:
1)强缓存(直接拿来用)
Expires
Cache-Control
2)协商缓存(不确定可以用,要上服务器询问)
Last-modified If-Modified-Since
Etag If-None-Match
4、使用CDN
5、预解析DNS
<meta http-equiv="x-dns-prefetch-control" content="on">
4、错误监控
前端错误的分类
即时运行错误:代码错误
资源加载错误
错误的捕获方式
即时运行错误
try catch
window.onerror
资源加载错误
object.onerror
performance.getEntries()
Error事件捕获
跨域的js运行错误如何捕获?
1)在script标签增加crossorigin属性
2)设置js响应头Access-Control-Allow-origin:*
上报错误的原理
1)采用Ajax通信的方式上报
2)通过image对象上报
面试视频知识点整理1-12(渲染机制,js运行机制,页面性能,错误监控)的更多相关文章
- 面试 09-02.js运行机制:异步和单线程
09-02.js运行机制:异步和单线程 #前言 面试时,关于同步和异步,可能会问以下问题: 同步和异步的区别是什么?分别举一个同步和异步的例子 一个关于 setTimeout 的笔试题 前端使用异步的 ...
- 从浏览器多进程到JS单线程,JS运行机制的一次系统梳理
前言 见解有限,如有描述不当之处,请帮忙及时指出,如有错误,会及时修正. ----------超长文+多图预警,需要花费不少时间.---------- 如果看完本文后,还对进程线程傻傻分不清,不清楚浏 ...
- 从浏览器多进程到JS单线程,JS运行机制最全面的一次梳理
前言 来源:https://dailc.github.io/2018/01/21/js_singlethread_eventloop.html 见解有限,如有描述不当之处,请帮忙及时指出,如有错误,会 ...
- 如何通过setTimeout理解JS运行机制详解
setTimeout()函数:用来指定某个函数或某段代码在多少毫秒之后执行.它返回一个整数,表示定时器timer的编号,可以用来取消该定时器. 例子 ? 1 2 3 4 5 console.log(1 ...
- Js 运行机制 event loop
Js - 运行机制 (Even Loop) Javascript 的单线程 - 引用思否的说法: JavaScript的一个语言特性(也是这门语言的核心)就是单线程.什么是单线程呢?简单地说就是同一时 ...
- 浅谈java编译机制和运行机制
源文件和字节码的组成方式 源文件: 拓展名后跟java的文件即java的源文件. Java 源码编译由以下三个过程组成: 1.分析和输入到符号表 2.注解处理 3.语义分析和生成class文件 流程图 ...
- js 运行机制
<script> console.log(1) setTimeout(function(){ console.log(3) },0) console.log(2) </script& ...
- Js 运行机制 (重点!!)
一.引子 本文介绍JavaScript运行机制,这一部分比较抽象,我们先从一道面试题入手: 这一题看似很简单,但如果你不了解JavaScript运行机制,很容易就答错了.题目的答案是依次输出1 2 3 ...
- js 运行机制简单了解
一.如何理解 JS 的单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊. JavaScrip ...
- 【Android 面试基础知识点整理】
针对Android面试中常见的一些知识点整理,Max 仅仅是个搬运工.感谢本文中引用文章的各位作者,给大家分享了这么多优秀文章.对于当中的解析,是原作者个人见解,有错误和不准确的地方,也请大家积极指正 ...
随机推荐
- Filters in ASP.NET Core(Net6之过滤器)
Filters in ASP.NET Core 如果觉得样式不好:跳转即可 (md文件复制过来有些样式会不一样) 原文地址:https://lifengying.site/archives/net6% ...
- npm 局部安装 jbrowse
#此处不要加 -g参数 , -g 是全局安装 npm install @jbrowse/cli #用npx 才能使用这个包,无法按照官方文档直接使用 npx jbrowse --version
- MapReduce原理——切片代码分析
(1)程序先找到数据存储的目录 (2)遍历目录对每个文件进行切片 (3)遍历一个文件: 获取文件大小 计算切片大小 默认情况下,切片大小等于blocksize 每次切片时都要判断剩下部分师否大于块的1 ...
- Pycharm去除白色波浪线
- go 编程基础学习笔记
dos 命令 2023-01-26 1.切换盘符 只要输入 c: d: e: 等即可 2.显示目录详细内容 dir 3.切换目录 cd 留意 一个点 . 代表当前目录, 两个点.. 代表上一级目录 4 ...
- excel快速生成相同内容
先选中你所需要的单元格,如图所示: 输入自己想要的字符,然后按ctrl+enter,如图所示:
- allure-动态参数,报告优化方法。
1.allure.title方法 #前置需要在源文件:\venv\Lib\site-packages\allure_pytest\listener.py#在该文件修改为这样:test_result.p ...
- Kubernetes--资源注解
资源注解 除了标签(label)之外,Pod与其他各种资源还能使用资源注解(annotation).与标签类似,注解也是"键值"类型的数据,不过它不能用于标签及挑选Kubernet ...
- Java笔记_this关键字_HomeWork(9 - 题)
第九题 /** * @ClassName HomeWork09 * @Description TODO * @Author Orange * @Date 2021/4/26 16:20 * @Vers ...
- Linux学习 --- 网络基础知识
1.1 IP地址 IP地址由两部分组成 网络号和主机号 .网络号为IP地址的高位组成,而主机号是IP地址的低位组成,两个的大小取决于网络的类型. IP地址根据网络的地址不同分为:A类,B类,C类, ...