网站开发框架 Wordpress,网站整体设计流程,wordpress增加文章目录,做搜狗网站优化排名软目录
1、函数式编程是什么简单说下#xff1f;
2、打包工具代码管理 git svn 了解多少#xff1f;
3、什么是Webpack#xff1f;它的主要功能是什么#xff1f;
4、Webpack的核心概念是什么#xff1f;
5、如何获取到父节点dom 祖父节点呢#xff1f;
6、登录流…目录
1、函数式编程是什么简单说下
2、打包工具代码管理 git svn 了解多少
3、什么是Webpack它的主要功能是什么
4、Webpack的核心概念是什么
5、如何获取到父节点dom 祖父节点呢
6、登录流程? 登陆时token 放在服务端还是客户端
7、图片懒加载流程图片懒加载几秒
8、Vue权限管理怎么做的
9、说说你对闭包的理解闭包使用场景
10、说说 像素点、px、em、rem、vh、vw 的联系区别
11、如何实现父子组件通讯
12、vue 有哪些通讯方式
13、Vue中Key 是什么作用
14、首屏加载如何优化项目优化目前几秒 优化到几秒
15、防抖节流 一般频率是几秒
16、简单说下单点登录流程 和 基本原理
17、nginx 有何作用? 不使用它如何解决
18、项目富文本怎么封装上传图片到哪里什么格式有多大?如何存储
19、怎么封装一个组件
20、后端数据存放在哪里图片放在那里如何存放
21、ES6新特性有哪些
22、给你一个一维数组如何转化成想要的 element-ui tree格式的数据
23、v-model 双向绑定原理具体场景
24、什么是HTTP HTTP 和 HTTPS 的区别
25、箭头函数有什么特点
26、vue生命周期有哪些每个生命周期做了什么
27、你的接口一般放在哪个生命周期中为什么这样做
28、JSON 与 JSONP 的区别
29、CSS 隐藏元素的几种方法至少说出三种
30、请描述一下var、const、let三者的区别
31、cookie、sessionStorage、localStorage的区别
32、Vue 组件中 data 为什么必须是函数
33、如何水平垂直居中一个盒子
34、script、script async 和 script defer 的区别
35、new一个对象的时候发生了什么
36、HTTP的状态码有哪些并代表什么意思 1、函数式编程是什么简单说下 js 的函数式编程是写js每个功能封装成函数相互调用 vue 的函数式编程每个组件都使用vue提供的h函数渲染模板而不是直接写标签
2、打包工具代码管理 git svn 了解多少
Git和SVN都是代码管理工具用于帮助开发团队管理和跟踪代码的版本控制。Git和SVN都是用于代码管理的工具但Git是分布式版本控制系统适用于多人并行开发和分布式环境而SVN是集中式版本控制系统适用于小团队协作开发。
Git具有以下功能和作用
版本控制Git可以跟踪每个文件的改变并记录每个版本的变化开发人员可以随时回退到之前的版本。分支管理Git允许开发人员在不同的分支上进行并行开发每个分支都可以独立进行修改和提交。协作和合并多个开发人员可以同时在一个项目上进行开发并使用Git合并各自的修改。高效性能Git具有高效的性能可以快速处理大量的代码文件和版本。分布式架构Git的分布式架构使得开发人员可以在本地进行版本控制而不需要依赖于网络连接。
SVN具有以下功能和作用
版本控制SVN可以跟踪每个文件的改变并记录每个版本的变化开发人员可以随时回退到之前的版本。文件锁定SVN可以对文件进行锁定以确保同一时间只有一个人可以修改文件避免冲突。简单易用SVN的命令简单易懂适合不熟悉命令行的开发人员使用。集中控制SVN的代码仓库集中存储在一个中央服务器中所有的修改都需要连接到服务器进行操作。
以下是一些常用的SVN和Git指令
SVN指令
svn checkout URL从远程仓库检出代码。svn add file将文件添加到版本控制中。svn commit -m “message”提交代码到版本控制仓库。svn update更新本地代码到最新版本。svn log查看提交日志。svn diff查看修改的文件内容。svn revert file撤销对文件的修改。
Git指令
git clone URL从远程仓库克隆代码到本地。git add file将文件添加到暂存区。git commit -m “message”提交代码到本地仓库。git push将本地代码推送到远程仓库。git pull从远程仓库拉取最新代码到本地。git log查看提交日志。git diff查看修改的文件内容。git branch查看分支列表。git checkout branch切换到指定分支。git merge branch将指定分支合并到当前分支。
3、什么是Webpack它的主要功能是什么
WebPack是一个现代JS应用程序的静态模块打包工具。Webpack的主要功能包括
1. 模块打包将项目中的所有模块JavaScript、CSS、图片等当作一个整体通过依赖关系将它们打包成一个或多个静态资源文件。
2. 依赖管理Webpack可以分析模块之间的依赖关系根据配置的入口文件找出所有依赖的模块并将其整合到打包结果中。
3. 文件转换Webpack本身只能处理JavaScript模块但通过加载器Loader的使用可以将其他类型的文件如CSS、LESS、图片等转换为有效的模块使其能够被打包到最终的结果中。
4. 代码拆分Webpack支持将代码拆分成多个模块按需加载实现按需加载和提升应用性能。
5. 插件系统Webpack提供了丰富的插件系统可以通过插件实现各种功能的扩展例如压缩代码、自动生成HTML文件等。
4、Webpack的核心概念是什么
entry 入口 这是打包的入口文件所有的脚本将从这个入口文件开始output 出口 打包后输出的文件,文件名跟入口的保持一致但后面加上了hash的后缀让每次生成的文件名是唯一的。mode 模式 用于模块的源码的转换plugins 插件 有一些loader无法实现的功能就通过plugin去扩展 loader 转化器 mode一共有production,development,node三种如果没有设置会默认为production webpack 详细请参考相关文章 Webpack介绍大全_unwebpack-CSDN博客 前端面试必备 | webpack篇 - 知乎
5、如何获取到父节点dom 祖父节点呢 首先要先了解这两个概念parentNode文本节点或文档节点 parentElement 元素节点。
var grandparentNode parentNode ? parentNode.parentElement : null; // 获取祖父节点var grandparentNode parentNode ? parentNode.parentNode : null; // 获取祖父节点(selector).parents(selector); // 获取祖先元素$(selector).parent(selector); // 获取父节点$(selector).parentNode; // 以node[]的形式存放父节点如果没有父节点则返回空数组
6、登录流程? 登陆时token 放在服务端还是客户端
基于Token的认证如JWTJSON Web Tokens
用户提交登录表单包含用户名和密码。服务器验证用户凭证如果凭证正确生成包含用户信息的Token如使用JWT格式。服务器将Token返回给前端。前端存储Token通常在LocalStorage、SessionStorage或内存中。后续请求携带Token。服务器校验Token如果有效处理请求并返回资源。
7、图片懒加载流程图片懒加载几秒 基本原理 监听图片是否位于页面的可视区域内若在则加载图片不在则不加载图片 实现方案 自定义属性-将图片真实地址 url 存储在自定义属性中当监听到图片进入可视区 域 时将自定义属性值赋值给 img 的 src 属性 具体方法 可以用image.offsetTop document.documentElement.clientHeight document.documentElement.scrollTop 判断图片是否可以在可视区域内。
如果希望在图片出现在视口内之前有一定的延迟再加载例如为了平滑滚动效果可以在计算出图片出现在视口内后使用setTimeout函数来设置一个短暂的延迟如500毫秒
8、Vue权限管理怎么做的
Vue权限管理主要涉及两个层面界面权限控制和接口权限控制。
下面是一个基本的实现思路和步骤
① 用户登录与权限获取
用户登录成功后后端通常会返回一个包含用户角色和权限信息的token如JWT。前端在接收到这个token后应存储起来如存入localStorage或cookie并在后续的请求中携带此token以验证用户身份和权限。
② 路由权限控制
静态路由constantRoutes定义不需要权限即可访问的页面如登录页、404页等。动态路由asyncRoutes根据用户角色动态加载可访问的路由。在Vue中可以在用户登录后根据后端返回的权限信息筛选出用户有权访问的路由然后使用router.addRoutes()方法动态添加到路由表中。
③ 组件内的权限控制
可以通过自定义指令Vue指令或计算属性来控制组件内元素如按钮、链接的显示与否。例如创建一个v-has指令检查当前用户是否有权限访问某个功能。
Vue.directive(has, {inserted(el, binding, vnode) {const { value } binding;if (!value) return;const permissions vnode.context.$store.getters.permissions; // 假设权限存储在Vuex中if (!permissions.includes(value)) {el.parentNode el.parentNode.removeChild(el);}}
});
在组件模板中使用
button v-hascreateUser创建用户/button
④ 接口请求权限控制
在发起API请求时前端应确保请求头中包含有效的token。使用axios等HTTP客户端时可以在请求拦截器中自动添加token。后端会对每个接口请求进行权限校验如果用户没有权限访问某个接口后端会返回错误码前端根据错误码处理如提示无权限。
⑤ Vuex管理权限状态
将用户的权限信息存储在Vuex的状态管理器中方便全局访问和更新。
⑥ 动态菜单生成
根据用户权限动态生成侧边栏菜单或顶部导航。这通常在路由动态添加后根据路由信息生成菜单项。
9、说说你对闭包的理解闭包使用场景
闭包允许一个内部函数中访问到其外部函数的作用域内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。闭包作为函数内部与外部连接起来的一座桥梁。
①三大特性
函数嵌套函数函数内部可以引用外部的参数及变量参数和变量不会被垃圾回收机制回收
②应用场景
1防抖Debounce
防抖确保某函数在一定时间内只执行一次如果在这段时间内又被调用则重新开始计时。
function debounce(func, wait) {let timeoutId; // 利用闭包存储timeout标识return function(...args) {if (timeoutId) {clearTimeout(timeoutId); // 如果已有定时器则清除重新开始}timeoutId setTimeout(() {func.apply(this, args); // 使用apply确保func能访问调用debounce时的上下文和参数}, wait);};
}// 使用防抖处理搜索输入
const searchInput document.getElementById(search);
searchInput.addEventListener(input, debounce(function(e) {console.log(搜索关键词:, e.target.value);// 这里执行实际的搜索逻辑
}, 300)); // 等待300毫秒后执行搜索
2节流Throttle
节流确保某函数在一定时间间隔内只执行一次无论期间被调用多少次。
function throttle(func, limit) {let inThrottle; // 利用闭包存储是否在节流状态return function(...args) {if (!inThrottle) {func.apply(this, args);inThrottle true;setTimeout(() inThrottle false, limit);}};
}// 使用节流处理滚动事件
window.addEventListener(scroll, throttle(function() {console.log(滚动事件处理...);// 这里执行实际的滚动处理逻辑
}, 200)); // 每200毫秒最多执行一次
10、说说 像素点、px、em、rem、vh、vw 的联系区别
像素点Pixel
像素点是数字影像中的最小单位代表着一个具有固定位置和特定色彩或亮度值的图像单元。在显示器、数码相机、摄像机等设备中像素点数量越多能够表示的细节就越精细。像素px是相对于显示器屏幕分辨率而言的是web开发中最常用的像素单位。
px像素
像素px是CSS中用于设置元素尺寸或位置的基本单位之一。它是相对于显示器屏幕分辨率而言的与设备的物理像素相对应。在不同的设备上由于屏幕分辨率的不同相同的像素值可能会呈现出不同的视觉效果。
em
em是相对长度单位参照物是父元素的font-size字体大小。当使用em的时候em转为像素的大小取决于它们使用的字体大小。这个字体大小受从父元素继承过来的字体大小影响除非显式重写与一个具体单位。em具有继承的特点如果元素自身定义了font-size属性那么就会按照自身来计算如果都没有设置就会按照当前所有浏览器或者设备的默认文字大小来计算调整。
rem
rem是CSS3新增的一个相对单位它是相对于HTML根元素的字体大小font-size来计算的长度单位。如果没有设置HTML的字体大小就会以浏览器默认字体大小一般是16px来计算。rem可以实现响应式布局因为当HTML根元素的字体大小改变时所有使用rem单位的元素尺寸都会相应地改变。
vh和vw
vh和vw是CSS3中推出的新单位。vh是视窗高度viewpoint height的缩写1vh等于视窗高度的1%。vw是视窗宽度viewpoint width的缩写1vw等于视窗宽度的1%。这些单位使得元素尺寸可以相对于视窗的大小进行调整从而实现响应式布局。
11、如何实现父子组件通讯
父-子props子-父 $on、$emit获取父子组件实例 $parent、$childrenRef 获取实例的方式调用组件的属性或者方法Provide、inject 官方不推荐使用但是写组件库时很常用父子关系的组件数据传递选择 props 与 $emit进行传递也可选择ref
12、vue 有哪些通讯方式
父子关系的组件数据传递选择 props 与 $emit进行传递也可选择ref兄弟关系的组件数据传递可选择$bus其次可以选择$parent进行传递祖先与后代组件数据传递可选择attrs与listeners或者 Provide与 Inject复杂关系的组件数据传递可以通过vuex存放共享的变量
13、Vue中Key 是什么作用
diff算法依赖key值来判断该节点是否需要更新。key值推荐使用后端返回来的唯一id。
14、首屏加载如何优化项目优化目前几秒 优化到几秒
常见的几种SPA首屏优化方式
减小入口文件积静态资源本地缓存UI框架按需加载图片资源的压缩组件重复打包开启GZip压缩使用SS
15、防抖节流 一般频率是几秒
防抖Debounce
防抖确保某函数在一定时间内只执行一次如果在这段时间内又被调用则重新开始计时。
function debounce(func, wait) {let timeoutId; // 利用闭包存储timeout标识return function(...args) {if (timeoutId) {clearTimeout(timeoutId); // 如果已有定时器则清除重新开始}timeoutId setTimeout(() {func.apply(this, args); // 使用apply确保func能访问调用debounce时的上下文和参数}, wait);};
}// 使用防抖处理搜索输入
const searchInput document.getElementById(search);
searchInput.addEventListener(input, debounce(function(e) {console.log(搜索关键词:, e.target.value);// 这里执行实际的搜索逻辑
}, 300)); // 等待300毫秒后执行搜索
节流Throttle
节流确保某函数在一定时间间隔内只执行一次无论期间被调用多少次。
function throttle(func, limit) {let inThrottle; // 利用闭包存储是否在节流状态return function(...args) {if (!inThrottle) {func.apply(this, args);inThrottle true;setTimeout(() inThrottle false, limit);}};
}// 使用节流处理滚动事件
window.addEventListener(scroll, throttle(function() {console.log(滚动事件处理...);// 这里执行实际的滚动处理逻辑
}, 200)); // 每200毫秒最多执行一次
16、简单说下单点登录流程 和 基本原理
特点用户在SSO系统登录一次后可以访问所有集成了SSO的应用无需重复登录
用户首次尝试访问应用时被重定向到SSO服务器进行认证。用户提供凭证并登录到SSO服务器。SSO服务器返回一个认证令牌 给应用。应用使用该票据向SSO服务器确认用户身份。确认成功后用户可在不同的应用间自由切换而无需重新认证。
17、nginx 有何作用? 不使用它如何解决
Nginx 是一个高性能的 HTTP 和反向代理服务器它常用来作为负载均衡、反向代理、静态文件服务器等。Nginx 的作用主要是负载均衡、反向代理、静态文件服务器等。
18、项目富文本怎么封装上传图片到哪里什么格式有多大?如何存储
安装 yarn add wangeditor/editor # 或者 npm install wangeditor/editor --save yarn add wangeditor/editor-for-vuenext # 或者 npm install wangeditor/editor-for-vuenext --save 可通过 toolbarConfig 和 editorConfig 来修改菜单栏和编辑器的配置
详细文档参考 用于 Vue React | wangEditor
工具栏配置 - 插入新菜单屏蔽某个菜单等编辑器配置 - 兼听各个生命周期自定义粘贴菜单配置 - 配置颜色、字体、字号、链接校验、上传图片、视频等 当编辑器渲染完成之后通过 editorRef.value 获取 editor 实例即可调用它的 API
19、怎么封装一个组件
创建组件模板 定义组件逻辑添加样式可选使用组件
20、后端数据存放在哪里图片放在那里如何存放
前端通过后端上传接口将上传的 file 文件对象以表单形式传递给后端后端会将传递的图片文件放在服务器的特定目录文件夹下上传接口返回得到具体路径。然后提交调用提交接口表单。
21、ES6新特性有哪些
let 和 const: 引入了新的变量声明关键字let和const提供了块级作用域的变量声明箭头函数: 提供了一种更简洁的函数表达方式模板字符串: 使用反引号()包围的多行字符串支持字符串插值解构赋值: 允许从数组或对象中快速提取值到变量中简化了数据处理。展开运算符: 用三个点(...)表示用来展开数组或对象的属性用于合并数组或复制对象。模块(Module): 引入了模块系统使用import和export语句管理代码的导入和导出提高了代码的组织和重用性。Promise: 用于处理异步操作提供了一种更优雅的链式调用方式来处理异步操作的结果替代了传统的回调地狱。async/await: 异步编程的新语法糖使得异步代码看起来像同步代码基于Promise但更易于理解和编写。
22、给你一个一维数组如何转化成想要的 element-ui tree格式的数据 ①定义一维数组包含每个元素的 ID、名称以及可能的父级 ID。 ②创建一个空的树形结构数组这将是你将要填充的最终结果。 ③遍历一维数组对于每个元素检查它是否有父级 ID。 1.如果没有父级 ID可能是根节点则直接添加到树形结构数组中。 2.如果有父级 ID则首先找到或创建对应的父节点然后将当前元素作为子节点添加 到父节点的 children 数组中。 ④ 返回树形结构数组这将是你为 el-tree 准备的最终数据。
23、v-model 双向绑定原理具体场景
v-model 双向绑定原理
数据层Model应用的数据及业务逻辑视图层View应用的展示效果各类UI组件业务逻辑层ViewModel框架封装的核心它负责将数据与视图关联起来MVVM这里的控制层的核心功能便是 “数据双向绑定”
Vue中的双向绑定流程
new Vue()首先执行初始化对data执行响应化处理这个过程发生Observe中同时对模板执行编译找到其中动态绑定的数据从data中获取并初始化视图这个过程发生在Compile中同时定义⼀个更新函数和Watcher将来对应数据变化时Watcher会调用更新函数由于data的某个key在⼀个视图中可能出现多次所以每个key都需要⼀个管家Dep来管理多个Watcher将来data中数据⼀旦发生变化会首先找到对应的Dep通知所有Watcher执行更新函数
双向绑定应用场景
文本输入最常见的场景是在文本输入框input typetext中用户输入的内容会实时同步到Vue实例的数据属性上同时如果数据属性值在外部改变输入框的内容也会自动更新。
24、什么是HTTP HTTP 和 HTTPS 的区别
HTTP (HyperText Transfer Protocol)即超文本运输协议是实现网络通信的一种规范。为了保证这些隐私数据能加密传输让HTTP运行安全的SSL/TLS协议上即 HTTPS HTTP SSL/TLS通过 SSL证书来验证服务器的身份并为浏览器和服务器之间的通信进行加密 HTTP 和 HTTPS 的区别
HTTPS是HTTP协议的安全版本HTTP协议的数据传输是明文的是不安全的HTTPS使用了SSL/TLS协议进行了加密处理相对更安全HTTP 和 HTTPS 使用连接方式不同默认端口也不一样HTTP是80HTTPS是443HTTPS 由于需要设计加密以及多次握手性能方面不如 HTTP
25、箭头函数有什么特点
函数没有自己的this对象就是定义时所在的对象箭头函数的this指向外层作用域的this不可以当作构造函数也就是说不可以使用new命令否则会抛出一个错误不可以使用arguments对象该对象在函数体内不存在。如果要用可以用 rest 参数代替不可以使用yield命令因此箭头函数不能用作 Generator 函数
26、vue生命周期有哪些每个生命周期做了什么
beforeCreate 刚开始创建实例化。created创建实例化完成。beforeMount真实dom挂载之前虚拟dom创建完成即将开始渲染。mounted真实dom挂载已完成双向数据绑定并且DOM已经渲染完成。此时可以使用$refs属性对Dom进行操作即vue2版本 此时可以操作thisbeforeUpdate响应式数据更新但是DOM还未更新。dom更新之前updated数据发生变化并且DOM已经更新。beforeDestroy组件实例被销毁之前。实例即将被销毁destroyed组件实例已被销毁。
27、你的接口一般放在哪个生命周期中为什么这样做
①在Vue等前端框架中接口请求通常放在created或mounted生命周期钩子中。
created钩子在这个阶段Vue实例已经创建完成数据观测和事件配置已经完成。此时可以进行一些不需要DOM元素参与的接口请求。mounted钩子在这个阶段Vue实例已经被挂载到了DOM上可以访问到DOM。如果在 mounted钩子函数中请求数据可能导致页面闪屏问题加个loading即可解决。
②为什么这样做
用户体验: 放在created或mounted中可以确保数据在组件初次渲染时就已经准备就绪或尽快准备就绪从而提升用户体验避免白屏时间过长。逻辑清晰: 将数据获取逻辑集中在生命周期钩子中可以让组件的初始化逻辑更加集中和易于理解。资源管理: 在合适的生命周期中调用接口可以更好地管理资源和优化性能例如在数据真正需要时才发起请求避免不必要的网络消耗。
总的来说选择哪个生命周期钩子主要取决于你的具体需求是否需要立即获取数据以及是否依赖于DOM操作。
28、JSON 与 JSONP 的区别
JSON 则是一种轻量级的数据交换格式也是JavaScript对象。JSONP 实现跨域数据获取的技术只支持get方式。JSON是一种数据交换格式也是一种js对象JSONP是跨域访问的技巧二者没什么关系。
29、CSS 隐藏元素的几种方法至少说出三种
opacity: 0; ---- 设置透明度来隐藏元素隐藏对应的元素会占页面空间。isibility:hidden; ---- 隐藏对应的元素会占页面空间。display:none; ---- 隐藏对应的元素不会占页面空间。position:absolute; top:-9999px; ---- 让该元素脱离文档流移出视觉区域。height: 0; width: 0; ---- 将元素的尺寸缩小到0但这种方法对于具有固定宽高的元素更有效。transform: scale(0); ---- 通过缩放将元素缩小到看不见同样可以保持元素在布局中的位置。
30、请描述一下var、const、let三者的区别
var可以变量提升const、let不会提升var没有块级作用域const、let存在块级作用域var可以重复定义变量const、let不能重复定义是常量我个人目前实际编程中应用优先级const let var
31、cookie、sessionStorage、localStorage的区别 ①存储大小
cookie一般不超过4ksessionStorage5M甚至更多localStorage5M甚至更多 ②数据有效期
cookie:一般由服务器生成可以设置失效时间若没有设置时间关闭浏览器cookie失效如果设置了时间cookie就会存储在硬盘中过期失效sessionStorage仅在当前浏览器窗口关闭之前有效关闭页面或者浏览器会被清除localStorage永久有效窗口或者浏览器关闭也会一直保存除非手动永久删除 ③通信
cookiecookie在浏览器和服务器之间来回传递如果使用cookie保存过多数据会造成性能问题sessionStorage仅在客户端浏览器中保存不参与服务器的通信localStorage仅在客户端浏览器中保存不参与服务器的通信 ④ 作用域
cookie在所有同源窗口中都是共享的sessionStorage在同一个浏览器窗口是共享的不同浏览器即使是统一页面也不共享localStorage在所有同源窗口中共享 ⑤应用场景
cookie判断用户是否登录过网站以便实现下次自动登录或记住密码保存事件信息sessionStorage敏感账号一次性登录单页面用的较多localStorage用于长期登录适于长期保存在本地的数据
32、Vue 组件中 data 为什么必须是函数
保证组件实例间数据的独立性。当Vue创建组件实例时如果data是一个对象那么所有实例将共享这个对象的引用导致一个实例改变数据会影响到其他实例。而如果是函数每个实例化过程都会调用这个函数返回一个全新的数据对象这样每个组件实例都有自己的独立作用域和数据副本避免了数据交叉污染。
33、如何水平垂直居中一个盒子
知高度父line-height 等于高度一半(垂直居中) text-align:center(水平居中);父display:flex; align-items:center;justify-content:center;父position: relative; 子 position: absolute; top:0;left:0;right:0;bottom:0;margin:auto子绝父相 ,子 top: 50%; left: 50%;transform: translate(-50%, -50%);
34、script、script async 和 script defer 的区别
script
当浏览器遇到这样的脚本标签时它会立即停止解析HTML文档去加载并执行这个脚本。这个过程会阻塞文档的解析和渲染直到脚本执行完毕。所有script标签默认都按照它们在文档中出现的顺序执行。
script async
异步加载脚本意味着脚本的加载不会阻塞文档的解析可以与其他资源并行加载。脚本的下载不会暂停HTML的解析但是脚本的执行仍然会阻塞文档的渲染。当脚本下载完毕后会立即执行不保证执行顺序即使它们在文档中的顺序有先后。
script defer
同样允许脚本异步加载不阻塞文档解析。与async不同所有带有defer属性的脚本会保证按照它们在文档中的顺序进行执行这发生在HTML解析完成之后DOMContentLoaded事件触发之前。适合那些需要在文档解析完成后但在DOMContentLoaded事件触发前执行的脚本例如那些可能修改DOM的脚本但又不必阻塞页面渲染的场景。 总结
async主要用于那些不影响页面初次渲染且不依赖于文档顺序的脚本。defer则适用于需要维持脚本执行顺序同时又不想阻塞渲染的脚本。没有指定这两个属性的script则会按照传统方式阻塞文档的解析和渲染。
35、new一个对象的时候发生了什么
new操作符的执行过程
1首先创建了一个新的空对象
2设置原型将对象的原型设置为函数的 prototype 对象。
3让函数的 this 指向这个对象执行构造函数的代码为这个新对象添加属性
4判断函数的返回值类型如果是值类型返回创建的对象。如果是引用类型就返回这个引用类型的对象。
具体实现
function objectFactory() {let newObject null;let constructor Array.prototype.shift.call(arguments);let result null;// 判断参数是否是一个函数if (typeof constructor ! function) {console.error(type error);return;}// 新建一个空对象对象的原型为构造函数的 prototype 对象newObject Object.create(constructor.prototype);// 将 this 指向新建对象并执行函数result constructor.apply(newObject, arguments);// 判断返回对象let flag result (typeof result object || typeof result function);// 判断返回结果return flag ? result : newObject;
}
// 使用方法
objectFactory(构造函数, 初始化参数);36、HTTP的状态码有哪些并代表什么意思
HTTP状态码是由三位数字组成的代码用于表示客户端向服务器发起请求后服务器对请求的响应状态。状态码可以大致分为五类包括信息性状态码、成功状态码、重定向状态码、客户端错误状态码和服务器错误状态码。
常见的HTTP状态码
1xx信息性状态码
100 客户端应继续其请求。
2xx成功状态码
200 请求成功。201 请求已经被实现并因此创建了一个新的资源。204 服务器成功处理了请求但没有返回任何内容。
3xx重定向状态码
301请求的资源已被永久移动到新的URL上。302 请求的资源现在临时从不同的URL响应请求。304 客户端已经执行了GET请求但文件未发生变化。
4xx客户端错误状态码
400 服务器无法理解请求。401 请求要求进行身份验证。403 服务器理解请求但拒绝执行它。404服务器无法找到请求的资源。405 请求中指定的方法不被允许。
5xx服务器错误状态码
500 服务器遇到了一个未曾预料的情况导致其无法完成对请求的处理。501服务器不支持当前请求所需要的某个功能。503 由于临时的服务器维护或者过载服务器当前无法处理请求。
