浏览器
文章平均质量分 93
@Demi
甘于平凡 不甘平庸
展开
-
浏览器兼容性问题总结
1、HTML对象获取问题其他浏览器:document.getElementById("idName");IE浏览器:document.idnamedocument.getElementById("idName");解决办法:document.getElementById("idName");2. const定义常量问题其他浏览器:document.getElementById("idName");IE浏览器:document.idnamedoc..原创 2022-02-17 18:06:20 · 2414 阅读 · 1 评论 -
怎么做好网站的SEO优化
-.搜索引擎工作原理在搜索弓|擎网站的后台会有一个非常庞大的数据库,里面存储了海量的关键词,而每个关键词又对应着很多网址,这些网址是被称之为"搜索引擎蜘蛛” 或“网络爬虫”。程序从茫茫的互联网上一点一点下载收集而来的。随着各种各样网站的出现,这些勤劳的”蜘蛛”每天在互联网上爬行,从一个链接到另一个链接,下载其中的内容, 进行分析提炼,找到其中的关键词,如果"蜘蛛” 认为关键词在数据库中没有而对用户是有用的便存入后台的数据库中。反之,如果"蜘蛛”认为是垃圾信息或重复信息,就舍弃不要,继原创 2021-01-04 15:30:30 · 1714 阅读 · 5 评论 -
了解JavaScript的运行核心——事件循环(Event Loop)
前言什么要学底层的事件循环Event Loop,不仅仅是因为这是一道面试的常考题。作为一个程序员,了解程序的运行机制是很重要的,这样可以帮助你去输出更优质的代码。前端是一个范围很广的领域,技术一直在更新迭代,掌握了底层的原理可以应对新的技术。JS初始设计JavaScript从诞生起就是单线程。原因大概是不想让浏览器变得太复杂,因为多线程需要共享资源、且有可能修改彼此的运行结果,对...原创 2020-04-28 16:29:37 · 543 阅读 · 0 评论 -
Chrome Devtool — Performance
前言 Performance 一个在前端开发领域中,无法被忽视的存在。使用Chrome DevTools的performance面板可以记录和分析页面在运行时的所有活动。本文将详细介绍如何使用performance面板解决性能瓶颈。一、Performance 工具优点可视化图形界面 每毫秒做的事情 文件的执行加载的顺序 每毫秒界面展示的效果 每个方法执行的顺序和时...原创 2020-02-25 16:20:49 · 2965 阅读 · 1 评论 -
Chrome Devtools — Sources
一、使用谷歌控制台Sources面板可以:查看文件 编辑 Css 和 JavaScript。 创建和保存 JavaScript 的代码段,您可以在任何页面上运行此代码段。代码段与小书签相似。 调试 JavaScript。 设置工作区,以将您在 DevTools 中作出的更改保存到文件系统的代码中。二、熟悉 Sources 面板三、左侧面板【3.1】page已加...原创 2020-02-20 16:33:30 · 848 阅读 · 0 评论 -
window.print() 前端实现网页打印详解
前言print作为浏览已经比较成熟的技术可以经常被用来打印页面的部分内容,我们可以在MDN上查看到相关的简单介绍。一、print()方法print() 方法用于打印当前窗口的内容。调用 print() 方法会产生一个打印预览弹框,让用户可以设置打印请求。最简单的打印就是直接调用window.print(),当然用 document.execCommand('print') 也可以达到同...原创 2019-12-02 19:39:41 · 64921 阅读 · 26 评论 -
JS获取当前浏览器URL参数(中英文通用)
一、获取浏览器参数方法function getParams(key) { let search = window.location.search.replace(/^\?/, ""); let pairs = search.split("&"); let paramsMap = pairs.map(pair => { let [key, ...原创 2019-09-27 14:12:51 · 1757 阅读 · 0 评论 -
防抖与节流
一、防抖和节流的意义在浏览器中,频繁的操作 DOM 是非常消耗内存和 CPU 时间,在我们项目开发过程中,或多或少会绑定一些持续触发的事件,如 resize,scroll,mousemove 以及移动端 touchmove 等。如果事件的回调函数较为复杂,就会导致响应跟不上触发,轻则导致浏览器卡顿,重则导致浏览器崩溃。在这种需求下,防抖(Debounce) 和 节流(Throttle) 就是比...原创 2019-09-26 10:29:50 · 392 阅读 · 0 评论 -
重绘和重排(回流)
一、浏览器渲染HTML的步骤HTML被HTML解析器解析成DOM Tree, CSS则被CSS解析器解析成CSSOM Tree。 DOM Tree和CSSOM Tree解析完成后,被附加到一起,形成渲染树(Render Tree)。 节点信息计算(重排),这个过程被叫做Layout(Webkit)或者Reflow(Mozilla)。即根据渲染树计算每个节点的几何信息生成布局。 渲染绘...原创 2019-09-20 11:39:47 · 1955 阅读 · 0 评论 -
Chrome DevTools调试技巧
【1】DevTools触发伪类右键单击Elements面板中的元素节点并选择“ force state ”。或者在Sytle子窗格中单击“:hov ”图标。可以触发元素上的伪类来研究元素在悬停时的效果和样式【2】DevTools-在任何网页上运行预定义的代码片段DevTools中有一个叫做代码段的特性,它允许您可以在网页上运行的测试代码(这比在控制台面板中重新键入JavaScrip...原创 2019-08-21 18:21:38 · 1614 阅读 · 0 评论 -
BOM(浏览器对象模型)
BOM 能干啥?浏览器对象模型 (BOM)使我们可以用 JavaScript 操控浏览器,使 JavaScript 有能力与浏览器"对话"。BOM 都有啥?5大对象:其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象(Screen、Location、History、Navigator)。window:管理 浏览器所有的东西 location:管理 ...原创 2019-07-30 15:03:21 · 377 阅读 · 0 评论 -
浅析浏览器缓存
前言 在前端项目体验中,判断一个网站性能最直观的就是网页打开的速度,所以项目开发中在速度方面的性能优化最主要的就是使用缓存,对于一个数据请求来说,可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以帮助我们在第一和第三步骤中优化性能。比如说直接使用缓存而不发起请求,或者发起了请求但后端存储的数据和前端一致,那么就没有必要再将数据回传回来,这样就减少了响应数据。...原创 2019-01-22 14:51:42 · 1087 阅读 · 0 评论 -
localStorage用法小总结
一、什么是localStorage 在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)二、localStorage的优势和局限【1】优势 localStorage拓展了cookie的4K限制 localStorage会可以...原创 2018-12-18 11:07:39 · 17557 阅读 · 1 评论 -
什么是跨域?跨域解决方法
一、为什么会出现跨域问题出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源(即指在同一个域)就是两个页面具有相同的协...原创 2018-12-14 19:22:02 · 435064 阅读 · 54 评论