学习

1. 怎么学习前端

2. 自己写一个前端教程怎么写

3. 前端发展的趋势

• GUI → NUI
  图形用户界面：GUI是指采用图形方式显示的计算机操作用户接口。与早期计算机使用的命令行界面相比，图形界面对于用户来说在视觉上更易于接受。
  自然用户界面：狭义的NUI依然以图形界面为基础，但通过改进输入方式（电容屏、多点触控、滑动）等更为自然的方式交互，使的用户操作更为自然，往往2、3岁的儿童就能掌握操作的要点。广义的NUI：则是指利用“手势”“语音”“视觉”“姿势”“感知”等一系列更自然的方式，同计算机（机器人）进行交互。

• 多端 网页、APP、H5、小程序
  前端技术发展生态贯穿浏览器、服务器、移动，前端正在向多端、多技术实现方向发展。这意味着前端技术栈可以做更多的事情，涉及更广泛的平台。但作为整套技术开发生态的一部分，每一项技术出现时都需要考虑开发效率、维护成本、性能和可扩展性，因此寻找新的开发生态仍然是前端未来的大方向。

• B/S → 云/端
  Serverless无服务器架构，开发者再也不用过多考虑服务器的问题，计算资源作为服务而不是服务器的概念出现。Serverless是一种构建和管理基于微服务架构的完整流程，允许你在服务部署级别而不是服务器部署级别来管理你的应用部署，你甚至可以管理某个具体功能或端口的部署，这就能让开发者快速迭代，更快速地开发软件。
  前后端一定是通过 HTTP 接口连接起来，传统的一体化，需要去创建一个 HTTP 客户端，启动后端服务，然后去调用，不仅要了解 URL，协议，参数，还要关心对象结构，返回值，即使后端已经定义好接口，前端也无法直接复用。但是在一体化开发时代，整个代码从接口调用转变为”函数调用“，我们可以直接导入”后端代码“，减少了上面看到了的一切东西，所有的都显得自然。

4. 微信小程序和网页的区别

• 运行环境
  小程序是一种应用，运行的环境是微信（App）；H5 是一种技术，依附的外壳是是浏览器。
  H5 的运行环境是浏览器，包括 WebView，而微信小程序的运行环境并非完整的浏览器，因为小程序的开发过程中只用到一部分H5 技术。小程序的运行环境是微信开发团队基于浏览器内核完全重构的一个内置解析器，针对性做了优化，配合自己定义的开发语言标准，提升了小程序的性能。小程序中无法使用浏览器中常用的 window 对象和 document 对象，H5 可以随意使用。

• 开发成本

• 系统权限
  微信小程序相对于 H5 能获得更多的系统权限，比如：网络通信状态、数据缓存能力等，这些系统级权限都可以和微信小程序无缝衔接。
  而这一点恰巧是 H5 被诟病的地方，这也是 H5 的大多应用场景被定位在业务逻辑简单、功能单一的原因。

• 运行流畅度
  这条无论对于用户还是开发者来说，都是最直观的感受。长久以来，当HTML5应用面对复杂的业务逻辑或者丰富的页面交互时，它的体验总是不尽人意，需要不断的对项目优化来提升用户体验。但是由于微信小程序运行环境独立，尽管同样用 HTML +CSS + JS 去开发，但配合微信的解析器最终渲染出来的是原生组件的效果，自然体验上将会更进一步。

5. 你有什么优点

有耐心，做事负责，一步一步认真完成
学习能力强，刚上大一，
对前端感兴趣，

浏览器

1. 对浏览器的认识

浏览器的主要功能是展示网页资源，也即请求服务器并将结果显示在浏览器窗口中。资源的格式一般是HTML，但也有PDF、图片等其它各种格式。资源的定位由URL来实现。

组成：

