锦囊妙计

Posted 2022-12-13 Leatitia

1. 页面布局中，如何理解结构与表现分离？(前端页面有哪三层构成？分别有什么作用？)
   如果盲人需要让屏幕阅读器朗读这部分内容，那它就是结构；如果不需要，那它就是表现。

• 结构：html文件，页面的骨架
• 表现：Css文件，页面样式，设置文档呈现效果
• 行为：JS文件，页面的行为，实现文档行为
  （其中，表现层和行为层中间有一部分灰色重叠处理地带）
  是web开发的一种思路这样做便于后期代码的管理、维护

2. 对于前后端分离，你是怎么理解的？
   前端只做展现交互 不做数据处理

3. 如何自定义鼠标指针的图案？
   

4. 怎样去除html标签之间换行产生的空格？

• 父元素上使用font-size:0
• 不换行
• 弹性布局、浮动布局

5. 防抖和节流函数，适用于什么场景？

节流：规定在一个单位时间内，只能触发一次函数。
防抖：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。
两者的主要的区别是：在给定时间间隔内调用多次时，防抖采用最新调用而节流采用首次调用。

type Timeout = number // browser
// type Timeout = NodeJS.Timeout // node

/**
 * 防抖：生成一个函数，它在被调用后会等待一段时间再执行。
 * 如果在等待期间再次调用，之前还未执行的调用会被取消。
 * @param fn 要防抖的函数
 * @param timeout 超时时间
 */
function debounce(fn, delay) 
  let last = null
  return function debounce_fn() 
    if(last) 
      clearTimeout(last) // 若此时距离上次执行的时间小于delay，就相当于取消了前一次执行
    
    last = setTimeout(() => 
      fn.apply(this, arguments)
    , delay) // 事件延迟执行，只有当后一次触发与当前触发≥delay时才会被执行！
  

/**
 * 节流：生成一个函数，它在被调用后一段时间内再次被调用不起作用。
 * @param fn 要节流的函数
 * @param timeout 超时时间
 */
 //时间戳方法
function throttle(fn, delay) 
  let last = 0 // 这样能保证第一次触发能够立即被执行
  return function throttle_fn() 
    if(Date.now() - last >= delay) 
      fn.apply(this, arguments)
      last = Date.now()
    
  

//计时器方法
function throttle2(fn, delay) 
  let last = null
  return function throttle_fn() 
    if(last === null) 
      last = setTimeout(() => 
        fn.apply(this, arguments)
        last = null // 清除已执行的计时器标记
      , delay)
    
  

6. B/S和C/S架构区别是什么？

BS: Browser-Server 客户端是浏览器 也可以理解为web 这个受同源策略限制
CS: Client-Server 客户端是原生客户端 这个不受同源策略限制

7. HTML5中canvas元素的作用

• 最常见的就是做图表,数据可视化产品如百度的echarts
• 做动画特效,在线画图,3d的webgl有threeJs, 2d的有zrender
  一般业务有的：web图像处理,在canvas上画图片,进行像素级的修改，如制作灰度图，对用户上传的图进行裁剪,模糊,多图合成等操作
  我常用的就是动态在线生成图片,如一般涉及安全的无痕打码,根据登录用户制作一张透明的事件穿透的图片覆盖在网页最上层,防内部截图外泄

8. <hgroup> 是H5新增的标签可以用于对各级标题进行组合。实用性不强，W3C已废除
9. shim和polyfill的区别

首先 polyfill是shim的一种.目的都是在没有相关API的环境上顺利执行代码
区别是:
shim:是js库, 用库定义的api去执行一些操作, 如jquery,$.ajax,底层用ActiveXObject或XMLHttpRequest实现,用户不直接用标准API,而是用库定义的api,具体环境判断和实现交给库.
polyfill: 用js模拟标准api，抹平环境差异，用户仍是使用标准api
如发现window.requestAnimationFrame不存在,polyfill会用setTimeout覆写window.requestAnimationFrame
polyfill的好处在于，可以动态监测浏览器版本,低版本加载,而在高本版浏览器可以不加载这段js，用户代码不修改直接可用
shim则是无论浏览器版本都要加载这段js，因为用的api是库定义的

