文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

Web前端知识体系精简

关于作用域的介绍请参考博客：函数的作用域和作用域链 3、函数指针 this this 存在于函数中，它指向的是该函数在运行时被调用的那个对象。...我们知道，JS是单线程语言，在浏览器中，当JS代码被加载时，浏览器会为其分配一个主线程来执行任务(函数)，主线程会形成一个全局执行环境，执行环境采用栈的方式将待执行任务按顺序依次来执行。...10、全局对象 window 在JS中，当一段JS代码在浏览器中被加载执行，JS引擎会在内存中构建一个全局执行环境，执行环境的作用是保证所有的函数能按照正确的顺序被执行，而window对象则是这个执行环境中的一个全局对象...比如上面的img文件加载完成后就会引起回流，每个页面至少需要一次回流，就是在页面第一次加载的时候。...在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

1.6K30

超详细的Web 前端知识体系，等你来挑战！

在JS中没有会块级作用域，只有函数作用域，因此JS中还存在着另外一种怪异现象，那就是变量提升。 3、函数指针 this this 存在于函数中，它指向的是该函数在运行时被调用的那个对象。...我们知道，JS是单线程语言，在浏览器中，当JS代码被加载时，浏览器会为其分配一个主线程来执行任务(函数)，主线程会形成一个全局执行环境，执行环境采用栈的方式将待执行任务按顺序依次来执行。...10、全局对象 window 在JS中，当一段JS代码在浏览器中被加载执行，JS引擎会在内存中构建一个全局执行环境，执行环境的作用是保证所有的函数能按照正确的顺序被执行，而window对象则是这个执行环境中的一个全局对象...比如上面的img文件加载完成后就会引起回流，每个页面至少需要一次回流，就是在页面第一次加载的时候。...在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

