面试题目自练习20221221

1、解释csssprites，如何使用？

CSSSprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background-repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。

CSSSprites为一些大型的网站节约了带宽，让提高了用户的加载速度和用户体验，不需要加载更多的图片

2、如何用原生js给一个按钮绑定两个onclick事件？

Varbtn=document.getElementById(‘btn’);

//事件监听绑定多个事件

varbtn4=document.getElementById("btn4");

btn4.addEventListener("click",hello1);

btn4.addEventListener("click",hello2);

function hello1(){

    alert("hello1");

}

function hello2(){

    alert("hello2");

}

3、Vuex 和 localStorage 的区别？

1. 最重要的区别：vuex 存储在内存中localstorage 则以文件的方式存储在本地，只能存储字符串类型的数据，存储对象需要 JSON 的 stringify 和parse 方法进行处理。读取内存比读取硬盘速度要快。
2. 应用场景 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。vuex 用于组件之间的传值。localstorage 是本地存储，是将数据存储到浏览器的方法，一般是在跨页面传递数据时使用 。 Vuex 能做到数据的响应式，localstorage 不能。
3. 永久性 刷新页面时 vuex 存储的值会丢失，localstorage 不会。注意：对于不变的数据确实可以用 localstorage 可以代替vuex，但是当两个组件共用一个数据源（对象或数组）时，如果其中一个组件改变了该数据源，希望另一个组件响应该变化时，localstorage无法做到，原因就是区别 1。

4、浏览器如何渲染网页？

1. 解析HTML生成DOM树 – 渲染引擎首先解析HTML文档，生成DOM树
2. 构建Render树 – 接下来不管是内联式，外联式还是嵌入式引入的CSS样式会被解析生成CSSOM树，根据DOM树与CSSOM树生成另外一棵用于渲染的树-渲染树(Render tree)，
3. 布局Render树 – 然后对渲染树的每个节点进行布局处理，确定其在屏幕上的显示位置
4. 绘制Render树 – 最后遍历渲染树并用UI后端层将每一个节点绘制出来

解析HTML文件，创建DOM树，自上而下，如果遇到样式（link、style）与脚本（script）都会阻塞

5、输入url后发生了什么？

1. DNS域名解析
2. 建立TCP连接（三次握手）
3. 发送HTTP请求
4. 服务器处理请求，返回响应结果
5. 关闭TCP连接（四次挥手）
6. 浏览器解析HTML渲染页面，构建DOM树

学无止境，

欢迎大家关注公众号：