10. 函数声明和函数表达式有什么区别？

function fn()
///…

函数表达式
const aa = function()
///…

区别：
数声明会提升至作用域的顶端，函数表达式则会在赋值之后能调用
1.函数声明，函数名必须有，在函数表达式中可以省略函数名(声明+赋值)
2.函数声明会被预解析，函数表达式不会(声明,代码执行到此处才会赋值,所以在此之前,函数不能被调用)

11. HTML如何创建分区响应图

• 分区响应图:一张图片,分成多个模块,点击模块可以链接到不同的URL地址
• 实现：map ,area

 <p>
    <img src="./1.png" usemap="#myMap" />
  </p>
  <map name="myMap">
    <area href="http://baidu.com" shape="rect" coords="50,106,220,273" />
    <area href="http://google.com" shape="rect" coords="260,106,430,275" />
    <area href="http://juejin.im" shape="default" />
  </map>

13. 淘宝、京东、百度他们的网站首页秒开是如何做到的呢?

jd是首页部分可见区域做了ssr，配合懒加载

14. HTML的轨道元素（跟踪元素）的理解

HTML5的跟踪元素提供了一种简单的标准方法，供用户将字幕、解说、屏幕阅读器说明和章节添加到视频和音频中；还可以用于其他种类的定时元数据。每个跟踪元素的源数据都是由定时 cues 列表组成的文本文件，插入点可包含 JSON 或 CSV 格式的数据。这种极其强大的结构可让您通过文本搜索、DOM 操作或与媒体播放同步的其他行为实现深层链接和媒体导航。

<video src="foo.ogv">
  <track kind="subtitles" label="English subtitles" src="subtitles_en.vtt" srclang="en" default></track>
  <track kind="subtitles" label="Deutsche Untertitel" src="subtitles_de.vtt" srclang="de"></track>
</video>

文档链接

15. GPU的理解：

GPU：图形处理器，用于处理图形的有关的任务，渲染页面、
在css中使用 transform: translateZ(0),可以开启GPU硬件加速

16. 你有做过骨架屏吗？它的原理是什么知道吗？

骨架屏为解决首屏加载导致白屏时间过长的一种优化方案。它可以理解为是当数据还未加载进来前，页面的一个空白版本，一个简单的关键渲染路径。具体的实现方式可以是手写html、css，待数据请求回来再以真是数据替换。还可以使用图片来作为骨架屏。
骨架屏的目的和Loading是一样的，安抚用户，最速响应

• 一般情况下是服务端渲染好html 直接把骨架屏结构先写在html里，用户打开直接先看到页面结构优化了白屏体验,后续js等资源加载完了才渲染出页面
• 难点就在于通用的自构件产出骨架屏，因为每个入口页面结构都是不一样的不像Loading样式一致
  有方案是通过webpack打包编写插件,自构结构插入到输出的html文件里

17. 什么是svg？说说svg有什么运用场景？

SVG是可缩放的矢量图形，是用XML来定义的图像，经过缩放不会有失真的情况。一个最基础的svg标签如下：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect width="300px" height="100px"  />
</svg>

18. 设备像素比（DPR）：物理像素和css像素的比例
    可以参考：https://blog.csdn.net/u013778905/article/details/78073566

19. AJAX的工作原理

Ajax：用于网页和服务器进行异步通信的技术
基本原理：通过XMLHttpRequest向服务器发送异步请求，获取服务器返回数据，利用js更新页面
创建一个ajax请求的步骤：

• 创建XMLHttpRequest对象；
• 打开链接（指定请求类型、服务器地址、是否异步）
• 向服务器发送请求（get直接发送请求，post请求需要设置请求头）
• 接收服务器响应数据（根据XMLHttpRequest的readyState属性判断调用回调）
• 更新页面

20. 你知道什么是图床吗？它有什么好处？
    图床一般指的是存储图片的服务器。可以上传分享图片

21. 什么是原型模式？主要运用场景

原型模式是一种设计模式，就是创建一个共享的原型实例，通过拷贝这些原型创建新的对象，也就是创建一个对象作为另一个对象的Prototype属性。
优点：用于创建重复的对象，可以提升性能。
结合优点，可以运用在以下几种场景：