• Shell：浏览器的外壳，例如菜单，工具栏等。主要是提供给用户界面操作，参数设置等等。调用内核来实现各种功能。
• 内核：基于标记语言显示内容的程序或模块。
  • 渲染引擎(layout engineer或者Rendering Engine)：它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至 显示器或打印机。
  • JS引擎：解析Javascript语言，执行javascript语言来实现网页的动态效果。

结构：

浏览器结构

• 用户接口（User Interface）：包括地址栏，前进后退，书签菜单等窗口上除了网页显示区域以外的部分。

• 浏览器引擎（Browser engine）：查询与操作渲染引擎的接口。

• 渲染引擎（Rendering engine）：负责显示请求的内容，比如请求到HTML, 它会负责解析HTML与CSS并将结果显示到窗口中。

• 网络（Networking）：用于网络请求, 如HTTP请求。它包括平台无关的接口和各平台独立的实现。

• UI后端（UI backend）：绘制基础元件，如组合框与窗口。它提供平台无关的接口，内部使用操作系统的相应实现。

• JavaScript解释器（JavaScript Interpreter）：用于解析执行JavaScript代码。

• 数据存储（Data storage）：这是一个持久层。浏览器需要把所有数据存到硬盘上，如cookies。新的HTML规范 (HTML5) 规定了一个完整（虽然轻量级）的浏览器中的数据库：web database。

2. 不同浏览器的引擎

介绍

3. HTTP 与 HTTPS 区别

• HTTP 明文传输，数据都是未加密的，安全性较差，HTTPS（SSL+HTTP） 数据传输过程是加密的，安全性较好。
• 使用 HTTPS 协议需要到 CA（Certificate Authority，数字证书认证机构） 申请证书，一般免费证书较少，因而需要一定费用。证书颁发机构如：Symantec、Comodo、GoDaddy 和 GlobalSign 等。
• HTTP 页面响应速度比 HTTPS 快，主要是因为 HTTP 使用 TCP 三次握手建立连接，客户端和服务器需要交换 3 个包，而 HTTPS除了 TCP 的三个包，还要加上 ssl 握手需要的 9 个包，所以一共是 12 个包。
• http 和 https 使用的是完全不同的连接方式，用的端口也不一样，前者是 80，后者是 443。
• HTTPS 其实就是建构在 SSL/TLS 之上的 HTTP 协议，所以，要比较 HTTPS 比 HTTP 要更耗费服务器资源。

4. HTTP2新特性

HTTP 2.0 相比于 HTTP 1.X，可以说是大幅度提高了 web 的性能。

• 二进制分帧：之前的 HTTP 版本中，我们是通过文本的方式传输数据。在 HTTP 2.0 中引入了新的编码机制，所有传输的数据都会被分割，并采用二进制格式编码。
• 多路复用：在一个 TCP 连接中可以存在多条流
• Header 压缩：
  • 在 HTTP 1.X 中，我们使用文本的形式传输 header，在 header 携带 cookie 的情况下，可能每次都需要重复传输几百到几千的字节。
  • 在 HTTP 2.0 中，使用了 HPACK 压缩格式对传输的 header 进行编码，减少了 header 的大小。并在两端维护了索引表，用于记录出现过的 header ，后面在传输过程中就可以传输已经记录过的 header 的键名，对端收到数据后就可以通过键名找到对应的值。
• 服务端 Push：服务端可以在客户端某个请求后，主动推送其他资源。

详细介绍

优化

1. 图片太多请求会卡顿怎么解决？

1. 图片不需要加载原图，可请求裁剪好的图片；

2. 小图(小于10kb)使用base64格式；

3. 将多个图标文件整合到一张图中;实现链接

4. 采用正确的图片格式

   • 对于能够显示 WebP 格式的浏览器尽量使用 WebP 格式。因为 WebP 格式具有更好的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量，缺点就是兼容性并不好；
   • 色彩很多的使用 JPEG；
   • 色彩种类少的使用 PNG，有的可用SVG代替。

5. 不用图片。很多时候会使用到很多修饰类图片，其实这类修饰图片完全可以用 CSS 去代替。

