155期
1. 什么是策略模式?
2. TS中extend有什么作用,有哪些用途?
3. sass有哪些内置函数?有什么作用?
上面问题的答案会在第二天的公众号(程序员每日三问)推文中公布
也可以小程序刷题,已收录500+面试题及答案
154期问题及答案
1. SSR是什么?在vue开发中需要注意哪些问题?
SSR是Server Side Rendering(服务器端渲染)的缩写,指的是将Web应用或网页的内容在服务器上生成HTML字符串,然后发送到客户端浏览器进行展示的过程。与之相对的是CSR(Client Side Rendering,客户端渲染),即浏览器通过下载JavaScript文件,在客户端运行JavaScript代码来构建页面内容。
在Vue.js的开发中使用SSR有一些特定的优点,例如:
更好的SEO(搜索引擎优化):因为页面内容是在服务器上渲染的,所以搜索引擎可以更容易地抓取网站内容,这对SEO是有益的。
更快的内容呈现:用户可以更快地看到页面的第一屏内容,因为不需要等待所有的JavaScript文件都下载并执行完成。
更好的性能:对于性能受限的设备或慢速网络连接的情况,服务器渲染可以提供更好的用户体验。
然而,在使用Vue进行SSR开发时,需要注意以下问题:
环境差异:在服务器端没有DOM环境,所以某些浏览器特有的API(例如
window
或document
)在服务端是不可用的,你需要对此进行特别的处理。CSS处理:传统的CSS和Vue组件的局部样式都需要特殊的处理,以确保在服务器渲染的输出中包含必要的样式。
数据预取和状态管理:服务器渲染的应用需要在将页面发送到客户端之前就获取所有必需的数据。Vue通常使用Vue Router和Vuex来处理路由和状态管理,在SSR中同样需要考虑这些在客户端和服务器端如何同步状态。
客户端激活:为了使服务器端渲染的页面变得交互式,浏览器需要将静态的HTML“激活”为Vue能管理的动态DOM。这需要考虑如何有效地将服务器的状态传递到客户端。
缓存策略:服务器端渲染的应用可能需要将生成的页面缓存起来,以减轻服务器的负担,并提高响应速度,这就需要一定的缓存策略。
开发构建和部署:与传统的Vue SPA(Single-Page Application)应用不同,SSR应用需要在服务器端运行,因此开发构建和部署过程更为复杂,需要设置Node.js环境,并考虑到服务器和客户端代码的构建和打包。
性能考虑:虽然SSR可以提供更快的首屏渲染时间,但服务器端的负载会随之增加。需要对服务器端的性能进行优化,例如合理的使用缓存、减少不必要的计算等。
为了简化Vue SSR的开发过程,Vue生态系统提供了一个官方库叫作vue-server-renderer
,它可以帮助你将Vue组件渲染成HTML字符串。此外,Nuxt.js框架提供了一套更为简洁和高效的开发模式,它内建了Vue SSR的许多复杂处理,是开发Vue SSR应用的一个常用选择。
2. git中,fork,clone,branch这三个概念有什么区别?
在Git中,fork
、clone
和branch
是三个不同的操作和概念,它们在代码的版本控制和协作开发中发挥着不同的角色。
Fork(派生)
fork
操作是在GitHub或其他支持Git的代码托管平台上的概念,它允许你创建一个现有仓库的完全独立的副本。当你fork
一个仓库时,你会在你的GitHub账户下创建那个仓库的一个新副本。这个副本是独立于原始仓库的,你可以在其中进行改动而不会影响原始仓库。fork
通常用于开源协作,允许贡献者提出改进,然后通过拉取请求(Pull Request)将改动合并回原始仓库。
Clone(克隆)
clone
是Git的一个基本命令,用于将一个远程仓库的内容复制到本地计算机。这不仅包括文件的当前状态,还包括整个提交历史和所有分支。clone
操作通常是开始在本地工作的第一步。由于Git是分布式的版本控制系统,因此本地仓库和远程仓库是等效的,你可以在本地仓库中执行绝大多数Git操作。
git clone [仓库URL]
Branch(分支)
branch
在Git中是用来维护不同线路开发的功能。每个分支都代表了代码的一个独立的线路,分支使得同时在多个功能上工作变得可能,而不会干扰到主线(通常是main
或master
分支)。你可以在一个分支上工作,并且在需要的时候将它们合并回主线。每个分支都是源于某一时刻的仓库状态,并且随着时间独立发展。
# 创建一个新的分支
git branch [分支名]
# 切换到某个分支
git checkout [分支名]
使用Git时,这三个概念经常一起使用。例如,你可以先fork
一个项目,然后clone
到你的本地进行开发,之后你可能会在本地创建新的branch
来开发新功能或修复bug,再通过提交拉取请求的方式将你的改动合并回原始的仓库。
3. scrip标签中,async和defer两个属性有什么用途和区别?
<script>
标签中的async
和defer
属性都是用来控制外部JavaScript文件的加载和执行时机的。它们的目的是优化页面加载性能,避免脚本的加载和执行阻塞页面的渲染过程。下面是async
和defer
两个属性的用途和它们之间的区别。
Async(异步)
当你在<script>
标签中使用async
属性时,浏览器会在后台异步加载JavaScript文件,不会阻塞HTML文档的解析。即使JavaScript文件下载完成,只要HTML解析还未结束,脚本不会立即执行。只有在文件加载完成后,它才会尽快执行,无论HTML解析是否完成。这意味着async
脚本的执行时机是不确定的,可能会在文档解析完成前或完成后。
<script src="path/to/script.js" async></script>
Defer(延迟)
当你在<script>
标签中使用defer
属性时,浏览器也会异步加载JavaScript文件,但会延迟执行这个脚本,直到整个页面的HTML都解析完成。这确保了脚本只会在文档解析完成之后、在DOMContentLoaded
事件之前执行。如果有多个带有defer
属性的脚本,它们将按照在文档中出现的顺序被执行。
<script src="path/to/script.js" defer></script>
区别
执行时机:
async
:一旦脚本异步加载完成,就会尽快执行,这可能在HTML文档解析完成前或完成后。defer
:脚本会在整个HTML文档解析完成后、DOMContentLoaded
事件触发前按顺序执行。
脚本顺序:
async
:多个带async
的脚本不能保证按照它们在页面中出现的顺序执行。defer
:多个带defer
的脚本会按照它们在页面中出现的顺序执行。
兼容性:
async
和defer
对古老的浏览器(比如IE9及以下版本)来说可能不是完全兼容的。defer
属性比async
属性有更好的向后兼容性。
使用async
或defer
的最佳实践取决于脚本的性质和需求。如果脚本相互独立,或者其执行顺序无关紧要,则可以使用async
。如果脚本的执行需要保证顺序,尤其是当脚本之间有依赖时,应当使用defer
。对于那些需要尽快加载并执行的脚本(例如性能监测脚本),可能不适合使用这两个属性。
我要提问
如果你遇到有趣的面试题,或者有想知道的前端面试题,可以在下面的小程序提问,收到问题后会在第一时间为你解答。
我要出题
学习不打烊,充电加油只为遇到更好的自己,每天早上9点纯手工发布面试题,每天坚持花20分钟来学习与思考,在千变万化,类库层出不穷的今天,不要等到找工作时才狂刷题,提倡每日学习。