• 类初始化需要消耗很多资源
• 有多个调用者调用且每个调用者会修改其值，相当于保存一份原有的对象拷贝相同对象进行修改，即保护性拷贝
• 通过new对象时需要很多繁琐的准备或访问权限

22. js的原型(每个对象的__proto__属性)和原型链(每个对象找原型的规则，直到null)

• 原型：javascript 规定，每一个函数都有一个 prototype 对象属性，指向另一个对象。prototype的所有属性和方法，都会被构造函数的实例继承。而prototype 就是调用构造函数所创建的那个实例对象的原型（proto）。一般是不可见的，变量的原型可以在Chrome浏览器的调试窗口通过__proto__查看。函数的原型可以通过prototype查看。
• 原型的作用：可以通过设置原型给对象添加自定义的方法以供后续调用。
• 原型链：每个对象都有一个指向它的原型prototype对象的内部链接，每个原型对象又有自己的原型。直到某个对象的原型为null为止，组成这条链的最后一环
  作用：可以通过原型链实现继承。

关系：只有有原型,才能形成原型链

23. position的relative和absolute定位原点在哪？

position: relative，它偏移的参照位是其原先在正常文档流中的位置；
position: absolute，它偏移的参照位是父容器（position不为static）的左上角；

24. 网站的TDK怎么设置？有什么作用？

TDK :即网站的title、description，keywords三者。用于网络搜索引擎优化seo，它是seo中页面的描述和关键词设置，也被称为seo界的三个标签。

25. 过渡和动画区别是什么？

• 过渡：需要事件触发，一次性动作，只能定义开始结束状态，无中间状态
  transition: width 2s;
• 动画：时间性改变，周期性修改css属性值，通过百分比定义过程中的形态
  @keyframes bling-kf 0% opacity: 1; 50% opacity: 0.5; 100% opacity: 1; .bling animation: bling-kf 2s ease-in infinite;

26. web安全色

• 概念: 所谓web安全色，在不同的平台展示的效果和预期一致。举个例子，在mac和window展示的效果一致。
• 公式: WEB安全色的RGB值均为51的倍数。举个例子，rgb(0,0,51),rgb(0,0,102), rgb(0,0,153) 都是web安全色。
• 种类: 216，某些平台只支持216种颜色。
• 为什么是51倍数，为什么某些平台只支持216种颜色，有空再研究。web安全色

27. 对作用域链的理解

作用域链与函数执行栈相对应。js运行环境分为全局、函数以及eval三类，每当代码执行进入了一个新的运行环境就会将环境的执行上下文入栈，退出环境时将其出栈，从栈顶到栈底形成从内层到外层的嵌套关系。

由执行上下文创建的词法环境持有外层执行上下文的词法环境引用，当JS引擎在当前词法环境中找不到相应的变量时，会逐层向外查找，如此形成的链表即为作用域链。

28. css中的calc()

calc()使得开发者能够使用四则运算表达式来填写CSS属性。
px、%、em等不同单位的数值均可参与计算，浏览器会进行自动转换。

当使用calc的时候，运算符号 左右需要有空格的哦，否则，属性不生效。例如： width: calc(100% - 30px);

29. 怎么实现移动端的边框0.5px？

• 一种是通过transform中的scale

 border: 1px solid red;
    transform: scaleY(.5);

• 一种是通过meta viewport中设置init-scale为0.5

<meta name="viewport" content="width=device-width, initial-scale=0.5">

一种是设置hr

border: 0px;
border-bottom: 1px solid red;

一种是基于背景渐变实现

height: 2px;
background-image: linear-gradient(0deg, red 50%, transparent 50%)

30. 域名解析是什么，实现过程是怎样？域名解析有哪几种方式？
31. html标签的作用

• 供浏览器识别这是一个HTML文档
• 标识了HTML文档的头尾
• 是HTML文件的根元素
• H5之后可以通过设置html的manifest属性来实现离线缓存
• 可以通过设置lang属性来设置页面的语言，常用的有zh和en

32. 伪元素有哪些用途？

元素的伪元素可以调整布局
伪元素的content可以给元素预定义内容，类似作为实际DOM使用