6. 使用图片懒加载：
   当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次，俗称占位图），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。
   思路：将页面里所有img属性src属性用data-xx代替，当页面滚动直至此图片出现在可视区域时，用js取到该图片的data-xx的值赋给src。
   方式：可使用echo.js
   详细介绍图片懒加载

2. 如何监听首屏加载完成

白屏加载和首屏加载时间的区别：

• 白屏时间是指浏览器从响应用户输入网址地址，到浏览器开始显示内容的时间。
• 首屏时间是指浏览器从响应用户输入网址地址，到首屏内容渲染完成的时间，此时整个网页不一定要全部渲染完成，但在当前视窗的内容需要。
• 白屏时间是首屏时间的一个子集。

正常来说，首屏加载时间不应该超过2s。

白屏时间：performance.timing.responseStart - performance.timing.navigationStart
首屏时间：可以通过DOMContentLoad：

document.addEventListener('DOMContentLoaded', (event) => {
    console.log('first contentful painting');
});

3. 首屏加载速度优化

1. cdn分发（减少传输距离）。通过在多台服务器部署相同的副本，当用户访问时，服务器根据用户跟哪台服务器距离近，来决定哪台服务器去响应这个请求。

2. 后端在业务层的缓存。数据库查询缓存是可以设置缓存的，这个对于处于高频率的请求很有用。浏览器一般不会对content-type: application/json；的接口进行缓存，所以有时需要我们手动地为接口设置缓存。比如一个用户的签到状态，它的缓存时间可以设置到明天之前。

3. 静态文件缓存方案。这个最常看到。现在流行的方式是文件hash+强缓存的一个方案。比如hash+ cache control: max-age=1年。

4. 前端的资源动态加载：

   • a. 路由动态加载，最常用的做法，以页面为单位，进行动态加载。
   • b. 组件动态加载(offScreen Component)，对于不在当前视窗的组件，先不加载。
   • c. 图片懒加载(offScreen Image)，同上。值得庆幸的是，越来越多的浏览器支持原生的懒加载，通过给img标签加上loading="lazy"来开启懒加载模式。

5. 减少请求的数量。

6. 页面使用骨架屏。意思是在首屏加载完成之前，通过渲染一些简单元素进行占位。骨架屏的好处在于可以减少用户等待时的急躁情绪。没有骨架屏的话，一个loading图片也是可以的。

原文详细介绍

4. 浏览器安全

CSRF(Cross Site Request Forgy)：跨站请求伪造
是攻击者通过一些技术手段欺骗用户的浏览器去访问一个自己曾经认证过的网站并运行一些操作（如发邮件，发消息，甚至财产操作如转账和购买商品）。由于浏览器曾经认证过，所以被访问的网站会认为是真正的用户操作而去运行。这利用了web中用户身份验证的一个漏洞：简单的身份验证只能保证请求发自某个用户的浏览器，却不能保证请求本身是用户自愿发出的。

CSRF攻击原理

• 用户登录A网站
• A网站确认身份（给客户端cookie）
• B网站页面向A网站发起请求（带上A网站身份）

CSRF防御

• Get 请求不对数据进行修改

• 不让第三方网站访问到用户 Cookie

• 阻止第三方网站请求接口

• 请求时附带验证信息，比如验证码或者 Token

• SameSite

  • 可以对 Cookie 设置 SameSite 属性。该属性表示 Cookie 不随着跨域请求发送，可以很大程度减少 CSRF 的攻击，但是该属性目前并不是所有浏览器都兼容。

• Token验证
  cookie是发送时自动带上的，而不会主动带上Token，所以在每次发送时主动发送Token

• Referer验证
  对于需要防范 CSRF 的请求，我们可以通过验证 Referer 来判断该请求是否为第三方网站发起的。

• 隐藏令牌
  主动在HTTP头部中添加令牌信息

前端基础三件套

CSS选择器

CSS选择器的优先级：!important > 行内样式 > ID选择器 > 类选择器 > 标签选择器 > 其他