好未来php 面试题,好未来面试总结 · Issue #18 · BTFE/BTFE-blog · GitHub

里面写上自己想要预渲染的内容，当加载完成后会替换预渲染的内容

骨架屏完全是自定义的，想做成什么样全凭你的想象。你想做圆形的，三角形的，立体的都可以，但占位决定了它的特性：它不能太复杂，必须第一时间，最快展现出来

骨架屏的优势

在页面加载初期预先渲染内容，提升感官上的体验

一般情况骨架屏和实际内容的结构是类似的，因此之后的切换不会过于突兀，这点和传统的loading动图不同，可以认为是其升级版

只需要简单的css支持(涉及图片懒加载可能还需要js)，不要求HTTPS协议，没有额外的学习和维护成本

如果页面采用组件化开发，每个组件可以根据自身状态定义自身的骨架屏及其切换时机，同时维持了组件之间的独立性

浏览器是如何渲染页面的

概述浏览器渲染的步骤

处理HTML标记并构建DOM树

处理CSS标记并构建CSSOM树

将DOM与CSSOM合并成一个渲染树

根据渲染树来布局，计算每个节点的布局信息

将各个节点绘制到屏幕上

如果DOM或CSSOM被修改，就会重新执行上面所有步骤

构建对象模型(DOM，CSSDOM)

浏览器解析HTML文档时，会完成以下步骤：

读取HTML的原始字节，根据文件制定编码(例：UTF-8)解析为各个字符

将字符串转化为各种标签

将标签转化为node节点

DOM构建

浏览器解析HTML时，遇到link标签，会发出请求并返回资源，开始解析CSS

CSS字节转换为字符，接着转换成令牌和节点，最后构建生成CSSOM

CSSOM和DOM是独立的数据结构

渲染树构建、布局及绘制

CSSOM树和DOM树合并成渲染树，然后用于计算每个可见元素的布局，并输出给绘制流程，寄哪个像素渲染到屏幕上。

构建渲染树的步骤：

从DOM树的根节点开始遍历每个可见节点

对于每个可见节点，为其找到适配的CSSOM规则并应用它

生成渲染树

布局阶段：输出盒模型

绘制：输出到屏幕上的像素

CSS阻塞渲染

CSS 是阻塞渲染的资源。需要将它尽早、尽快地下载到客户端，以便缩短首次渲染的时间。

这就是为什么我们将外部样式的引入放在head标签中的原因，在body渲染前先把相对完整CSSOM Tree构建好。

对于某些CSS样式只在特定条件下叉用，添加媒体查询解决。

请注意“阻塞渲染”仅是指浏览器是否需要暂停网页的首次渲染，直至该资源准备就绪。无论哪一种情况，浏览器仍会下载 CSS 资产，只不过不阻塞渲染的资源优先级较低罢了。

Javascript阻塞渲染

Javascript会阻止DOM构建和延缓网页渲染。为了实现最佳性能，可以让Javascript异步执行，并去除关键渲染路径中任何不必要的Javascript

Javascript可以查询和修改DOM与CSSOM

Javascript执行会阻止CSSOM

除非将Javascript显式完成CSSOM的下载和构建，而我们却想在此时运行脚本，浏览器将延迟脚本执行和DOM构建，直至其完成CSSOM的下载和构建

如果浏览器尚未完成CSSOM的下载和构建，而我们却想在此时运行脚本，浏览器将延迟脚本执行和DOM构建，直至其完成CSSOM的下载和构建

简言之，JavaScript 在 DOM、CSSOM 和 JavaScript 执行之间引入了大量新的依赖关系，从而可能导致浏览器在处理以及在屏幕上渲染网页时出现大幅延迟：

脚本在文档中的位置很重要

当浏览器遇到一个 script 标记时，DOM 构建将暂停，直至脚本完成执行。

JavaScript 可以查询和修改 DOM 与 CSSOM。

JavaScript 执行将暂停，直至 CSSOM 就绪。

async属性：加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行(异步)。无顺序

defer属性： 加载后续文档元素的过程将和 script.js 的加载并行进行(异步)，但 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。按顺序

总结来有几种方式缩短首屏加载时间：

css文件放在文件的顶部，js文件放在底部，并且js文件可以用异步加载模式

使用服务端渲染的方式

使用预渲染的方式

使用gzip减小网络传输的流量大小

按照页面或者组件分块懒加载

Load与DOMContentLoaded

load

MDN的解释：load应该用于检测一个完全加载的页面，当一个资源及其依赖资源已完成加载时，将触发load事件

意思是页面的html、css、js、图片等资源都已经加载完之后才会触发load事件。

DOMContentLoaded

MDN的解释：当初始的HTML文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，而无需等待样式表、图像和子框架的完成加载

意思是HTML下载、解析完毕之后就触发

3.jquery链式调用的原理

function A() {}

A.prototype.then = function() {

console.log('then');

return this;

}

let a = new A()

a.then().then().then()

4.自执行函数的一些问题

详情请见杨董分享博客杨董博客

5.函数作用域问题

function A(a, b) {

console.log(a, b); // [Function: a] [Function: b]

var a = 1, b = 2;

console.log(a, b); // 1 2

function a(){}

function b(){}

console.log(a, b); // 1 2

}

A(0, 0)

类似题目

var a = 100;

function a() {

console.log(a);

}

a() // TypeError: a is not a function

设计函数和变量的预解析：

函数声明会置顶

变量声明也会置顶

函数声明与变量声明重名的时候，函数优先级更高(函数在变量上面)

变量和赋值语句一起书写时，在js引擎解析时，会将其拆成声明和赋值2部分，声明置顶，赋值保留在原来位置

声明过的变量不会重复声明

6.正则问题(请查看杨董博客)

7.网站中图片没有加载成功的原因(从设备到CDN，CDN到服务器分析)

设备断网

查看服务器网络日志，看是否请求判断是否CDN与服务器之间网络断开

有可能设备本地路由器设置拦截

等等(待其他。。。。)