本地部署测试的时候,用火狐浏览器需要把 前端的 config.js 中的服务地址改成 http://localhost:8081
在日常浏览网页时,我们有时会遇到一些不太满意的网站界面交互设计。然而,作为普通用户,我们并没有网站的源码,如何在这种情况下进行界面改造呢?今天,我将向大家介绍两种强大的工具——油猴脚本和浏览器插件,通过它们,我们可以轻松地改造现有网站的界面和交互体验。
提起Chrome扩展插件(Chrome Extension),每个人的浏览器中或多或少都安装了几个插件,像一键翻译、广告屏蔽、录屏等等,通过使用这些插件,可以有效的提高我们的工作效率;但有时候,我们想要的某个功能市面上没有现成的插件,作为开发者自然而然想到,自己是否可以动手开发一个定制化的插件?网上目前很多不错的关于Chrome插件的开发教程,可以帮助我们快速上手开发一个插件, 本文换个思路,从应用着手,通过讲解插件的特性来启发读者在工作中哪些场景可以通过插件来解决。
Inside look at modern web browser 是介绍浏览器实现原理的系列文章,共 4 篇,本次精读介绍第三篇。
浏览器的内核是指支持浏览器运行的最核心的程序,分为两个部分的,一是渲染引擎,另一个是JS引擎。渲染引擎在不同的浏览器中也不是都相同的。目前市面上常见的浏览器内核可以分为这四种:Trident(IE)、Gecko(火狐)、Blink(Chrome、Opera)、Webkit(Safari)。这里面大家最耳熟能详的可能就是 Webkit 内核了,Webkit 内核是当下浏览器世界真正的霸主。本文我们就以 Webkit 为例,对现代浏览器的渲染过程进行一个深度的剖析。
还记得当初入门前端开发的时候写过的 Hello World 么?一开始我们先创建了一个 HTML 文件,在 <body> 标签里写上网页内容;后来需要学习页面交互逻辑时,在 HTML markup 里增加一个 <script src="script.js"> 标签引入外部 script.js 代码,script.js 负责页面交互逻辑。
在搜索引擎中搜索关键字 .htaccess 缓存,你可以搜索到很多关于设置网站文件缓存的教程,通过设置可以将css、js等不太经常更新的文件缓存在浏览器端,这样访客每次访问你的网站的时候,浏览器就可以从缓存中获取css、js等静态文件,而不必从你的服务器再次下载读取,这样在一定程度上加快了网站的打开速度,又可以节约一下你的服务器流量。
0x00 起因 不久前@三好学生师傅买了一个wooyun wifi,然后聊到了缓存投毒: 然后看到wooyun wifi的这个说明: 默认情况下该功能附带缓存投毒功能,将视图缓存所有的页面至2099年
1.渲染引擎: 用来解析HTML与CSS,俗称内核,比如chrome浏览器的blink,老 版本的webkit
在聊我们今天主角V8之前,我感觉有必要简单的把浏览器的发展史描述一下。「以史为镜,可以知兴替」
面试官经常会问你:“平时工作中,你怎么优化自己应用的性能?” 你回答如下:“我平时遵循以下几条原则来优化我的项目、以提高性能,主要有:”
大多数设备的刷新频率是60Hz,也就说是浏览器对每一帧画面的渲染工作要在16ms内完成,超出这个时间,页面的渲染就会出现卡顿现象,影响用户体验。前端的用户体验给了前端直观的印象,因此对B/S架构的开发人员来说,熟悉浏览器的内部执行原理显得尤为重要。
Browserify 是什么 Browserify 是一个浏览器端代码模块化的工具 为什么要使用 Browserify 浏览器端的代码模块化有2个明显的好处: 1)前端JS可以使用npm包 我们知道 npm 中有非常丰富的功能包,但没法在浏览器中直接用,因为他们是按照 nodejs 模块化标准写的,使用 require 和 module.exports 引用和构造模块,浏览器不支持此类语法,所以需要浏览器端模块化工具的支持,这样就相当于给浏览器端增加了 npm 库 2)模块化开发 现在前端J
用来解析HTML与css,俗称内核,比如Chrome浏览器的blink,老版本webkit
布兰登·艾奇(Brendan Eich,1961 年~),10 天完成 JavaScript 设计。
这里说明一下,webpack4和webpack5的配置信息或者显示信息可能有点区别
在查看网页源码的时候经常会发现带有类似 ?v=13566 或者 ?version=15678 的 CSS 和 JS 文件。如下所示: <script src="w3h5.js?version=1568
babel 是 JavaScript 的编译器,可以将最新 ES 语法的代码轻松转换成任意版本的 JavaScript 代码,其实现原理是先使用 Babylon 解释器将 JavaScript 语法解析成 AST,然后通过遍历处理这颗树实现代码转换。在 babel 中可以通过配置 browserslist 来针对不同的浏览器组合,生成不同的适配代码。
继前面几篇文章后再来说说老生常谈的话题,怎么样提升前端性能。文中很多取材自网络及《High Performance Web Sites》,并根据自己工作中所接触到的知识整理而成。
BeEF,全称The Browser Exploitation Framework,是一款针对浏览器的渗透测试工具。
在后端为了加速服务的访问速度,通常可以使用 Memcached、Redis 做数据缓存,那么在浏览器端又有哪些缓存策略呢?
一、什么是防盗链 网站资源都有域的概念,浏览器加载一个站点时,首先加载这个站点的首页,一般是index.html或者index.php等。页面加载,如果仅仅 是加载一个index.html页面,那么该页面里面只有文本,最终浏览器只能呈现一个文本页面。丰富的多媒体信息无法在站点上面展现。 那么我们看到的各类元素丰富的网页是如何在浏览器端生成并呈现的?其实,index.html在被解析时,浏览器会识别页面源码中的 img,script等标签,标签内部一般会有src属性,src属性一般是一个绝对的URL地址或者相
我们常说的指纹,都是指人们手指上的指纹,因具有唯一性,所以可以被用来标识一个人的唯一身份。而浏览器指纹是指仅通过浏览器的各种信息,如CPU核心数、显卡信息、系统字体、屏幕分辨率、浏览器插件等组合成的一个字符串,就能近乎绝对定位一个用户,就算使用浏览器的隐私窗口模式,也无法避免。
这两个问题可以从很多方面进行优化,今天我就从前端页面部署阶段来优化一下这两个问题。PS:以下内容都基于vue-cli3+。
app 中自然就是源代码,app/index.js是最外层的js文件。因为涉及到是热更新,所以当然是在我们的 webpack.dev.js 文件下操作。
浏览器在加载和显示网页时,会根据不同的情况,决定是否重新从服务器获取网页内容或使用缓存中的内容。缓存是指浏览器在本地存储的一些网页资源,如图片、CSS、JS等,以便于下次访问时快速加载,提高用户体验和网站性能。
接上文,上文我们讲了网络通信的部分,详细请看「一道面试题」输入URL到渲染全面梳理上-网络通信篇, 那么该说说页面渲染的流程了,也就是当输入一个URL拿到了页面后,浏览器怎么解析,怎么呈现
我们都知道,JS是单线程的,也就是只有前一个任务执行完成,才会执行下一个任务。如果前一个任务耗时很长,那么下一个任务就只能干等着。显然,这样是非常浪费资源的。那么就要解决这个问题啦,先来了解一下「Event Loop」事件循环。
前段时间,我将精力专注在Web性能领域;在这个领域下有个重要的课题是如何让网页更丝滑(流畅)。
说明: 这是本系列的第一篇文章,我会尽快发后续的文章。 源起 1.加快葬送IE6浏览器的进程 世界上使用IE6浏览器最多的地方在中国 中国使用IE6浏览器最多的地方在企业中 让他们自己去装个chorme太难了 索性开发个浏览器(其实是浏览器的外壳)给他们 用"代码改变世界"是博客园园友的口号 2.一劳永逸的解决浏览器兼容问题 各种浏览器的CSS hack问题再也不用担心了 甚至公司里前端的职位也可以减少几个了 3.更方便的使用更强大的HT
浏览器在加载资源时,为了提高效率,会使用一定的缓存策略,比如强缓存,与协商缓存,那么如何保证在资源发布以后浏览器能拿到最新的资源而不是缓存呢?
上篇教程学院君给大家简单介绍了 Vue.js 框架,并演示了 Vue.js 的第一个功能特性 —— 数据绑定。想必大家已经能够感受到,Vue.js 相较于传统的 DOM 编程或者 jQuery 框架可以更快捷地实现视图和模型的数据同步,这还是只是冰山一角,接下来,学院君会给大家介绍 Vue.js 的更多功能特性,并最终将这些功能特性组合起来,构建复杂酷炫的 Vue 组件以及单页面应用。
今天在分析网站优化的东西,看到控制台的一些 Warnings 警告,整理记录一下:
创建DOM树——创建StyleRules——创建Render树——布局Layout——绘制Painting
首先需要在服务器上建立一个文件,里面的内容确定了哪些文件需要缓存,哪些文件不需要,如果资源无法访问会使用什么页面等
近日,红芯浏览器“套壳”一事被网络舆论炒的沸沸扬扬。红芯浏览器被官方标榜为“安全、稳定、可控的企业浏览器”,其中“自主可控”一项已经被舆论所质疑,但是被官方放在第一项进行宣传的“安全”是否属实呢?
ECMAScript是JavaScript的核心,但如果要在web中使用JavaScript,那么BOM则是真正的核心,BOM提供了很多对象,用于访问浏览器的功能,这些功能与任何网页内容无关。
浏览器是一个运行在操作系统上的应用程序,每个应用程序必须至少启动一个进程来执行其功能,每个程序往往又会执行很多任务,那么进程就会创建很多线程来执行这些小的任务。
介绍 webpack 是一个 JavaScript 应用程序模块打包器(module bundler)。webpack 通过快速建立应用程序依赖图表并以正确的顺序打包它们来简化你的工作流。你能够针对你的代码来对 webpack 进行自定义的优化配置,比如为生产环境拆分 vendor/css/js 代码,无刷新热重载(hot-reload)等. Webpack可以做什么 处理module依赖关系 打包js,css和png等 降低页面初始加载时间 方便组合第三方组件库 可以转换不同语法成标准语法 安装 这里使用
本文主要是在我读《高性能Javascript》之后,想要记录下一些有用的优化方案,并且就我本身的一些经验,来大家一起分享下,
前几天听一个朋友说到 snowpack, 便去去看了下这个包是干什么的,看了下官网,发现这个东西还是蛮有意思的。号称 无需打包工具(Webpack,Parcel)便能将代码结果实时展现在浏览器中。可以先看以下的图,是不是很诱人?
让网页展现的更快,官方说法叫做首屏绘制,First Paint 或者简称 FP,直白的说法叫做白屏时间,就是从输入 URL 到真的看到内容(不必可交互,那个叫 TTI, Time to Interactive)之间经历的时间。当然这个时间越短越好。
浏览器缓存(Browser Caching)是为了节约网络的资源加速浏览,浏览器在用户磁盘上对最近请求过的文档进行存储,当访问者再次请求这个页面时,浏览器就可以从本地磁盘显示文档,这样就可以加速页面的阅览
半个月前看了EtherDream写的那篇wifi流量劫持和JS投毒,随手就在公司实验室里折腾了一下,头一次接触这个领域,感觉挺新鲜的。然后又看到sh4dow@lcx.cc写了一篇《内网DNS投毒技术劫持会话》,我决定把我做的东西也分享一下。 0×01 攻击思路 1、用树莓派建立一个AP,诱使别人过来连接 2、在树莓派里,设定DNS,指向一台代理主机(其实就是中间人) 3、在代理主机上运行closurether,进行JS投毒 4、投毒可以有很多种,closurether的原作者是设计了一个可以截获用户的
1.通过了解浏览器线程的一些知识我们知道浏览器进程中GUI线程是与JS引擎线程互斥的。 2.小程序的架构是JsCore执行js逻辑代码+webview页面渲染双线程,两个线程并不互斥。
renderer与DOM元素是相对应的,但并不是一一对应,有些DOM元素没有对应的renderer,而有些DOM元素却对应了好几个renderer,对应多个renderer的情况是普遍存在的,就是为了解决一个renderer描述不清楚如何显示出来的问题,譬如有下拉列表的select元素,我们就需要三个renderer:一个用于显示区域,一个用于下拉列表框,还有一个用于按钮。
在爬虫调试的时候一个良好的调试习惯,正确的调试技巧。绝对能让您在抓包,定位及JS解密与JS逆向等各种方面事半功倍。
领取专属 10元无门槛券
手把手带您无忧上云