33. jsonp：一种实现跨域的技术

跨域是后端收到了请求并处理返回给前端,但浏览器发现跨域了抛出错误中止了请求
script标签可以实现跨域，而且可以实现跨域执行js文件，因此可以插入script标签来引入js文件，通后端根据前端请求动态生成*.js文件，前端构造script标签加载js文件,Js文件动态执行函数,将数据注入

• 优点：兼容性较佳，支持服务器和浏览器的双向通信
• 缺点：只支持get请求

	前端发送请求:url: xxx/xxx?jsonpCallBack=_callback123&&jsonpId = 123
	前端动态在window下构造函数
	window._callback123=(data) => // dosomething
	后端构造js文件, 123.js
	window._callback123(  userName: 'xxxx' )
	前端动态插入<script src="xxxx/xxx/123.js"></script>

34. cookies、sessionStorage和localStorage的区别

• Cookie 是网站为了对用户身份做标识而存放于浏览器中的数据；常用于会话管理，用户设置，行为跟踪等。在js中可以通过document.cookie来进行设置，获取或删除等操作；不过cookie有许多明显的缺点：
  —— cookie的大小限制在4KB；
  ——cookie会伴随http请求一起被发送，会浪费网络带宽
  ——cookie的正确操作比较困难
• webStorage：H5新增的API，数据存放于客户端本地内存中；sessionStorage和localStorage操作一致，而sessionStorage的有效期限为一次session会话（即一个tab页从打开到关闭之间的时间段），localStorage是没有失效时间的（即永久保存，删除需要手动处理）；

35. 请列举出多种减少页面加载时间的方法

• 减少http请求数量
• 请求数量：减小请求的文件大小，压缩js，和css
• 缓存利用： 缓存 Ajax，使用 CDN、外部 JavaScript 和 css 文件缓存
• 页面头部放css，body尾放js。
• 服务器使用gzip压缩，减小网络数据的传输大小。
• 尽量减少页面的dom元素，比如使用div布局替代冗余严重的table布局

36. 你是如何更好地处理Async/Await的异常的？
37. 进程和线程有什么区别？JS的单线程带来哪些好处？

• 一个程序必包含至少一个进程
• 一个进程必包含至少一个线程
  进程之间不共享内存
  多个线程共享内存，因此多线程可以提高程序的共发性
• JS 单线程的好处：JS主要是面向浏览器的，因此是和用户实时交互的，如果多线程执行的话，你无法确定同时开始的任务哪个会先结束，以网页加载为例，可能导致网页HTML结构已经加载好，但是CSS样式还未加载完成，导致用户浏览体验差。或者两个线程同时对一个DOM结点进行修改和删除操作，则无法判断以哪个线程为准。

38. 不依赖第三方库，怎么使用js读取pdf？

• 前端不使用第三方库，如何将 PDF 文件显示在网页上。
  现代桌面浏览器都自带 PDF viewer 插件的，用 就能显示。（embed应该也可以）
• 前端不使用第三方库，如何读取并解析 PDF 格式，利用 HTML 技术渲染 PDF 文件内容？
  这个就是 pdf.js 干的事情。思路是使用 FileReader API 读取文件二进制内容，根据 PDF 文件规范解析内容（PDF 是开源格式），根据 PDF 文件描述的文档内容和布局，用 canvas 或者 DOM 展现出来。内嵌的 font 或图片可以提取二进制然后用 blob URL 搞定，难点是如何用 DOM 实现 PDF 格式描述的布局 (不清楚 PDF 是如何描述布局的)。

39. HTML的快捷键属性:accesskey（h5标准中的一个全局快捷键访问属性）
    按下ALT+ 特定键 会跳转的特定位置 mac是CTRL

<!-- ALT+h  访问百度 -->
<a href="http://www.baidu.com" accesskey="h">HTML</a><br />

40. 说说你对二倍图的理解，移动端使用二倍图比一倍图有什么好处？

• 一倍图：当这个比率为1:1时，使用1个设备像素显示1个CSS像素。
• 二倍图：当这个比率为2:1时，使用4个设备像素显示1个CSS像素，
• 三倍图：当这个比率为3:1时，使用9（3*3）个设备像素显示1个CSS像素。
  不同倍图可以在不同机型视网膜屏幕下保真显示
  移动端使用二倍图可以在Retina屏幕下保真展示

