js学习笔记(2)
-
渲染机制、 JS运行机制、 页面性能、 错误监控
一. 渲染机制类
-
1）什么是DOCTYPE及作用？
-
2）浏览器渲染过程
-
3）重排Reflow
-
4）重绘Repaint
-
5）布局Layout
答案解析：
-
1）DTD（文档类型定义）是一系列的语法规则，用来定义XML或HTML的文件类型。浏览器会使用它来判断文档类型，决定使用何种协议来解析，以及切换浏览器模式。
（大白话解释：DTD就是告诉浏览器我是什么文档类型，浏览器根据这个来判断我用什么引擎来解析它，来渲染它）
DOCTYPE是用来声明文件类型和DTD规范的，一个主要的用途便是文件的合法性验证。
（大白话解释：DOCTYPE就是通知浏览器告诉当前的文档包含的是哪个DTD,也就是哪个文档类型）
-
DOCTYPE类型：
HTML5、
HTML 4.01 Strict 、(该DTD包含所有HTML元素和属性，但不包括展示性的和弃用性的元素（比如：font）)
HTML 4.01Transitioanal (该DTD包含所有HTML元素和属性，包括展示性的和弃用性的元素)
-
2)浏览器渲染过程：
-
3)重排：DOM结构中的各个元素都有自己的盒子，这些都需要浏览器根据各种样式来计算并根据计算结果将元素放到它该出现的位置的过程。
（大白话：我们的DOM结构它的DOM节点不是固定的，我们刚拿到dom的时候，js可以修改dom,重新修改之后的浏览器的行为就是重排。）
触发Reflow的行为:增删改查DOM结点，移动dom位置，搞个动画，修改csss样式，修改网页文字。
-
4）重绘Repaint：当各种盒子的位置，大小以及其他属性都确定之后，浏览器编把这些元素的特性绘制了一遍，于是页面就出现了的过程。
-
当 DOM 元素的属性发生变化 (如 color) 时, 浏览器会通知 render 重新描绘相应的元素, 此过程称为 repaint。
触发重绘的行为：DOM改动、CSS改动；
如何减少重绘Repaint行为：
1. 直接改变className，如果动态改变样式，则使用cssText（考虑没有优化的浏览器）
2. 让要操作的元素进行”离线处理”，处理完后一起更新
a) 使用DocumentFragment进行缓存操作,引发一次回流和重绘；
b) 使用display:none技术，只引发两次回流和重绘；
c) 使用cloneNode(true or false) 和 replaceChild 技术，引发一次回流和重绘；
二.js运行机制
console.log(1);//js是单线程，在同一时间只做同一件事，js从上到下执行，先执行1
setTimeout(function (){//然后到setTimeout,这是个异步任务，异步任务要挂起，先不执行。
console.log(2);
},0);
-
console.log(3);//再执行3，执行完再回到2
//运行结果：1 3 2
console.log('A');
while(1){
}
console.log('B'); -
结果是A. 同步任务，whie会不断地去循环，B不会被执行，因为它的同步任务没有被执行完，更不会执行到B.
console.log('A');
setTimeout(function(){
console.log('B');
},0);
while(1){
}
结果是A. 同步任务执行完之前，任何的异步任务都是没有响应的。
//异步任务的放入时间和执行时间
for(var i=0;i<4;i++)
{
setTimeout(function(){
console.log(i);
},1000)
}
结果是连续4个4.------for循环是一个同步任务。这里浏览器会有一个timer模块，主要处理setTimeout或者setInteval，它是一个定时器，到了一定的时间才会把这个语句放在异步队列的过程中。也就是说，for循环在执行过程中，并没有放在异步队列中去，只是每次加1的时候定时器只是在记录时间，只有当1000(即使设置的是0，浏览器也会默认时间最少是4毫秒)这个时间到了，才会把setTimeout这个函数体扔到异步队列中，异步队列在等待一个叫“事件循环”的东西来执行。
-
任务队列和Event Loop
-
异步任务
-
setTimeout和seiInterval
-
DOM事件
-
ES6中的Promise
-
三、页面性能类
-
提升页面性能的方法有哪些？
-
资源压缩合并，减少http请求
-
非核心代码异步加载-----异步加载的方式------异步加载的区别
-
利用浏览器缓存-----缓存的分类------缓存的原理
-
使用CDN
-
预解析DNS
语句1.《重点，要说出来
《meta http-equiv="x-dns-prefetch（预先载入）-control" content="on">》
语句2.<link rel="dns-prefetch" href="//host_name_to_prefetch.com">
页面中的所有a标签在高级浏览器中是默认打开了DNS预解析的就是你不需要加<link rel="dns-prefetch" href="//host_name_to_prefetch.com">，a标签也是可以解析的。
但是你的页面是https协议开头的，很多浏览器是默认关闭DNS解析的。
-
异步加载的方式
-
动态脚本加载--通过动态创建添加script标签实现外部js的异步加载与执行。
-
defer
-
async
-
-
异步加载的区别
-
-
async是在加载完之后立即执行，如果是多个，按照加载的顺序无关
-
-
浏览器缓存(资源文件在浏览器中存在的备份、副本。说白了就是我从网上下载图片，缓存到本地，这个本地就是电脑的磁盘，浏览器在下载请求的时候，相当于在磁盘直接读了，而不会再去请求图片的地址)
-
强缓存（不请求，直接用）
-
Expires(过期时间) Expires:Thu,21 Jan 2017 23:39:02 GMT(服务器显示的绝对时间)
-
Cache-Control Cache-Control:max-age=3600（客户端的时间。相对时间）
-
也就是说我拿到资源之后，在3600秒之内不会再去请求服务器了。直接拿缓存。
-
比较的时候以浏览器本地的时间做比较。而下发的时候是服务器的绝对时间。会有偏差。
-
如果服务器中这两个时间都下发了，以相对时间为准。
-
-
协商缓存
-
Last-Modified If-Modified-Since
-
Etag if-None-Match
-
-
跟缓存相关的http头有哪些？//缓存是为了提高性能的
Expires Cache-Control Last-Modified If-Modified-Since Etag if-None-Match
错误监控类
问法：如何检测js错误？、如何保证你的产品质量？
-
前端错误的分类
-
即时运行错误：代码错误
-
资源加载错误
-
-
错误的捕获方式
-
即时运行错误的捕获方式-------1. try...catch 2.window.onerror
-
资源加载错误---------1. object.onerror 2. performance.getEntries() 3.Error事件捕获
-
跨域的js运行错误可以捕获吗？如何处理？
------1.在script标签增加crossorigin属性
-------2.设置js资源响应Access-Control-Allow-Origin:*
-
-
上报错误的基本原理
-
采用Ajax通信的方式上报
-
利用Image对象上报
-
-
4.
-
-
