重排反应

Web前端优化初探,小弟抛砖引玉,期待高手共破难关!

我只是一个虾纸丫 提交于 2019-12-25 03:51:09
前言 其实没想过写前端优化这篇文章来的,因为我自知现在水平达不到这个高度! 但是,你知道面试官很烦的,他每次面试非要问你浏览器兼容与前端优化......,所以我又不得不在这两个上面做一定研究。 上面几个问题,没一定功力的前端不可能答得好的。对于优化这块东西,我也很多正在摸索,实在觉得现在拿不出手啊!但是时间不等人。 比如这段时间参加的一个面试,面试官就非要将我做的页面想象得很卡,而且指定就是前端卡,让我优化,还问我平时会不会注意一些优化的东西。 说实话,平时写代码时候,我惊奇的发现一个事实: 1 我会不自主的将css写成一排:#tabs { border-bottom: 1px solid #1C87D5; padding: 5px 5px 0; }2 我写js时,两个等号一定要空格:var con = document.getElementById('content'); //不用编辑器我写出来的代码排版也不会差3 在写页面时候我会花10分钟纠结我这里是不是多了一个div...... 通过以上事实,我觉得我已经养成一种规范的“强迫症了”,这里不是要说自己编码多好,而是想说明: 很多优化在平时在意或者不在意之间就已经做了,到后面你就不自主认为他不是优化而是必须了,比如: for(var i = 0, len = args.length; i < len; i++) {} 但是

为什么操作DOM会影响WEB应用的性能?

。_饼干妹妹 提交于 2019-11-28 11:02:12
面试官经常会问你:“平时工作中,你怎么优化自己应用的性能?” 你回答如下:“我平时遵循以下几条原则来优化我的项目、以提高性能,主要有:” a. 减少DOM操作的次数(减少DOM的获取与修改次数) b. 减少网络请求 c. 压缩、合并静态资源文件(css、js、img等) d. 小图片文件base64化处理 e. js少用全局变量 f. ... Bingo!此时,你给自己抛了个可以把自己埋住的大坑。 因为面试官可能会追问你:“为什么减少DOM操作可以提高性能?” 为什么呢? _______ 1、dom是什么?ES和 DOM是什么关系? DOM 就是 Document Object Model ,文档对象模型,里边是接口,即方法函数。我们通过调用并传指定参数来使用。 官方定义:DOM是一个独立于语言的、用于操作XML和HTML文档的程序接口(API)。在浏览器中主要用于与HTML文档打交道,并且使用DOM API用来访问文档中的数据。 DOM是个与ES语言无关的API,它在浏览器中的接口却是用JavaScript来实现的,DOM就成了现在JS编码中的重要部分。 1-1、各大浏览器中,DOM的位置和JavaScript的位置(渲染引擎与JS引擎相互独立) 浏览器 JS位置 DOM位置 IE JavaScript的实现名为JScript,位于jscript.dll文件中