41. 你知道的等高布局有多少种？写出来
42. 写一个使两个整数进行交换的方法（不能使用临时变量）

a = a + b;
b = a - b;
a = a - b;
//法二  ES6
let a = 1, b= 2
[a, b] = [b, a]

43. 媒体查询：做兼容处理用，查找对应范围使用不同的样式
44. 你是怎样抽离样式模块的？
45. 请说说你对事件冒泡的理解

事件流的执行顺序：捕获阶段-》目标阶段-》 冒泡阶段。冒泡从目标到windows对象
事件源触发事件后，会将事件反馈给父元素，一直到document
为了防止触发可以通过evet.target来判读或者直接event.stopPropagation()阻止事件冒泡。

46. 你对事件循环机制有了解吗？
    事件循环机制和异步有关

• 单线程模型：JS引擎有多个线程，但同时只执行一个任务，即引擎只在一个线程上运行，这个线程称为主线程
• 事件循环机制JS 本身并不慢，慢的是读写外部数据，比如等待 Ajax 请求返回结果。如果等着 Ajax 返回结果出来，再往下执行，就会耗费很长的时间。所以 JS 设计了一种机制，CPU 可以不管 IO 操作，而是挂起该任务，先执行后面的任务，等到 IO 操作返回了结果，再继续执行挂起的任务。
  同步任务执行完后，引擎一遍又一遍检查那些挂起来的异步任务是否满足进入主线程的条件。这种循环检查的机制，就叫做事件循环机制。
• 任务队列：JS 引擎运行时，除了一个正在运行的主线程，还提供一个或多个任务队列，里面是各种被挂起的异步任务。首先，主线程会去执行所有的同步任务，等到同步任务全部执行完，就会去看任务队列里面的异步任务，如果满足条件，那么异步任务就重新进入主线程开始执行，这时它就会变成同步任务。等到执行完，下一个异步任务再进入主线程开始执行。一旦任务队列清空，程序就结束执行。
• 同步任务：没有被引擎挂起，在主线程上排队执行的任务。只有前一个任务执行完毕，才能执行后一个任务。
• 异步任务：被引擎挂起，不进入主线程，而进入任务队列的任务。只有引擎认为某个异步任务可以执行了，该任务才会进入主线程执行。排在异步任务后面的代码，不用等待异步任务结束会马上运行。

47. 全屏滚动的原理

全屏滚动和轮播图类似，都是通过改变元素位置或者显示与隐藏来实现，配合JS的一些交互距离判断，实现类似原生滚动捕获的效果。这里全屏的话就需要将宽高都设置为窗口的大小，可以通过百分百实现。
关键CSS属性是父容器 overflow: hidden; 。
实现全屏滚动还可以简单的通过插件来实现，比如fullpage

48. 说说你对web标准和W3C标准的理解和认识

WEB标准：网页主要由三个部分组成：表现、结构和行为。一些情况下，js改变会造成css和html的混乱，导致界限不清晰。web标准就是将这三部分独立分开，使其更具有模块化。
W3C标准：对web标准提出了规范化的要求，也就是在实际编程中的一些代码规范
WEB标签语义化：正确的标签做正确的事

49. 说说你对target="_blank"的理解？有啥安全性问题？如何防范？

• 理解：在新的空白页, 打开该链接,
• 安全性问题： 如果url中带有敏感信息, 会被第三方网站读取到document.referer
• 防范：rel=“noopener noreferrer”

50. HTTP是超文本协议，默认端口是80，以明文方式传输。
    HTTPS是HTTP协议的安全版，安全基础是SSL，以密文方式传输。

51. css优化、提高性能的方法

• 加载性能：压缩css，通过link方式加载，而不是@import
• 选择器性能：减少层级，减少使用标签 通配符这些范围较大的选择器
• 渲染性能：慎重使用高性能属性：浮动、定位；尽量减少页面重排、重绘；尽量减少使用昂贵属性；雪碧图；动画优化可以使用transform3d来使用GPU渲染提高性能