渲染机制/页面性能/错误监控

geekidentity 发布于2019-08-23 15:33 / 1725人阅读

摘要：所以当执行完后再执行秒后输出最后的打印顺序是什么这道题需要了解运行机制是单线程所谓单线程就是同一时间只能做一件事，任务队列同步任务和异步任务是异步任务，而是同步任务。

渲染机制

什么是doctype及作用
必须按规范来说

浏览器渲染过程
dom + cssom -> reder tree -> layout

重排reflow

定义：DOM结构中的各个元素都有自己的盒子(模型)，这些都需要浏览器根据各种样式来计算并根据计算结果将元素放到它该出现的位置，这个位置称之为reflow。
触发：
当你增加、删除、修改DOM结点时，会导致reflow或repaint.
当你移动DOM的位置，或搞个动画的时候
修改CSS样式的时候
当调整窗口大小，或者滚动的时候有可能会触发。

重绘repaint

定义：
当各种盒子的位置、大小以及其他属性，例如颜色、字体大小都确定下来后，浏览器于是把这些元素都按照各自的特性绘制一遍，于是页面的内容出现了。只要页面显示的发生了变化都是repaint。
触发repaint：
DOM改动
CSS改动
避免发生repaint：
把所有的DOM都添加到document fragment里面。
布局layout

*js运行机制

......有机会还需要继续了解
题目一：

console.log(1);
setTimeout(function(){
   console.log(2);
},0);
console.log(3);
//1，3，2
//setTimeout是异步任务，所以不会和console.log同步执行。所以当执行完console.log(2)后再执行setTimeout,0秒后输出3.
//最后的打印顺序是什么？这道题需要了解js运行机制

js是单线程：所谓单线程就是同一时间只能做一件事，

任务队列：

同步任务和异步任务：
setTimeout、 setInterver是异步任务，而console.log是同步任务。

题目二：

console.log("A");
while(true){
}
console.log("B");
//输出A
//因为while会不断循环导致console.log(B)无法执行。

题目三：

console.log("A");
setTimeout(function(){
   console.log(B);
},0);
while(1){
}
//1是true,0是false.

题目四：

for(var i=0;i<4;i++){
setTimeout(function(){
   console.log(i);
},1000);
}
//4，4，4，4
//异步队列执行时间
//异步任务的放入时间和执行时间
//和上面几题是两个概念

如何理解js单线程
在一个时间内只能干一件事

什么是任务队列
任务队列有同步任务和异步任务.

什么是Event Loop(事件循环)

什么时候会开启异步任务：
setTimeout和setInterval
DOM事件：需要用到addEventlistener,当触发某个事件，放入异步任务队列中
ES6中的promise

理解哪些语句加入到异步队列

*理解语句放入异步队列的时机

页面性能

提升页面性能的方法有哪些

资源压缩合并，减少HTTP请求.(把资源文件变小)

非核心代码异步加载->异步加载的方式->异步加载的区别

*利用浏览器缓存->缓存的分类->缓存原理

使用CDN(属于网络优化)

预解析DNS

注：当一次打开时，浏览器缓存起不到任何作用，但是使用CDN可以起到作用。

2)异步加载

异步加载的方式：

动态脚本加载(动态创建结点)

defer

async

异步加载的区别:

defer在HTML解析之后才会执行，如果是多个，按照加载顺序依次执行。

async是在加载完之后立即执行，如果是多个，执行顺序和加载顺序无关。

3)浏览器缓存

浏览器缓存的分类
强缓存：

协商缓存：

错误监控

前端错误的分类：

即时运行错误：代码错误

资源加载错误

每种错误的捕获方式
即时错误的捕获方式：

try...catch

window.onerror

资源加载错误：

object.onerror

performance.getEntries()

Error事件捕获

延伸：跨域的js运行错误可以捕获吗，错误提示什么，应该怎么处理？

在script标签添加crossorigin属性

设置js资源响应头Access-Control-Allow-Origin:*

上报错误的基本原理

采用Ajax通信的方式上报

利用Image对象上报

GPU云服务器云服务器页面渲染测速错误页面html 手机404错误页面 Web错误处理页面

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102232.html

渲染机制

摘要：渲染机制浏览器渲染机制什么是及作用告诉浏览器文件是什么文档类型，浏览器根据它来判断用什么引擎来解析渲染文件。触发改动改动例当添加时，最好一次添加，避免多次。渲染机制浏览器 1. 渲染机制什么是 DOCTYPE 及作用 DTD 告诉浏览器文件是什么文档类型，浏览器根据它来判断用什么引擎来解析渲染文件。DOCTYPE 用来声明文档类型和 DTD 规范。浏览器是怎么渲染过程show...

Big_fat_cat 2019-08-22 15:19 评论0 收藏0
马蜂窝 iOS App 启动治理：回归用户体验

摘要：马蜂窝旅游历经几十个版本的开发迭代，在启动流程上积累了一定的技术债务。我们定义启动广告曝光率启动广告曝光启动广告加载。增长、活跃、留存是移动 App 的常见核心指标，直接反映一款 App 甚至一个互联网公司运行的健康程度和发展动能。启动流程的体验决定了用户的第一印象，在一定程度上影响了用户活跃度和留存率。因此，确保启动流程的良好体验至关重要。「马蜂窝旅游」App 是马蜂窝为用户提供...

Jinkey 2019-08-26 18:27 评论0 收藏0
GMTC 2019 参会回顾

摘要：回顾上一次参加还是年。年的还是真正的，年的会议早已经把英文全称去掉，改称全球大前端技术大会。同时与产品协作从产品设计方面突出关注点，做产品设计方面的优化，如站新版改造减少页面元素，将播放器窗口直接显示在第一屏。回顾上一次参加 GMTC 还是 2017 年。那时的我还是刚刚参加工作并在试用期辞职的菜鸟。 2017 年的 GMTC 还是真正的 Global Mobile Tech Co...

Zack 2019-08-23 18:15 评论0 收藏0