博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
渲染机制/页面性能/错误监控
阅读量:7090 次
发布时间:2019-06-28

本文共 1939 字,大约阅读时间需要 6 分钟。

渲染机制

什么是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

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

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

页面性能

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

  1. 资源压缩合并,减少HTTP请求.(把资源文件变小)
  2. 非核心代码异步加载->异步加载的方式->异步加载的区别
  3. *利用浏览器缓存->缓存的分类->缓存原理
  4. 使用CDN(属于网络优化)
  5. 预解析DNS

<meta http-equiv="x-dns-prefetch-control" content="on">

<link rel="dns-prefetch" href="//host_name_to_prefetch.com">
注:当一次打开时,浏览器缓存起不到任何作用,但是使用CDN可以起到作用。

2)异步加载

异步加载的方式:

  1. 动态脚本加载(动态创建结点)
  2. defer
  3. async

异步加载的区别:

  1. defer在HTML解析之后才会执行,如果是多个,按照加载顺序依次执行。
  2. async是在加载完之后立即执行,如果是多个,执行顺序和加载顺序无关。

3)浏览器缓存

浏览器缓存的分类

强缓存:

协商缓存:

错误监控

前端错误的分类:

  1. 即时运行错误:代码错误
  2. 资源加载错误

每种错误的捕获方式

即时错误的捕获方式:

  1. try...catch
  2. window.onerror

资源加载错误:

  1. object.onerror
  2. performance.getEntries()
  3. Error事件捕获

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

  1. 在script标签添加crossorigin属性
  2. 设置js资源响应头Access-Control-Allow-Origin:*

上报错误的基本原理

  1. 采用Ajax通信的方式上报
  2. 利用Image对象上报

转载地址:http://cviql.baihongyu.com/

你可能感兴趣的文章
tn文本分析语言(三):高级语法
查看>>
iOS:提示框(警告框)控件UIActionSheet的详解
查看>>
分析Linux内核创建一个新进程的过程【转】
查看>>
Web API应用架构设计分析(2)
查看>>
.NET插件系统之二——不实例化获取插件信息和可视化方法
查看>>
让asp.net默认的上传组件支持进度条反映
查看>>
EXTJS学习系列提高篇:第十一篇(转载)作者殷良胜,制作树形菜单之五
查看>>
从代码分析Android-Universal-Image-Loader的图片加载、显示流程
查看>>
阿里妈妈首次公开新一代自研智能检索模型 | WWW 2018论文解读
查看>>
使用Depth Texture
查看>>
第 9 章 PBX
查看>>
ylbtech-LanguageSamples-Porperties(属性)
查看>>
第 4 章 Music score
查看>>
架构设计目录
查看>>
Wind7外接显示器选择拓展模式后,鼠标只能往右移动才能切换到外接显示器上,不能修改切换方向...
查看>>
学习笔记: CSS3 鼠标悬停动画
查看>>
ylbtech-cnblogs(博客园)-数据库设计-7,News(新闻)
查看>>
WCF 基础简介
查看>>
用Soap消息调用Web Services(续)
查看>>
php数据库操作封装类
查看>>