首页
学习
活动
专区
圈层
工具
发布

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

对于图片懒加载,可以为页面添加一个滚动条事件,判断图片是否在可视区域内或者即将进入可视区域,优先加载。...不滥用 Float, Float在渲染时计算量比较大,尽量少使用。 不滥用Web字体,Web字体需要下载、解析、重绘当前页面,尽量少使用。...(8)避免在页面的主体布局中使用表,表要在其中的内容完全下载之后才会显示出来,显示的速度比DIV+CSS布局慢。 9、列举你知道的Web性能优化方法。 具体优化方法如下。...display:block后不应该再使用 vertical-align。display:table-*后不应该再使用 margin或者float。 (2)不滥用 float。...脚本处理不当会阻塞页面加载、渲染,因此在使用时需注意。 (1)把CSS写在页面头部,把 JavaScript程序写在页面尾部或异步操作中。

2.2K20

Jquery前端分页插件pagination同步加载和异步加载

上一篇文章介绍了Jquery前端分页插件pagination的基本使用方法和使用案例,大致原理就是一次性加载所有的数据再分页。...next_text : '下一页', items_per_page : pageSize, num_display_entries : 4, // 连续分页主体部分显示的分页条目数...www.jianshu.com/p/ed50ee3889d4 八款前端开发人员更轻松的实用在线工具:https://www.jianshu.com/p/267a01fb8bdb 前端几个常用简单的开发手册拿走不谢...image 原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1 90后前端妹子,爱编程,爱运营,爱折腾。...坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

