网站建设前端开发如何应对浏览器的重绘和重排

2017.02.09

　　网站建设中关于技术问题主要可以分形两部分，一般都是由专业的技术人员来负责完成，其中一部分是网站后台的技术开发，主要负责的是网站的后台系统开发问题；另一部分就是网站的前端技术开发，主要负责的是网页前端Web开发的问题。这两大块儿技术问题解决的好否是企业能否获得一个优秀网站的关键，本文中分形科技主要为大家介绍的是其中的前端开发技术。

　　首先，我们先来分析一下什么是前端开发

　　前端开发又称Web前端开发技术，以前叫做网页制作，其主要职能就是把网站的界面更好地呈现给用户。前端开发工程师通过运用专门的技术软件让企业网站互联网化，使静态的页面动态化。Web前端开发涵盖的知识面非常广，既有具体的技术，又有抽象的理念。

　　其次，介绍一下前端开发技术人员需要掌握的专业技能

　　随着互联网技术的发展，前端开发技术变更越来越成熟，市场对于前端开发技术人员的专业技能要求也越来越高，具体的技能主要包括：1、掌握HTML，2、服务器端脚本语言，3、CSS和JavaScript等。

　　在了解以上的重要知识后，分形科技小编再为大家介绍一下网站建设前端开发如何应对浏览器的重绘和重排。浏览器重绘即repaint，浏览器的重排即reflows。重绘（repaint）是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性进行重新绘制，使网页元素呈现出新的外观。如改变vidibility、outline、背景色等属性。特点：重绘不会带来网页的重新布局，并不一定伴随重排。重排（reflows）是指网页中元素更明显的一种改变，可以理解为渲染树进行重新计算。因为浏览器重排比较复杂，所以，在这里分形科技重点要介绍的是浏览器重排的问题。

　　下面是分形科技为大家总结的一些常见可以触发重排的操作（不同的浏览器的情况很有一些不同）：

　　1、DOM（文档对象模型）元素的几何属性发生变化时

　　当网页中DOM元素的几何属性变化时，渲染树中的相关节点就会失效，浏览器会根据DOM元素的变化重建构建渲染树中失效的节点。随之瑞来的就是重新绘制被重排的页面。特点：浏览器重排一定会引起浏览器的重绘。

　　2、浏览器引擎因获取某些属性而触发重排。

　　当浏览器引擎获取网页中一些属性时，浏览器为取得正确的值也会触发重排，所以我们在在多次使用这些属性值时应进行缓存。网站中可修改属性包括：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE)。

　　3、改变元素的样式、调整窗口大小触发重排

　　网站建设前端开发中，改变网页中元元素的一些样式，或是调整浏览器窗口大小都会触发浏览器重排。避免方法：将网页中需要多次重排的元素的position属性设为absolute或fixed，这样此元素就脱离了文档流，不会影响到其他元素。

　　最后要提醒大家的是想要做好网站建设的前端开发就必须要在掌握专业技术的基础上重视实践的积累。

400-6446-365 / 010-64928252 我想要个更针对我需求的方案

上一篇文章：网站设计需要掌握前端技术，知名设计师这样... 下一篇文章：哪些搜索数据可以对网站设计起到积极作用

看过此文章的人也看过