一、在介绍DomReady之前,先了解下相关的知识 1、HTML是一种标记语言,告诉我们这页面里面有什么内容,但是行为交互则要通过DOM操作来实现,但是注意:不要把尖括号里面的内容看作是DOM! 2、HTML是要通过浏览器解析之后才会转换成为DOM节点 一般地,但我们向浏览器中输入一个地址,开始加载页面到我们看到页面的内容为止,这期间就有一个DOM节点构建的过程(浏览器将HTML标签转换为DOM节点)。 当前页面上的所有的HTML标签都转换成DOM节点,这就叫DOM树建完,简称为DOMReady. 3、浏
window.onload 事件会在页面或图像加载完成后触发(即所有元素的资源都下载完毕)
前端的基本工作就是写页面,那么你写那么多页面,知道自己的页面健康吗,性能好吗?如果你不单单是完成业务需求,还会关注自己的页面是否健康,那么你是一个有追求的前端开发者。本篇文章将会讲述如何去知道你的页面是否健康。
很多做web的都知道,在很多web系统中会涉及到一些统计图,例如饼状图,柱状图、趋势图、以及叠加图等。提到这儿,做web的都很熟悉的,jquery的highcharts就能搞定所有的涉及到统计图的功能,highcharts我自己也在经常用,但是呢,用过arcgis for javascript的同志们深深地知道,arcgis的那一套选择的是dojo,并不能很好的与jquery结合使用,所以,还得回归到dojo上面去。dojo的统计图功能,也很强大的,前两篇博文对dojo的统计图做了一定的说明,就算入个门,在本节,重点讲述在地图中常见的统计图的实现方式。
目前业界常用的指标就是:白屏、首屏、domready和pageloaded四个指标,在usual-index.html中, 我们通过performance API获取到响应的指标值。
Here is our HTML
oCanvas 是一个全局对象,包含了所有的模块,以及核心的构造器和一些其它的方法。
1. 业界案例 目前前端性能监控系统大致为分两类:以GA为代表的代码监控和以webpagetest为代表的工具监控。 代码监控依托于js代码并部署到需监控的页面,手动计算时间差或者使用浏览器的的API进行数据统计。 影响代码监控数据的因素有以下几种: 浏览器渲染机制; 浏览器对API的实现程度,比如performance API; 工具监控不用将统计代码部署到页面中,一般依托于虚拟机。以webpageTest为例,输入需统计的url并且选择运行次url的浏览器版本,webpageTest后台虚拟机对url进
总所周知,写文章需要一个标题。虽然我们搞代码的人一般都喜欢单刀直入,但是受制于文体的约束和发表载体的要求,有时不得不想一个标题。而起一个标题,不亚于起一个函数名或者变量名。单就这篇文章,我就有好几个草稿标题,例如:《页面加载指标演进之路》,《Element Timing:一种全新的页面速度指标》,《如何最准确地测量网页加载速度》,《新前端下的页面加载速度》,甚至《Element Timing In Action》,《三分钟学会测量页面速度》。最后综合考虑了读者的承受能力,编辑的意见,以及最最重要的:本人的孱弱写作实力,就取了个这样的一个非常大众化,既不会一眼就被当成垃圾,也不会被人挑出来仔细找茬的标题。
在前端开发的过程中,很多时候除了日常的需求开发以外,我们还需要对我们的页面进行性能优化,那么这次就分享一下前端开发我能想到的一些优化方案进行总结。
开篇扯淡 距离上一篇文章已经有好几个月,也不是没有时间记录点东西,主要是换了新的工作,在一家外资工作,目前的工作内容大多都是前端开发,新接触的东西因为时间原因,大多还不成体系,所以这么长时间什么都没记录下来,也正是因为新的工作内容,才有了今天这篇文章。 这篇文章是我自己的博客项目的前端重写,因为目前ASP.NET API和单页应用的流行,结合目前工作中用到的东西,我决定把我的博客项目的前端部分整个重写,(以前的就是一坨…) 步入正题 背景知识 RequireJS http://www.requirejs.o
作为前端开发,肯定对 Chrome 的 dev tools 不陌生,除了日常 Debug,还提供了一个非常强大的功能:performance 用做性能分析。
使用cordova可以实现扫描二维码或者条形码的功能,但是环境配置比较复杂,需要额外安装插件。
API 概览 && 编码Tips 文档地址 github Chrome DevTools Protocol 协议本身的仓库 有问题可以在这里提issue github debugger-protoc
API 概览 && 编码Tips 文档地址 github Chrome DevTools Protocol 协议本身的仓库 有问题可以在这里提issue github debugger-protocol-viewer 协议API文档的仓库 API 文档地址 API展示的地方,这个经常用 常用API Network 网络请求、Cookie、缓存、证书等相关内容 Page 页面的加载、资源内容、弹层、截图、打印等相关内容 DOM 文档DOM的获取、修改、删除、查询等相关内容 Runtime JavaScr
写在前面 最早接触javascript的时候,javascript代码直接扔在script标签里面就完事了。 反正代码不多,交互简单,逻辑不难,和HTML混在一起也未尝不可。 后来交互越来越复杂,代码越多越多了,我们就开始把JS代码独立到了单独的JS文件中。 公共的库引用在前,自己的逻辑代码引用在后,全局变量定义在HTML内部,在独立JS文件中直接使用变量就好。 我们会经常看到下面这种代码: 123456 <script src="1.js"></script> <script src="2.js"></
这个系列的随笔都是关于Javascript框架设计一书的读书笔记(作者是司徒正美),不是本人原创!!! 一、简介: 1、市面上主流的JS框架,大多数是由一个个模块组合而成,模块化是大多数让软件所遵循的一种设计模式,就是定义清晰的接口把若干模块组合起来 2、模块也分很多种类,他们也有不同的功能,有些模块必须在文件一家在就需要执行,有些模块则在需要时才执行,有些模块则可有可无,毫无存在感. 3、种子模块就是其中的"急先锋",它里面的方法不一定要各个神通广大,设计优良,但一定极具扩展性、稳定性、常用性 (1)扩展
我记得我已经遇到过,不过今天又遇到了,而且浪费了大量的时候在上面,甚至怀疑自己写的脚本有问题,花了几乎一个下午来调试这个问题。最后发现是样式导致的…
一、require模块 +function() { var path = location.protocol + "//" + location.host +"/Javasript框架设计/common/"; require.config({ alias: { "jquery": { src: path + "mass/demo/jquery-1.9.1.min.js",
domReady是名为DOMContentLoaded事件的别称,当初始的HTML文档被完全加载和解析完成之后,DOMContentLoaded事件被触发,而无需等待样式表、图像和子框架的完全加载。
在web操作,如绘制或者测量的时候,为了精确,需要捕捉到某一图层的对象,在此,讲解下如何在Arcgis for JS中实现捕捉对象。 首先,在地图中添加一个graphiclayer:
此番改善之后,匿名function里面的变量作用域不再是window,而是局限在函数内。
有 async 没有 defer 时,会与渲染后续文档元素并行加载(加载过程不会阻塞 dom 解析),加载完自动执行(执行会阻塞 dom 解析)
Dojo提供了非常好的仪表盘显示,效果如下: <!DOCTYPE html> <html> <head> <title>Dojo仪表盘</title> <meta charset="u
这是一个困扰我一周的问题了,不过现在终于在@Mr.L的协助下解决了,下面先描述下问题吧。大家在浏览QQ空间的时候,通过浏览器,或者按住ctrl+鼠标滚轮进行页面缩放,页面上会有个很友好的提示,如:
requireJS(http://www.requirejs.cn/)是一个JavaScript模块加载器。它非常适合在浏览器中使用,使用RequireJS加载模块化脚本将提高代码的加载速度和质量。
以下内容都在主题的functions.php文件写入 1.移除WordPress版本信息 remove_action( 'wp_head', 'wp_generator' ); 2.移除离线编辑器开放接口 remove_action( 'wp_head', 'rsd_link' ); remove_action( 'wp_head', 'wlwmanifest_link' ); 3.移除WordPress头部加载DNS预获取 <link rel='dns-prefetch' href='//s.w.org'
ArcGIS API for JavaScript 提供在线版API,4.x 是 ArcGIS API for JavaScript 的新一代版本,实现了2D和3D应用的完全集成,3.x是一个2D版本,编程思路差异还是比较大的。开发调试过程中,最好进行本地化部署。ArcGIS JavaScript API可以从Esri官网获取,需要先注册一个Esri全球账户。SDK本地化部署指在本地Web Server上的部署,在API文件夹arcgis_js_api\library\3.18\install_win.html中有官方的部署文档,基本过程如下:
I was working on the page reconstruction recently, and here is how I divide a page into widgets and how do they interacts in this new attempt.
这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战。 我采用的是一个非常流行的库require.js。 一、为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了。后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载。下面的网页代码,相信很多人都见过。 <script src="1.js"></script> <script src="2.js"></scrip
最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了。后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载。下面的网页代码,相信很多人都见过。
py文件不是html文件,当然不能在浏览器里打开。py文件可以用任何编辑器打开,py文件是和txt一样都是普通的文本文件,只是python解释器可以解释运行。
performance 是 浏览器提供的一个js对象,里面存储了各种性能指标。
今天在看天地图的时候,有一个多时相的地图显示功能,感觉很好玩,作为技术控的我晚上十点下班到家便是快十一点了,本来应该是睡觉了,但是,激动地心情不能平静,哎,算了,本着不熬夜的程序员不是好程序员的原则,熬了会夜终于看到了想要的效果,便迫不及待的拿出来与大家分享,首先看看天地图的效果与我的效果:
概述:本节讲述Arcgis for Js加载ArcgisServer和GeoServer发布的wms服务。
这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战。 我采用的是一个非常流行的库require.js。 一、为什么要用require.js? 最早的
概述:本节讲述的内容为当浏览器大小发生变化或者地图展示区域的大小发生变化时,地图的自适应调整。地图的自适应常见于以下几种情况:1、系统中有收缩或者全屏的按钮;2、按F12,进入调试状态。
我们在浏览网站的时候,不可避免的需要消耗自身计算机资源,比如带宽、cpu、存储等等,这些资源会随着访问时间的延长而产生一定的数据碎片,在我们没有关闭浏览器的时候,这些碎片会一直存在的,那么作为开发者我们开发的网站是否优质,是否对用户计算机负担小,打开是否未低时延这些就是我们用来衡量网站是否卓越的指标了。
前端开发工程师有有必要重视的几个功用方针 关于页面相应时间,有一条闻名的“2-5-8准则”。当用户访问一个页面: 在2秒内得到照应时,会感觉系统照应很快; 在2-5秒之间得到照应时,会感觉系统的照应速度还可以; 在5-8秒以内得到照应时,会感觉系统的照应速度很慢,但可以承受; 而逾越8秒后依然无法得到照应时,用户会感觉系统糟透了,进而选择脱离这个站点,或许主张第2次央求。 关于一个网站如果期望抓住用户,网站的速度以及稳定性是首战之地的。 从各式各样的前端监控平台中,你都可以获得页面许多的功用方针。本文将介绍
Discuz !Q作为一个对外开源的私域流量建站工具,在加载性能优化上会受到很多限制。因为Discuz !Q部署形态是存在于用户自己的服务器中,网络情况,服务器性能等,都有很多未知因素,经过团队共同努力出谋划策,最终成效不错,借此机会记录一下极端情况下的加载性能优化思路。
Dojo提供了一套很完善的统计图(Chart)接口,在dojox/charting下面,可以支持很多种类型的。
图层控制是很多GIS系统里面必须的一个小功能,本文就说说arcgis for javascript下ArcGISDynamicMapServiceLayer图层控制的实现方式。首先看图:
在控制台中输入window.performance.timing(html5的属性);
Navigation Timing 是一个可以在web中精确测量性能的javascript API。这个API提供了一个简单的方法来获得页面导航、加载事件的精确而又详细的时间状态。目前在 IE9、Chrome、Firefox nightly builds 中可用
本文介绍了手机QQ会员H5加速方案——sonic技术,包括其实现细节和实验数据。通过对比不同的方案,可以发现该方案在大部分场景下已经能够达到非常好的体验效果。
当今互联网+高速崛起,大前端这个概念已经成为前端技术老生常谈的话题,但去做好“大前端”,并不容易。
俗话说:爱美之心,人皆有之。是的,没错,即使我只是一个做地图的,我也希望自己的地图看起来好看一点。在本文,给大家讲讲在Arcgis for javascript下如何自定义鼠标样式。
核心篇分了几篇来描述,本文先从整体系统层面来概括小程序运行环境时的架构,明白它的整体大致流程,后面会接着更新细节内容
使用浏览器的DevTools来评估web应用性能是很有用的,但要复现现实世界的使用情况并不容易。因为人们在不同地点使用不同的设备、浏览器和网络,都会有不同的体验。
天地图的切片地图可以通过esri.layers.TiledMapServiceLayer来加载,在此将之进行了一定的封装,如下:
领取专属 10元无门槛券
手把手带您无忧上云