4.5K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

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

    对于图片懒加载,可以为页面添加一个滚动条事件,判断图片是否在可视区域内或者即将进入可视区域,优先加载。...不滥用 Float, Float在渲染时计算量比较大,尽量少使用。 不滥用Web字体,Web字体需要下载、解析、重绘当前页面,尽量少使用。...(8)避免在页面的主体布局中使用表,表要在其中的内容完全下载之后才会显示出来,显示的速度比DIV+CSS布局慢。 9、列举你知道的Web性能优化方法。 具体优化方法如下。...display:block后不应该再使用 vertical-align。 display:table-*后不应该再使用 margin或者float。 (2)不滥用 float。...脚本处理不当会阻塞页面加载、渲染,因此在使用时需注意。 (1)把CSS写在页面头部,把 JavaScript程序写在页面尾部或异步操作中。

    2.4K20

    献给前端求职路上的你们(下)

    事件处理机制:IE是事件冒泡、火狐是 事件捕获; ev.stopPropagation(); JavaScript的作用域和作用域链?...(1) defer,只支持IE (2) async: false,(默认是true); (3) 创建script,插入到DOM中,加载完毕后callBack documen.write和 innerHTML...*jQuery是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等。 *jQuery UI则是在jQuery的基础上,利用jQuery的扩展性,设计的插件。...优点 因为Node是基于事件驱动和无阻塞的,所以非常适合处理并发请求, 因此构建在Node上的代理服务器相比其他技术实现(如Ruby)的服务器表现要好得多。...(7) 图片预加载,将样式表放在顶部,将脚本放在底部 加上时间戳。 (8) 避免在页面的主体布局中使用table,table要等其中的内容完全下载之后才会显示出来,显示比div+css布局慢。

    1.4K60

    好久不用 jQuery, 来复习一下

    jQuery 凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript 开发人员遍历 HTML 文档、操作 DOM、处理事件、执行动画和开发 Ajax 的操作。...程序加载更快 1.1.3 jQuery 的对象   DOM(Document Object Model,文档对象模型),每一个 DOM 都可以表示成一棵树。...而通过 jQuery 中的 (document).ready() 方法注册的事件处理程序,在 DOM 完全就绪时就可以被调用。...要解决这个问题,可以使用 jQuery 中另一个关于页面加载的方法 load() 方法。load() 方法会在元素的 onload 事件中绑定一个处理函数。...如果处理函数绑定给 window 对象,则会在所有内容(包括窗口、框架、对象和图像等)加载完毕后触发,如果处理函数绑定在元素上,则会在元素的内容加载完毕后触发。

    6.1K40

    jQuery中的$是什么

    但在JS应用库JQUERY的作者将之做为一个自定义函数名了,这个函数是获取指定网页元素的函数,使用非常之频繁,所以好多新手不知道,还以为$是JS的什么特殊语法。...”>脚本,想要用好他们,就得了解他们的区别,经过自己的总结发现他们的区别如下: 一、在head主体里写,如果有方法体,那么就是在客户点击的时候触发,如果没写方法体,比如引入的js文件,那么在加载页面前就...二、写在body主体里,是为了实现某些部分动态地创建文档。这里比如制作鼠标跟随事件,肯定只有当页面加载后再进行对鼠标坐标的计算。...也就是说把代码放在区在页面载入的时候,就同时载入了代码,你在区调用时就不需要再载入代码了,速度就提高了,这种区别在小程序上是看不出的,当运行很大很复杂的程序时,就可以看出了。...当然也可以将JavaScript标识放置在... 主体之间以实现某些部分动态地创建文档。 这里比如制作鼠标跟随事件,肯定只有当页面加载后再进行对鼠标坐标的计算。

    1.9K20

    jquery $(document).ready()与window.onload的区别

    以浏览器装载文档为例,在页面加载完毕后,浏览器会通过 Javascript 为 DOM 元素添加事件。...在常规的 Javascript 代码中,通常使用 window.onload 方法,而在jQuery中,使用的是$(document).ready() 方法,极大的提高Web应用程序的速度。...要解决这个问题,可以使用 Jquery 中另一个关于页面加载的方法 ---load()方法。 Load()方法会在元素的onload 事件中绑定一个处理函数。...如果处理函数绑定给 window 对象,则会在所有内容(包括窗口、框架、对象和图像等)加载完毕后触发,如果处理函数绑定在元素上,则会在元素的内容加载完毕后触发。...那么我们反过来用,如果不异常,那么就是页面DOM加载完毕了!

    2.9K31

    jQuery:详解jQuery中的事件(一)

    jQuery不仅提供了更加优雅的事件处理语法,而且极大的增强了事件处理能力。   ...一、jQuery中的事件   1、加载DOM:   执行时机:在常规的JavaScript中,通常使用window.onload方法,而在jQuery中,使用的是$(document).ready()方法...).ready()方法注册的事件处理程序,在DOM完全就绪时就可以被调用,也即此时网页的所有元素对jQuery都是可以访问的,但是并不是这些元素关联的文件都已经下载完毕。   ...要解决这个问题,可以使用jQuery中的另一个关于页面加载的方法——load()方法。load()方法会在元素的onload事件中绑定一个处理函数。...如果处理函数绑定给window对象,则会在所有的内容(包括窗口、框架、对象和图像等)加载完毕后触发,出国处理函数绑定在元素上,则会在元素的内容加载完毕后触发。

    2.7K20

    jQuery ajax() 方法

    jQuery Ajax 操作函数 jQuery 库拥有完整的 Ajax 兼容套件,其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据。...函数 描述 jQuery.ajax() 执行异步 HTTP (Ajax) 请求。 .ajaxComplete() 当 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。....ajaxError() 当 Ajax 请求完成且出现错误时注册要调用的处理程序。这是一个 Ajax 事件。 .ajaxSend() 在 Ajax 请求发送之前显示一条消息。...jQuery.ajaxSetup() 设置将来的 Ajax 请求的默认值。 .ajaxStart() 当首个 Ajax 请求完成开始时注册要调用的处理程序。这是一个 Ajax 事件。...; }); 加载完后请重新点击一下上面的 Load 请求看看有什么不同。 jQuery Ajax 事件 Ajax请求会产生若干不同的事件,我们可以订阅这些事件并在其中处理我们的逻辑。

    4.4K60

    如何编写自己的jQuery插件?

    它还包括一个易于使用的API,在所有浏览器上都是兼容的,并且可以很容易的进行HTML遍历、动画、DOM操作和事件处理。它不仅可扩展,而且经久耐用。因此,客户端脚本自开发以来变得容易得多。...但是,在新的情况下,插件也可以自定义创建,这并不是一项非常困难的任务。 jQuery是如何工作的?...要理解jQuery是如何工作的,你需要遵循以下步骤: · 创建一个带有所有基本标记的HTML文档,并调用jQuery.js文件。...· 开发人员预先考虑并将代码的可执行命令封装到onload()函数中,以确保在将文档加载到浏览器后立即执行命令。 · 有时,由于图像加载的延迟,文档不会完整加载。...为了确保加载后可以处理完整的文档,开发人员在其代码中提供了一个ready事件。 · ready事件的完整脚本(封装在其中的函数)放在前面创建的HTML文档中。

    2.2K10

    jQuery学习笔记

    document ready函数中,我们需要在js中加载该函数文档 // jQuery入口函数 $(document).ready(function(){ //jQuery代码 }); /**...live() 函数添加的事件处理程序。...jQuery AJAX AJAX AJAX = 异步JavaScript + XML 在不重载网页的情况下,后台加载数据并显示在页面上 AJAX菜鸟教程 jQuery ajax()方法...AJAX load() load() 从服务器加载数据,并返回数据 常常利用:调用一个重复的代码块,例如网页的导航、版本块等…… 由此可以大大的减少代码量的编写工作,模块化的团队开发应该常用...-- URL:加载的数据文件位置uRL data:与URL加载请求一起发送的字符串键/值对集合 callback:执行完毕后调用的函数 - responseTxt : 调用成功的结果 -

    8.7K30

    关于ajax学习笔记

    在 Ajax应用中信息是通过XML数据或者字符串在浏览器和服务器之间传递的(json字符串居多) 在浏览器端通过XMLHttpRequest对象的responseXMl属性,得到服务器端响应的XML数据...可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本。...它接受一个参数:请求主体发送的数据。 如果不需要通过请求主体发送数据,则必须传入null,不能留空。 请求主体:HTTP上行请求,有头部、主体。...这是为了防止不同工程师之间的程序,命名冲突。所以,每一个功能包,只能向全局暴露唯一的顶层变量,就是这个功能包自己的命名空间。 jQuery、YUI、underscore都是这样的做法。...scroll事件,一定是要截流的。因为用户滚一个鼠标滚轮的“小咯噔”就触发一次scroll事件;滑动滚动条的时候,是每一像素触发一次这个事件。

    2.2K20

    jQuery笔试题汇总整理--2018

    1、因为jQuery是轻量级的框架,大小不到30kb 2、它有强大的选择器,出色的DOM操作的封装 3、有可靠的事件处理机制(jQuery在处理事件绑定的时候相当的可靠) 4、完善的ajax(它的ajax...两个方法的功能相似,但在实行时机方面是有区别的 1、window.onload方法是在网页中所有的元素完全加载到浏览器后才执行 2、$(document).ready() 可以在DOM载入就绪是就对其进行操纵...3、可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本。...4、破坏了程序的异常机制。 5、不容易调试。 16、AJAX最大的特点是什么。 Ajax可以实现动态不刷新(局部刷新) 就是能在不更新整个页面的前提下维护数据。...该对象在Internet Explorer 5中首次引入,它是一种支持异步请求的技术。简而言之,XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。

    3.3K21

    ajax和它的超时

    假设页面结构分为三栏:左、中、右,而且页面数据会比较多,页面呈现的顺序则是是按从上而下执行的(当然是从左至右开始,一个模块一个模块加载数据),如果不采用队列,那么在页面可视范围之外的模块可能已经加载完数据了...队列的处理上,已经有一个插件了,叫ajaxManager,例子和链接在这里:http://www.protofunc.com/scripts/jquery/ajaxManager/;而在超时的处理上,jquery...If-Modified-Since', 'Thu, 1 Jan 1970 00:00:00 GMT'); xhr.setRequestHeader('Cache-Control', 'no-cache');  在响应完成后...而setTimeout中的fn函数,在处理时会先检测请求是否已经处理过了,这里它并没有对延时器进行引用,会导致的一种情况是,请求已经结束,延时器还在跑,直到达到指定的时间间隔。...最后一点是在FF 1.5之后,它支持progress事件,这意味着可以显示当前请求的进度(不再是枯燥的loading了)。

    1.8K10
    领券