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

【面试】1093- 21 道关于性能优化的面试题（附答案）

如果图片展示区域小于图片的真实大小，则应在服务器端根据业务需要先行进行图片压缩，图片压缩后，图片大小与展示的就一致了。 3、谈谈性能优化问题。 可以在以下层面优化性能。...如果图片很多，浏览器需要不断地调整页面。这不但影响速度，而且影响浏览体验。...（3）尽量避免重设图片大小。重设图片大小是指在页面、CSS、 JavaScript文件等中多次重置图片大小，多次重设图片大小会引发图片的多次重绘，影响性能 （4）图片尽量避免使用 DataURL。...20、jQuery性能优化如何做？ 优化方法如下。 （1）使用最新版本的 jQuery类库。...（3）以数组方式使用 jQuery对象。使用 jQuery选择器获取的结果是一个 jQuery对象。然而， jQuery类库会让你感觉正在使用一个定义了索引和长度的数组。

2.3K20

21道关于性能优化的面试题(附答案)

如果图片展示区域小于图片的真实大小，则应在服务器端根据业务需要先行进行图片压缩，图片压缩后，图片大小与展示的就一致了。 3、谈谈性能优化问题。 可以在以下层面优化性能。...如果图片很多，浏览器需要不断地调整页面。这不但影响速度，而且影响浏览体验。...（3）尽量避免重设图片大小。重设图片大小是指在页面、CSS、 JavaScript文件等中多次重置图片大小，多次重设图片大小会引发图片的多次重绘，影响性能 （4）图片尽量避免使用 DataURL。...20、jQuery性能优化如何做？ 优化方法如下。 （1）使用最新版本的 jQuery类库。...（3）以数组方式使用 jQuery对象。 使用 jQuery选择器获取的结果是一个 jQuery对象。然而， jQuery类库会让你感觉正在使用一个定义了索引和长度的数组。

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

    如何优化前端页面 如何优化网页

    2.2.4 权衡嵌套层级以及扩展性等多个方面后，在适当位置使用三层嵌套技术。 2.2.5 合理书写a标签的title、img标签的title和alt，提升网站的SEO。...3.1.3 避免class与id重名，对于class名使用中划线，而id名遵循小驼峰命名法。 3.1.4 在书写网页样式之前，先进行浏览器默认样式重置。...4.1.2 所有变量声明都放在函数的头部。 4.1.3 所有函数都在使用之前定义。 4.1.4 尽量避免使用全局变量，防止全局作用域被污染。...4.1.8 对于DOM操作，尽可能减少在页面中查找元素的次数，即用变量存储查找的元素，之后再需使用，只需要使用变量即可（for循环中常见的长度控制，同理）。...4.5.5 合理使用AJAX中发送数据的方法，当文档中允许使用post或get发送时，优选选用get方法。 4.6 框架 4.6.1 jQuery等插件的合理引用，处理常见的浏览器兼容问题。

    3.1K80

    求职 | 史上最全的web前端面试题汇总及答案

    em的值不是固定的，它是相对单位，em是指当前默认字号大小（继承父元素默认字号）的倍数，可根据父元素字号的改变而自动调整。...浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。...那么12px=0.75em, 10px=0.625em HTML5离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失； sessionStorage 数据在浏览器关闭后自动删除。...Reset重置浏览器的css默认属性浏览器的品种不同，样式不同，然后重置，让他们统一。...jQuery UI则是在jQuery的基础上，利用jQuery的扩展性，设计的插件。 提供了一些常用的界面元素，诸如对话框、拖动行为、改变大小行为等等。

    2.1K10

    JQuery基础概念知识

    它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。...jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)。...，提高了开发效率；强大的DOM、CSS事件处理操作能力；使代码更加简洁；减弱了与浏览器的相关性；提高了运行效率； 下载地址：http://docs.jquery.com/Downloading_jQuery...使用 jQuery的Id选择器；jQuery的事件方法；修改样式函数css()；修改属性函数attr()； 新建一个html文档 后是没有缩进的，不带min的那个是完整格式的，打开后是有良好格式的js代码，方便阅读和修改（一般不要改） 应用 首先在html文档中写一个输入框和两个按钮：1234<form action

    1.6K10

    零基础学网页开发入门（制作博客案例）适应手机端div+css+js的综合介绍

    通过使用谷歌浏览器右键“查看源代码”。或者审查元素（检查）。 html5中的文档规范： 调整大小，我们常常会使用px（像素）来表示，但如果想要适应设备窗体大小变化，就要使用比例： 例如调整宽度为100%在css中的写法如下 width:100% 五、网站代码结构 基础代码结构的分割...jquery框架来辅助我们操作html中的内容： 框架的下载地址如下： http://jquery.com/ 使用jQuery框架控制html元素的关键点： 1.必须先要加载jquery文件 2.使用标准格式...： $(function(){ 这里是html加载完成后才会执行的代码。...变量的赋值格式： 变量名称=变量的值 js中时钟控件 时间间隔方法： setInterval方法 使用的格式： sertInterval(需要调用的函数，时间间隔（单位毫秒）) 匿名函数的写法 function

    1.7K30

    4-11 shimming 的作用

    打包后，打开页面： ? image.png 可以看到正常输出。 现在我们试着调整 ui, 去掉对 jquery 的引用,在 index 将其引入会如何呢？...image.png 发现即使在入口 index 引入 jquery，但是 ui 找不到该变量，这还是因为模块引入变量的作用范围是模块内，正确的用法是哪里使用，就在哪里引用（虽然webpack 底层只会对相同模块加载一次...可是对一些老的三方库，并没有引用 jquery，怎么办呢，他们默认 jquery 是全局变量可以直接引用。 要解决这个问题，我们把 jquery 作为我们应用程序中的一个全局变量就可以了。...要实现这些，我们需要使用 ProvidePlugin 插件。 使用 ProvidePlugin 后，能够在通过 webpack 编译的每个模块中，通过访问一个变量来获取到 package 包。...然后新旧浏览器就都可以使用这个 API 了。

    98520

    组件分享之前端组件——文件上传小部件jQuery-File-Upload

    支持跨域、分块和可恢复的文件上传和客户端图像大小调整。...客户端图像调整大小: 图像可以自动调整客户端浏览器支持所需的JS api。 图片、音频、视频预览: 支持支持api的浏览器，支持在上传前预览图片、音频、视频文件。...传统浏览器的优雅回退: 通过xmlhttprequest上传文件(如果支持)，并使用iframes作为回退。...JavaScript 加载图像库 v2+：图像预览和调整大小功能所必需的。 JavaScript Canvas to Blob polyfill v3+：调整大小功能所必需的。...Bootstrap 使用的Glyphicons图标集。 本文声明： 知识共享许可协议 本作品由 cn華少 采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。

    4.6K20

    Web前端开发（高级）下册-目录

    内部标签几何图形标签路径标签文字标签 HTML5新特性结构化语义元素多媒体元素其他元素 HTML5新增全局属性HTML5废弃的元素HTML5废弃的属性web storage less介绍less的安装服务端客户端 less的使用变量嵌套混合继承函数导入其他...jquery mobilejquery mobile的诞生jquery mobile的安装jquery mobile的使用 jquery mobile页面jquery mobile过渡jquery mobile...前端开发，调试工具常用web前端开发工具常用web前端调试工具 html与css代码优化html优化网页文档结构规范html5新特性html 代码优化以及写法注意 css3新特性浏览器样式重置css样式选择器...，优先级css样式多余样式去除，结构优化css浏览器兼容性 前端资源优化sprite拼合图css sprite的原理css sprite的制作工具 代码压缩技术yui compressorgzip打包工具...symbol获取 let和constletconst 变量的解构赋值默认值解构赋值分类 set与map声明操作方法遍历方法 箭头函数一个参数的箭头函数没有参数的箭头函数多个参数的箭头函数函数体箭头函数返回对象箭头函数事件

    1.6K30

    看不完的那种！前端170面试题+答案学习整理（良心制作）

    18.rem的原理是什么 在做响应式布局时，通过调整html的字体大小，页面上所有使用rem单位的元素都会做相应的调整。...通过传入window对象参数，可以使window对象作为局部变量使用。...一些数组或对象的方法经常能使用到，jQuery将其保存为局部变量以提高访问速度。jQuery实现的链式调用可以节约代码，所返回的都是同一个对象，可以提高开发效率。...当dom完全加载时，jquery允许你执行代码，使用$(document).ready()最大的好处在于它适用于所有浏览器，jQuery有助于解决跨浏览器兼容性问题。...image 重绘： 当盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来之后，浏览器便把这些原色都按照各自的特性绘制一遍，将内容呈现在页面上。

    13.1K50

    膜拜！用最少的代码却实现了最牛逼的滚动动画！

    GreenSock 动画平台 （GSAP） 可为 JavaScript 可以操作的任何内容（CSS 属性、SVG、React、画布、通用对象等）动画化，并解决不同浏览器上存在的兼容问题，而且比 jQuery...可以在进入/离开定义的区域或将其直接链接到滚动栏时在动画上执行操作（播放、暂停、恢复、重新启动、反转、完成、重置）。延迟动画和滚动条之间的同步。根据速度捕捉动画中的进度值。...当窗口调整大小时，自动重新计算位置。在开发过程中启用视觉标记，以准确查看开始/结束/触发点的位置。...自定义滚动触发器容器，可以定义一个 div 而不一定是浏览器视口。高度优化以实现最大性能。插件大约只有6.5kb大小。...pin: true, // 在执行时固定触发器元素 start: "top top", // 当触发器的顶部碰到视口的顶部时 end: "+=500", // 在滚动 500 px后结束

    4K00

    膜拜！用最少的代码却实现了最牛逼的滚动动画！

    GreenSock 动画平台 （GSAP） 可为 JavaScript 可以操作的任何内容（CSS 属性、SVG、React、画布、通用对象等）动画化，并解决不同浏览器上存在的兼容问题，而且比 jQuery...可以在进入/离开定义的区域或将其直接链接到滚动栏时在动画上执行操作（播放、暂停、恢复、重新启动、反转、完成、重置）。 延迟动画和滚动条之间的同步。 根据速度捕捉动画中的进度值。...当窗口调整大小时，自动重新计算位置。 在开发过程中启用视觉标记，以准确查看开始/结束/触发点的位置。...自定义滚动触发器容器，可以定义一个 div 而不一定是浏览器视口。 高度优化以实现最大性能。 插件大约只有6.5kb大小。...true, // 在执行时固定触发器元素 start: "top top", // 当触发器的顶部碰到视口的顶部时 end: "+=500", // 在滚动 500 px后结束

    3.7K20

    HTML5游戏开发实战–当心

    5.jQuery为我们提供了在页面载入完毕后才运行代码的方法，例如以下： jQuery（document）.ready（function （） { //这里是代码 }）； $(function...() { //这里是代码 }); 6.使用jQuery比单纯使用JavaScript有例如以下几个优势： 使用jQuery能够用更短的代码来选择DOM节点并对其进行改动。...使用jQuery库能够让代码无须做额外的调整就能够支持全部主流浏览器。jQuery对纯JavaScript代码进行包装以达到自身实现跨浏览器的能力。...更好的做法是，将使用的全局变量放入一个对象中。 11.在介绍背面可见性前。页面上的全部元素应该仅仅呈现它们的前面。曾经，元素没有正面或背面的概念。由于它仅仅有一个选择。如今。...23.本地存储的限制大小。每一个域名通过localStorage存储数据时会有大小的限制。 这个大小的限制在不同的浏览器中可能会略有不同。通常，限制大小为5MB。

    2.5K10

    Tampermonkey for Mac(油猴Safari浏览器插件)

    一款适用于Safari用户的脚本管理器，它可以提供了诸如便捷脚本安装、自动更新检查、标签中的脚本运行状况速览、内置的编辑器等众多功能，同时tampermonkey还有可能正常运行原本并不兼容的脚本，是浏览器最好的辅助插件...Tampermonkey for Mac(油猴Safari浏览器插件) 图片 更新日志 常规： 改进了作为用户脚本安装的用户样式的兼容性 使垃圾可配置（仅开/关/会话） 通过 @unwrap 标签改进...JavaScript 脚本支持 如果浏览器支持，则使用 ES2022 进行 linting 更新 ESLint 无需用户干预即可重新验证云服务不那么令人不安 的 Shift 键 + 基于鼠标单击的多选...暗模式改进 尽可能显示本地化的用户脚本名称和描述 在编辑时保留 CRLF 行结尾 使用 eslint-plugin-userscripts 突出显示用户脚本标题问题 修复存储“重新加载”按钮并添加“重置...” ' UI： 在仪表板中显示脚本和外部资源大小 修复具有透明背景的网站图标 如果高级编辑器被禁用，则改进编辑器菜单 通过拖放修复脚本定位 通过 删除 jQuery 依赖项来减小扩展大小 同步： 添加一个按钮以强制同步

    1.7K10

    多种前端框架的优缺点「建议收藏」

    、VueJS、AngularJS、ReactJS、backbone 、ember 一、JQuery 优点： 1、轻量级：大小只有18KB。...5、完善的Ajax：JQuery将所有的Ajax操作封装到一个函数$.ajax()里，使得开发者处理Ajax的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题...6、不污染顶级变量：JQuery只建立一个名为JQuery的对象，其所有的函数方法都在这个对象之下。其别名$也可以随时交流控制权，绝对不会污染其他的对象。...2、插件兼容性：与上一点类似，当新版jQuery推出后，如果开发者想升级的话，要看插件作者是否支持。通常情况下，在最新版jQuery版本下，现有插件可能无法正常使用。...2.是一个比较完善的前端框架，包含服务，模板，数据双向绑定，模块化，路由，过滤器，依赖注入等所有功能； 3.自定义指令，自定义指令后可以在项目中多次使用。

    5.3K20

    医疗数字阅片-医学影像-Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。_.throttle(func, , [option

    例子 // 避免在滚动时过分的更新定位 jQuery(window).on('scroll', _.throttle(updatePosition, 100)); // 点击后就调用 `renewToken...不久后，Ben Alman 做了个 jQuery 插件（不再维护），一年后 Jeremy Ashkenas 把它加入了 underscore.js。而后加入了 Lodash 。...Debounce 实例 调整大小的例子 调整桌面浏览器窗口大小的时候，会触发很多次 resize 事件。...看下面 demo： 如你所见，我们为 resize 事件使用了默认的 trailing 选项，因为我们只关心用户停止调整大小后的最终值。...可以使用 rAF API 替换 throttle 方法，考虑一下优缺点： 优点 动画保持 60fps（每一帧 16 ms），浏览器内部决定渲染的最佳时机 简洁标准的 API，后期维护成本低 缺点 动画的开始

    3K20

    由浅入深 定制Bootstrap开发自己网站的六种方法

    先说给组件做减法定制，就是给Common CSS、Components、JavaScript components以及jQuery plugins做减法，页面下方的变量一律保持默认。...五、利用Sass删减组件以及修改变量值 使用Sass以及使用构建工具Grunt的教程，请另参考我的以构建Bootstrap v4为例练习使用Grunt，这里假设你熟练掌握了Sass和Grunt，所以我只说删减组件和修改变量值的过程...没错，由于变量名并不对应具体的类名或者元素名，而是比类名或者元素名更具体，所以猜是一个好主意，比如@font-size-h6是什么意思？猜的话肯定是h6元素的字体大小，事实上也是这样。...3、怎么利用Sass重置变量： Bootstrap官方给的方案是修改scss\_custom.scss，看看官方的注释： Bootstrap overrides Copy variables from...boostrap - 存放bs源文件，其中dist文件夹内的文件就是你先定制、后编译后的css和js文件，当然你也可以选择不定制，而是另写CSS文件覆盖bs的声明，虽然会加大几K的体积，但更好维护，而且几

    2K20
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券