前言 今天白天的时候我们一起学习了块级元素，晚上的时候本来想继续学习CSS，但是发现还是有一点累，所以我们还是来研究点大家都感兴趣的东西，前端优化。 什么是reflow？ 这个单词字面意思就是回流，这里举一个例子： 我们这里有个dom树： 我们如果删除了其中一个节点 ...

1、什么是reflow? reflow(回流)是指浏览器为了重新渲染部分或者全部的文档,重新计算文档中的元素的位置和几何构造的过程。 因为回流可能导致整个Dom树的重新构造,所以是性能的一大杀手。 以下操作会引起回流： ① 改变窗口大小 ② font-size大小改变 ③ 增加 ...

首先要清楚页面呈现的具体过程： 1. 浏览器把获取到的HTML代码解析成1个DOM树，HTML中的每个tag都是DOM树中的1个节点，根节点就是我们常用的document对象。DOM树里包含了所有HTML标签，包括display:none隐藏，还有用JS动态添加的元素等。 2. ...

1.浏览器渲染原理解析 想要提高网页的性能，首要的便是要理解浏览器渲染原理，下面关于浏览器的原理解析，我们以chrome内核webkit为例，其他内核的浏览器原理也基本大同小异，可触类旁通。 如上图所示，浏览器解析页面步骤可分为： * 解析HTML（HTML Parser） * 构建 ...

根据自己平时在测试工作中的经验总结及向其他测试大佬的学习，对一个Web页面的登录测试总结如下： 一、功能测试 1、输入正确的用户名及密码，点击提交按钮，验证是否能正确登录，登录成功后跳转至对应的页面 2、输入错误的用户名或者错误的密码，点击提交会登录失败，并且有相应的错误提示框 3、用户名 ...

工作中有个需求，就是产品页面通过iframe引用显示产品协议页，要求不要横向滑动，只需要竖向滑动，但在iphone中引用的iframe会撑开父页的宽度，而在android端浏览器这不会。 通过在iframe添加一滑动层，overflow-x: hidden; 会直接将iframe ...

一、静态web页面 在静态web程序中，客户端使用web浏览器经过网络连接到服务器上，使用HTTP协议发起一个请求（Request)，告诉服务区我现在需要得到哪个页面，所有的请求交给web服务器，之后web服务器根据用户的需求，从文件系统（存放了所有静态页面的磁盘）取出内容。之后通过web ...

几个月之前我接到一个新的开发任务，要在一个旧的Web页面上面增添一些新的功能。在开发的过程中发现旧的代码中有很多常见的不合适的写法，结合这些问题，如何写出更好的，更规范的，更可维护的代码，就是这篇文章要阐述的内容。 首先我查看了该Web页面的HTML代码，发现了一些典型的问题： HTML ...