文章分类 - 前端
1
摘要：Lighthouse 可以自动检查Web页面的性能。 你可以以多种方式使用它。 浏览器插件 作为浏览器插件，访问chrome网上商店 搜索Lighthouse 插件安装。以两种方式使用。 方式一 安装成功后，访问想要检查的页面，开发插件，点击Generate report，稍等片刻，你将会得到一份页
阅读全文
摘要：HTML 与 CSS 《Head First HTML与CSS(第2版)》--豆瓣评分 9.3。入门真的是经典书籍，手把手教学，丰富的案例让你从 0 开始学前端。 《CSS权威指南(第三版)》--豆瓣评分 8.5。这本书也是非常的经典了，2007 年的书了，但是无不影响这本书作为 CSS 的经典著作
阅读全文
摘要：例子一 比如一张图片当鼠标放到上面时，图片改变。想找到这个事件对应的js代码，假设另存为html之后，文件夹中有.js文件。 如果你会调试，可以用打开浏览器的调试功能，以chrome为例，按F12打开调试窗口，切换到Sources选项卡，最右边的Event Listener Breakpoints里
阅读全文
摘要：比如我要查看银行账号这个标签所绑定的事件。 操作过程中使用的是谷歌浏览器 第一步：在该元素上右键→检查 第二步：点击Event Listeners 这样就能看到该元素绑定的所有事件了 第三步：展开click，我们可以看到该元素所绑定点击事件的方法就在 jquery-ui-1.8.16.custom.
阅读全文
摘要：补充于2018-08-19周末在家基于SVGO做了个SVG在线压缩合并工具，您可以狠狠地点击这里：SVG在线压缩合并工具 或 https://www.svgviewer.dev/ 支持选择SVG文件上传，支持拖拽上传，也支持直接粘贴SVG代码进行压缩。 例如从iconfont.cn网站随便下一个SV
阅读全文
摘要：性能优化是把双刃剑，有好的一面也有坏的一面。好的一面就是能提升网站性能，坏的一面就是配置麻烦，或者要遵守的规则太多。并且某些性能优化规则并不适用所有场景，需要谨慎使用，请读者带着批判性的眼光来阅读本文。 本文相关的优化建议的引用资料出处均会在建议后面给出，或者放在文末（有些参考资料可能要梯子才能观看
阅读全文
摘要：<head lang="en"> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="css/*.css"> <script src="js/*.js></script> </head> DOM文档的加载顺序是由上而
阅读全文
摘要：解析: 运行代码加载: 下载代码 JS脚本 ( 因为js修改DOM, 所以需要先js解析 )script标签: 阻塞html文档的解析, 直到脚本执行完外引js: 先网络请求,加载js, 再阻塞html文档的解析, 直到脚本执行完 CSS ( js有可能依赖样式,如var a=$('#id').wi
阅读全文
摘要：HTML页面加载顺序，这个过程发生了什么浏览器网络拉取资源是多线程的。但是dom树的操作都是在一个线程中的。所以网页资源的解析和js加载执行，以及dom树渲染都是一个线程执行。一个线程的任务就会相互抢占，先来先执行。 css、图片和其它外部资源都是与html\js并行下载，浏览器尝试将所有外部资源下
阅读全文
摘要：1、在Chrome地址栏输入：chrome://flags/ 2、搜索Hardware-accelerated video 3、有两个结果，Hardware-accelerated video decode 和 Hardware-accelerated video encode，全部disabled
阅读全文
摘要：1、在edge或chrome浏览器下地址栏输入 edge://flags/ 或 chrome://flags 2、打开页面后，在页面搜索栏键入”gpu“ 3、在”Choose ANGLE graphics backend“中，将”default“改为”D3D9“ 4、按提示重启浏览器即可 转：htt
阅读全文
摘要：Chrome播放视频, 如果开启了硬件加速, 视频经常性卡顿在设置中关掉硬件加速可以避免这个问题, 但是其他某些页面如游戏等复杂图像显示缓慢, 而且CPU非常高 可以开启硬件加速, 然后修改设置只禁用视频的解码进入地址: chrome://flags找到这个:Hardware-accelerated
阅读全文
摘要：1 什么是硬件加速硬件加速是指，应用程序使用计算机硬件的能力，比软件实现的功能能够更有效地执行某些操作。在 Chrome/Chromium 浏览器中，硬件加速能够利用计算机的图形处理单元（GPU）来处理图形密集型任务，例如：播放视频、浏览地图、网页渲染、游戏或需要更快数学运算的任何内容。通过分离特定
阅读全文
摘要：一、概述 项目开发中遇到因启用硬件加速导致的闪屏问题，特此整理相关基础知识，已备后续查阅。 二、基本概念概念1：什么是GPU GPU是显卡上的一块芯片，英文全称Graphics Processing Unit，翻译为图形处理单元。GPU是相对于CPU的一个概念，现代计算机中图形处理的重要性日益提高，
阅读全文
摘要：当我们需要高频交互的CSS动画时候，我们需要考虑使用css3硬件加速。 css3硬件加速又叫做GPU加速，是利用GPU进行渲染，减少CPU操作的一种优化方案。 浏览器首先将页面解析成DOM树，DOM树和CSS让浏览器构建渲染树，渲染树包括渲染对象。每个渲染对象会被分配到一个图层中，每个图层会被更新到
阅读全文
摘要：上个星期去baidu二面面试，第一题就有问到这样问题： transform与position:absolute 有什么区别? 回家后查资料发现这道题目其实不简单啊，涉及到重排、重绘、硬件加速等网页优化的知识。 ⼀、问题背景 过去⼏年，我们常常会听说硬件加速给移动端带来了巨⼤的体验提升，但是即使对于很
阅读全文
摘要：面试中可能会经常会碰到怎么解决动画卡顿的问题，然后会引导到硬件加速。那么究竟什么是硬件加速，为什么它可以提高咱们的动画效率？我们今天就来一探究竟。 首先，我们先从 CPU 和 GPU 开始了解。 CPU 和 GPU 的区别 CPU 即中央处理器，GPU 即图形处理器。 CPU是计算机的大脑，它提供了
阅读全文
摘要：1.获取屏幕宽高 实现兼容 // 获取屏幕宽度let windowWidth = document.documentElement.clientWidth || document.body.clientWidth; // 获取屏幕高度let windowHeight = document.docum
阅读全文
摘要：图解CSS padding、margin、border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中，设计师可以通过创建定义来控制这个盒的属性，这些对像包括段落、列表、标题、图片以及层。盒模型主要定义四个区域：内容(content)、内边距(padding)、边框(border)和外边
阅读全文
摘要：于是就从网上撸了撸长常见的padding的用法，算是增长自己的见识吧！ 我们都知道： padding 简写属性在一个声明中设置所有内边距属性。 说明这个简写属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算；因此，如果一个元素既有内边距又有背景，从
阅读全文
1
