innerHeight 引起重

2024-08-28

QQ浏览器等window.innerHeight首次读取的高度不正确的解决办法

问题描述移动端的页面,需要处理首屏为一满屏.并且,采用javascript计算高度来设置容器高度的方案. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=

前端性能优化--回流(reflow）和重绘(repaint)

HTML加载时发生了什么在页面加载时,浏览器把获取到的HTML代码解析成1个DOM树,DOM树里包含了所有HTML标签,包括display:none隐藏,还有用JS动态添加的元素等. 浏览器把所有样式(用户定义的CSS和用户代理)解析成样式结构体 DOM Tree 和样式结构体组合后构建render tree, render tree类似于DOM tree,但区别很大,因为render tree能识别样式,render tree中每个NODE都有自己的style,而且render tree不包

【Web动画】CSS3 3D 行星运转 && 浏览器渲染原理

承接上一篇:[CSS3进阶]酷炫的3D旋转透视 . 最近入坑 Web 动画,所以把自己的学习过程记录一下分享给大家. CSS3 3D 行星运转 demo 页面请戳:Demo.(建议使用Chrome打开) 本文完整的代码,以及更多的 CSS3 效果,在我 Github 上可以看到,也希望大家可以点个 star. 嗯,可能有些人打不开 demo 或者页面乱了,贴几张效果图:(图片有点大,耐心等待一会) CSS3 3D 行星运转效果图随机再截屏了一张: 强烈建议你点进 Demo页感受一下 CSS3

【前端优化之渲染优化】大屏android手机动画丢帧的背后

前言上周我与阿里的宇果有一次技术的交流,然后对天猫H5站点做了一些浅层次的分析,后面点时间基本天天都会有联系,中途聊了一些技术细节.聊了双方团队在干什么,最后聊到了前端优化.因为我本身参与了几次携程H5站点的优化,在这方面有一些心得,但是与宇果交流的过程中发现我们在优化的时候忽略了一些细节. 携程做优化的时候整个重心基本放到了尺寸的缩减,和宇果的交流过程中他提出了渲染优化,其实渲染优化无非是减少回流,对于减少回流我们也有一些概念,我一直认为这个事情应该业务开发关注而不是框架关注(事实上框架也无

理解浏览器的重绘与回流（repaint&&reflow）

今天在做练习的时候,遇到了重绘与回流这个词,表示连个毛都没有听过.遂查之,首先将网上的(http://blog.sina.com.cn/s/blog_8dace7290102wezv.html)关于这两个词的领悟粘贴如下: 一. 浏览器渲染过程渲染:就是把浏览器把HTML代码以css定义的规则显示在浏览器窗口的过程浏览器解析HTML的基本过程: 1 用户输入网址,浏览器向服务器发出请求,服务器返回html文件 2 浏览器载入html代码,发现标签内有一个标签引用外部css文件

【web性能】页面呈现、重绘、回流

在讨论页面重绘.回流之前.需要对页面的呈现流程有些了解,页面是怎么把html结合css等显示到浏览器上的,下面的流程图显示了浏览器对页面的呈现的处理流程.可能不同的浏览器略微会有些不同.但基本上都是类似的. 页面呈现流程在讨论页面重绘.回流之前.需要对页面的呈现流程有些了解,页面是怎么把html结合css等显示到浏览器上的,下面的流程图显示了浏览器对页面的呈现的处理流程.可能不同的浏览器略微会有些不同.但基本上都是类似的. 1. 浏览器把获取到的html代码解析成1个Dom树,html中的

css隐藏元素display：none，opacity:0;filter：alpha(opacity=0-100;，visibility：hidden的区别

在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.我们一般有三种方式:display:none, opacity:0;filter:alpha(opacity=0-100;, visibility:hidden.但这三种方式有何区别? 一.三种隐藏方式的区别 1.display:none (1).浏览器不会生成属性为display: none;的元素. (2).display: none;不占据空间,把元素隐藏起来,所以

Win32 GDI 非矩形区域剪裁，双缓冲技术

传统的Win32通过GDI提供图形显示的功能,包括了基本的绘图功能,如画线.方块.椭圆等等,高级功能包括了多边形和Bezier的绘制.这样app就不用关心那些图形学的细节了,有点类似于UNIX上的X-window协议.你信或者不信,那些看上去很花哨的控件,其实就是一笔一划画上去的而已.GDI提供了画笔(用于线条).画刷(用于填充).调色板(用于支持256色显示).字体(用于文字).如果简单的图形不足以表达,你可以使用位图和画布(DC,设备上下文)直接将图像绘制到屏幕上去.此外,GDI还支持一些简

CSS 基础总结

CSS基础 Doctype 声明位于文档中的最前面,处于标签之前.告知浏览器的解析器,用什么文档类型规范来解析这个文档. 在标准模式中,浏览器根据规范呈现页面: 在混杂模式中,页面以一种比较宽松的向后兼容的方式显示. DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现.(影响样式) 最简单的Doctype头 <meta charset="UTF-8"> 代替了 < meta http-equiv="Content-Type" conten

P2P技术如何将实时视频直播带宽降低75%？

本文内容来自学霸君资深架构师袁荣喜的技术分享. 1.前言实时视频直播经过去年的千播大战后已经成为互联网应用的标配技术,但直播平台的成本却一直居高不下,各个平台除了挖主播.挖网红以外,其背后高额的带宽费用也是他们最大的一块成本. 现阶段直播技术在传输方面分为两块: CDN :负责流媒体的分发传输:连麦系统:负责解决同时多个主播间互动的实时通信传输问题. 我们始终认为基于 CDN+ 连麦系统的直播技术是一个高成本高消耗的技术,从各大直播平台纷纷亏损来看就验证了这一点.除了带宽成本,延迟问题也是现在

JS学习笔记：（二）回流和重绘

在搞清楚回流和重绘的概念之前,我们要清除浏览器的渲染过程. 解析生成DOM Tree(此时包含所有节点,包括display:none); 根据CSS Object Module(CCSSOM)计算节点的几何属性(坐标和大小)(margin,pading,height,width等),生成Render Tree(不包含display: none的节点);这一过程叫回流或者布局: 在Render Tree进一步渲染其它属性.如:color等. 重绘:当我们对 DOM 的修改导致了样式的变化.却并未影

前端面试题整理—JavaScript篇（一）

1.JS的基本数据类型和引用数据类型有哪些,两者区别基本数据类型->string.number.Boolean.null.undefined.symbol 引用数据类型->array.object.function 基本数据类型是保存在栈内存中,操作的是值,改变源数据不会影响新的变量引用数据类型保存在堆内存中,操作的是地址,改变其中一个会影响另一个 2.数据类型中为假的有哪些? false (布尔型) 0(数值型) null(定义空的或者不存在,现在没有,将来可能有) undefined(

记录近期面试题，面试总结 (从css - vue 全面面试题)

记录近期换工作时遇到的面试题和面试题答案 css 部分盒模型问题:说一下 css 的盒模型盒模型分为标准模型和怪异盒模型(IE 盒模型) 标准盒模型:盒模型的宽高只是内容(content)的宽高怪异盒模型:盒模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高问题:css 如何设置两种模型 /* 标准模型 */ box-sizing:content-box; /*IE模型*/ box-sizing:border-box; 问题:有没有遇到过边距重叠,

web前端知识大纲：系列三 html篇

web前端庞大而复杂的知识体系的组成:html.css和 javascript 三.HTML 1.BOM BOM 是 Browser Object Model的缩写,即浏览器对象模型,当一个浏览器页面初始化时,会在内存创建一个全局的对象,用以描述当前窗口的属性和状态,这个全局对象被称为浏览器对象模型,即BOM.BOM的核心对象就是window,window对象也是BOM的顶级对象,其中包含了浏览器的 6个核心模块: document -即文档对象,渲染引擎在解析HTML代码时,会为每一个元素生成

（转）web前端知识精简

Web前端技术由 html.css 和 javascript 三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言.而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知识点,因此对于初学者很难理清楚整个体系的脉络结构.本文将对Web前端知识体系进行简单的梳理,对应的每个知识点点到为止,不作详细介绍.目的是帮助大家审查自己的知识结构是否完善,如有遗漏或不正确的地方,希望共勉. JAVASCRIPT 篇 0.基础语法 Javascript 基础语法包括:变量声

Web前端性能优化进阶——完结篇

前言在之前的文章如何优化网站性能,提高页面加载速度中,我们简单介绍了网站性能优化的重要性以及几种网站性能优化的方法(没有看过的可以狂戳链接移步过去看一下),那么今天我们深入讨论如何进一步优化网站性能. 一.拆分初始化负载拆分初始化负载——听名字觉得高大上,其实不然,土一点将讲就是将页面加载时需要的一堆JavaScript文件,分成两部分:渲染页面所必需的(页面出来,没他不行)和剩下的.页面初始化时,只加载必须的,其余的等会加载. 其实在现实生产环境中,对于大部分网站:页面加载完毕(w

重绘（Repaint）和回流（Reflow）

重绘(Repaint)和回流(Reflow) 1.回流和重绘只是渲染步骤的一小节,是怎么做到影响性能的? css 会影响 javascrip 执行时间导致 javascript 脚本变慢浏览器渲染一个网页的时候会启用两条线程: 一条渲染javascript 脚本,另一条渲染 ui 即css 样式的渲染. 但这两条线程是互斥的.当javascript 线程运行的时候 ui 线程则会中止暂停,反之亦然. 那这是为什么呢? 原因是,当ui 线程运行对页面进行渲染的时候 js 脚本难免会涉及到页面视图

CSS动画原理及硬件加速

一.图层图层即层叠上下文,具体概念和应用大家可以看我之前转自张鑫旭大神博客的<CSS层叠上下文和层叠顺序>,这里我们简单复习一下产生层叠上下文的原因. 1.根层叠上下文指的是页面根元素,也就是滚动条的默认的始作俑者<html>元素.这就是为什么,绝对定位元素在left/top等值定位的时候,如果没有其他定位元素限制,会相对浏览器窗口定位的原因. 2.定位元素与传统层叠上下文对于包含有position:relative/position:absolute的定位元素,以及Fire

Web前端知识体系

看到一篇不错的文章,拿来收藏和分享. 原文:http://mp.weixin.qq.com/s/UFTfdE7LYhHquWEzwZKLCQ Web前端技术由html.css和 javascript三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言.而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知识点,因此对于初学者很难理清楚整个体系的脉络结构.本文将对Web前端知识体系进行简单的梳理,对应的每个知识点点到为止,不作详细介绍.目的是帮助大家审查自己的

HTML页面的重绘（repaint）和重流（reflow）

重流(Reflow)是指布局引擎为frame计算图形的过程. frame是一个矩形,拥有宽高和相对父容器的偏移.frame用来显示盒模型(content model), 但一个content model可能会显示为多个frame,比如换行的文本每行都会显示为一个frame. 重绘(Repaint)发生在元素的可见性发生变化时,比如背景色.前景色等. 因此回流必然会引起重绘. 重流的原因: 初始化(Initial).DOM载入后的第一次回流,将会遍历所有frame. 渐进(Incremental)

撩课-Web大前端每天5道面试题-Day16

1.for循环中的作用域问题? 写出以下代码输出值,尝试用es5和es6的方式进行改进输出循环中的i值. ; i<=; i++) { setTimeout(function timer() { console.log(i); }, i*); } 输出5个6,因为回调函数在for循环之后执行,所有函数共享一个i的引用. es5: ; i<=; i++) { (function(j) { setTimeout(function timer() { console.log(j); }, j*); }

innerHeight 引起重

热门专题