1.4K70
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    校招前端面试题

    提升用户体验: 如果同时加载较多图片，可能需要等待的时间较长，这样影响了用户体验，而使用懒加载就能大大的提高用户体验。防止加载过多图片而影响其他资源文件的加载 ：会影响网站应用的正常使用。...第二种是 AMD 方案，这种方案采用异步加载的方式来加载模块，模块的加载不影响后面语句的执行，所有依赖这个模块的语句都定义在一个回调函数里，等到加载完成后再执行回调函数。...，提前执行，推崇依赖前置CMD ：seajs 在推广过程中对模块定义的规范化产出，延迟执行，推崇依赖就近CommonJs ：模块输出的是一个值的 copy，运行时加载，加载的是一个对象（module.exports...属性），该对象只有在脚本运行完才会生成ES6 Module ：模块输出的是一个值的引用，编译时输出接口，ES6模块不是对象，它对外接口只是一种静态定义，在代码静态解析阶段就会生成。...（3）减少使用@import，建议使用link，因为后者在页面加载时一起加载，前者是等待页面加载完成之后再进行加载。选择器性能：（1）关键选择器（key selector）。

    80040

    前端开发中不可忽视的知识点汇总（二）

    ；保证代码运行的安全,限制函数中的arguments修改; 提高编译器效率，增加运行速度； 32....Ajax 解决浏览器缓存问题 1、在ajax发送请求前加上 anyAjaxObj.setRequestHeader("If-Modified-Since","0")。...这个方法是有问题的: 浏览器在整个文档解析完成之前都不能下载script文件，如果文档很大的话，解析完HTML，用户依然要等待script文件下载并执行完成之后，才能操作这个网站。...polyfill 是“在旧版浏览器上复制标准 API 的 JavaScript 补充”,可以动态地加载 JavaScript 代码或库，在不支持这些标准 API 的浏览器中模拟它们。...可以改变父函数的变量，所以使用时要谨慎 63. canvas和svg区别 1.从图像类别区分，Canvas是基于像素的位图，而SVG却是基于矢量图形。

    2.3K40

    前端经典面试题（有答案）_2023-03-01

    它是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。...（2）Fetch fetch号称是AJAX的替代品，是在ES6出现的，使用了ES6中的promise对象。Fetch是基于promise设计的。Fetch的代码结构比起ajax简单多。...（6）SVG是无损的矢量图。SVG是矢量图意味着SVG图片由直线和曲线以及绘制它们的方法组成。当放大SVG图片时，看到的还是线和曲线，而不会出现像素点。...同步和异步的区别 同步指的是当一个进程在执行某个请求时，如果这个请求需要等待一段时间才能返回，那么这个进程会一直等待下去，直到消息返回为止再继续向下执行。...异步指的是当一个进程在执行某个请求时，如果这个请求需要等待一段时间才能返回，这个时候进程会继续往下执行，不会阻塞等待消息的返回，当消息返回时系统再通知进程进行处理。

    1.6K20

    桌面浏览器前端优化策略

    ，这样可以缩短页面首次访问的用户等待时间。...使用可缓存的AJAX 对于返回内容相同的请求，没必要每次都直接才服务器上面拉取，合理的使用AJAX的缓存能加快AJAX的响应素的并减轻服务器的压力。...在发起AJAX请求的时候，添加上cache: true属性即可。 使用GET来完成AJAX请求 你可能不知道，使用GET请求比使用POST请求的效率更高。...把 Javascript 资源引用放在HTML文件地底部 把CSS资源引用放在HTML文件头部，即之前，这样防止因为 Javascript 的加载与解析造成的页面阻塞。...避免运行耗时的 Javascript 长时间运行的Javascript会阻塞浏览器构建DOM树、DOM树渲染、页面渲染。所以，任何与页面初次渲染无关的逻辑功能都应该延时加载。

    1.3K20

    ECharts 迎来重大更新，运行时包体积可减少 98%！

    服务端渲染 + 客户端轻量运行时 Apache ECharts 功能强大，相应地，包体积也比较大。我们在之前的版本中也做了各种努力来改进这一点。...对于一些对页面加载速度要求较高的场景，这可能不是一个理想的选择。 在 5.5.0 版本中，我们新增了客户端轻量运行时，客户端无需加载完整 ECharts 即可实现部分交互。...这样，我们可以在服务端渲染图表，然后在客户端加载轻量运行时，实现一些常见的交互。这意味着，只需要加载 4KB 的轻量运行时（gzip 后 1KB），即可实现带初始动画和部分常用交互形式的图表。...如需使用客户端轻量运行时方案，服务端代码和之前一样，但需要保证 ECharts 版本号在 5.5.0 以上。...在之前的版本中，我们已经支持使用 groupId，用以表示当前数据所属的组别。

    1.6K10

    网站优化之静态资源优化

    任何 body 元素之前，可以确保在文档部分中解析了所有 CSS 样式（内联和外联），从而减 少了浏览器必须重排文档的次数。...如果放置页面底部，就要等待最后一个 CSS 文件下载完成， 此时会出现"白屏"，影响用户体验。     ...• 增加首屏必要的 CSS 和 JS      • 页面如果需要等待所的依赖的 JS 和 CSS 加载完成才显示，则在渲染过程中页面会一直显 示空白，影响用户体验，建议增加首屏必要的 CSS 和 JS，...这样做，首屏能快速显示出来，相对减少用户对页 面加载等待过程。...4.2JavaScript 变量和函数优化      • 尽量使用 id 选择器      • 尽量避免使用 eval      • JavaScript 函数尽可能保持简洁      • 使用事件节流函数

    2.2K10

    页面性能优化

    博客地址：https://ainyi.com/15 在chrome浏览器，对于同一域名，最多支持6个请求的并发，其他请求会推入到队列中等待或停滞不前，直到6个请求之一完成后，队列中新的请求才会放出。...innerHTML替代逐个构建元素 处理列表子元素的事件时，可以使用事件委托 优化图片的加载 图片懒加载，优先加载浏览器可视区域的图片 小图片或图标，可用SVG、Iconfont、Base64等技术，多个图标也可以制作成雪碧图...懒加载原理 首先将页面上的图片的 src 属性设为空字符串或者一个加载中的图片，而图片的真实路径则设置在 data-original 属性中， 当页面滚动的时候需要去监听 scroll 事件，在 scroll...img 标签最初设置为 display: none，要加载的时候显示 或者滚动条到达可视范围内，js 为目标 div 加上这个已经加载好的 css 属性 ajax 预加载 提前 ajax 请求获取数据...场景有个 tab 标签页，当鼠标放到某个 tab，立刻 ajax 加载该 tab 的数据 当点击这个 tab 标签页的时候，就可以立刻加载出来，再将数据缓存起来或加入全局变量，下一次使用直接从缓存读取

    1.5K50

    AJAX原理与步骤

    HTML5学堂：而今，AJAX技术已经成为JavaScript的重要组成部分，提到AJAX，最核心的两个词语是“局部刷新”和“异步加载”。在本文当中，主要介绍AJAX是什么以及其操作的基本步骤。...与之对应的概念是同步，同步的链接在同一时刻只会有一个，并且会阻止后续JS代码的执行，JS必须等待同步链接加载完毕后才能继续执行。AJAX发展到现在，不但可以发起异步链接，也可以发起同步链接。...为何有了AJAX 在AJAX出现之前，注册是非常痛苦的一件事，当时互联网刚刚在中国兴起，网络下载速度普遍在十K出头，而且互联网产品都还不是很成熟，当时注册需要填非常多的没有用的项。...在经历过漫长的填写以后，点完注册会跳到另一个页面，然后就是漫长的等待加载页面。如果此时有一个地方写错了，这个新的页面就会提示你写错了，你可以选择后退重填，但是所有的项都会被清空。如此反复。...出于这样“糟糕”的用户体验影响，AJAX就横空出世了~~~ AJAX的基本步骤 1 创建请求 var xhr = new XMLHttpRequest(); 构造函数实例化 2 确定发送方式和地址 xhr.open

    1.1K60

    多图站点性能优化

    在没有透明和动画需求的情况下，JPEG 格式图片胜任大部分场景，如果对图片的展示质量有较高要求时，可使用 PNG 格式图片。 绘制 LOGO、ICON 等非照片的图片内容时，一般使用 SVG 格式。...比如 iconfont 等矢量图标管理平台中大量使用 SVG 格式。...具体细节上，需要自行计算图片节点与目标视口的纵向或横向距离，且需使用节流函数来避免性能问题。 3.2 图片预加载 图片预加载机制是为了增强用户体验，尽快地加载出图片，使得用户体验更为流畅。...link 允许开发者在 HTML 的 head 标签中声明资源请求，指定页面需要预加载的资源，并且在浏览器的主要渲染机制启动之前加载，避免阻塞页面渲染且保证资源尽早可用...使用 Ajax 时需要注意可能存在跨域问题。

    2.1K00

    【AJAX】对于AJAX 解析已经XMLHttpRequest对象对于异步的操作等等在项目中的体验

    AJAX不是一种新的编程语言，而是一种使用现有标准的新方法。 AJAX的最大优点是它可以与服务器交换数据并更新某些网页，而无需重新加载整个网页。...这意味着可以在不重新加载整个页面的情况下更新页面的某些部分。...在服务器上执行的许多任务都很耗时。这可能会导致应用程序在AJAX出现之前挂起或停止。...使用AJAX，JavaScript不需要等待服务器的响应，而是： 等待服务器响应时执行其他脚本 准备就绪后处理响应 xmlDoc=xmlhttp.responseXML; txt=""; x=xmlDoc.getElementsByTagName...loadXMLDoc（）函数创建XMLHttpRequest对象，在服务器响应就绪时添加要执行的函数，并将请求发送到服务器。

    2.1K60

    谈一谈javascript异步

    两个异步函数相遇了，先执行谁？谁跑的快就先执行谁？...当产生用户交互（鼠标点击事件，页面滚动事件，窗口大小变化事件等等），ajax，定时器，计时器等，会向事件循环中的任务队列添加事件，然后等待执行， 前端异步有哪些场景？...定时任务：setTimeout,setInverval 网络请求：ajax请求，img图片的动态加载 事件绑定或者叫DOM事件，比如一个点击事件，我不知道它什么时候点，但是在它点击之前，我该干什么还是干什么...用addEventListener注册一个类型的事件的时候，浏览器会有一个单独的模块去接收这个东西，当事件被触发的时候，浏览器的某个模块，会把相应的函数扔到异步队列中，如果现在执行栈中是空的，就会直接执行这个函数...ES6中的Promise 什么时候需要异步： 在可能发生等待的情况 等待过程中不能像alert一样阻塞程序的时候 因此，所有的“等待的情况”都需要异步 一句话总结就是需要等待但是又不能阻塞程序的时候需要使用异步

    1.1K20

    九彩拼盘的前端技能

    API） Ajax 客户端存储：Cookie，Web Stroge(Local&Session)，离线缓存。...管理组件的状态和组件间的通信 单向数据流：Vuex ES6 函数式编程（纯函数有很多优势，但完全函数式编程的可读性很烧脑） 设计模式（了解部分） 安全（只是了解） （加密摘要算法，XSS，CSRF）...综合 页面性能优化 页面加载的优化 代码执行速度的优化 代码调试 浏览器的调试工具 移动端页面调试 在微信中：微信开发者工具 Weinre 调试线上页面 Fiddler HTTP （缓存机制，...加载器：Webapck， Requirejs， Seajs。 工具库：UnderScore&Lodash，Moment.js 前端工程化 依赖管理：npm，Bower (不推荐)。...想学的 SVG : SVG 可以做很多酷炫的交互。用 SVG 做的一些效果比用图片或 Canvas之类的更有优势。 Cycle.js: 写法很优雅的函数式编程的数据流的库。

    1.3K20

    【JS】239-浅析JavaScript异步

    那么诸如 onclick回调， setTimeout， Ajax这些都是怎么实现的呢？即浏览器搞了几个其他线程去辅助 JavaScript线程的运行。...这种情况下就需要异步编程模式，目的就是把代码的运行打散或者让 IO调用（例如 AJAX）在后台运行，让界面更新和事件处理能够及时地运行。...在搞清楚这个问题，首先要明白什么是回调函数。 百科：回调函数是一个函数，它作为参数传递给另一个函数，并在父函数完成后执行。回调的特殊之处在于，出现在“父类”之后的函数可以在回调执行之前执行。...回调函数应用场景 资源加载：动态加载js文件后执行回调，加载iframe后执行回调，ajax操作回调，图片加载完成执行回调，AJAX等等。...由于两个函数都是异步的，即：调用时序和程序的主流程是相对独立的，所以没有办法在主体里面等待它们的返回值，它们被打开的时候程序也不会停下来等待，否则也就失去了setTimeout及setInterval的意义了

    1.2K20
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券