大前端
文章平均质量分 79
u013063153
这个作者很懒,什么都没留下…
展开
-
我们常常在说的XSS漏洞到底是怎么回事?
原文出处:http://bbs.ichunqiu.com/thread-10436-1-1.html前言大家好,我是小宅,从今天开始我们终于可以开始学习XSS这个非常fun的漏洞了。为什么呢?原因很简单,因为这种漏洞大家都能够挖掘(Discover)到。(大家肯定想说,这下有得玩了,嘿嘿)。这种漏洞的影响可大可小,主要看漏洞的环境和利用者(攻击者的)的技术了。好了,我们不谈这些了,直接转载 2016-09-14 09:39:45 · 7240 阅读 · 1 评论 -
前端模板的原理与实现
原文链接:https://segmentfault.com/a/1190000006990480时下流行什么react, avalon, angular, vue什么,其核心都离不开前端模板。理解前端模板,是我们了解MV* 的关键。前端框架最重要的目的是将页面渲染出来。“渲染”(render)这个词最初不是前端的东西的。前端之前叫做切图,将设计师做的PSD变成一个静态页面,然后加上动态转载 2016-10-11 12:56:19 · 3658 阅读 · 0 评论 -
webkit webApp 开发技术要点总结
如果你是一名前端er,又想在移动设备上开发出自己的应用,那怎么实现呢?幸好,webkit内核的浏览器能帮助我们完成这一切。接触 webkit webApp的开发已经有一段时间了,现把一些技巧分享给大家 :1. viewport:也就是可视区域。对于桌面浏览器,我们都很清楚viewport是什么,就是出去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域,这是真转载 2016-09-21 21:16:53 · 488 阅读 · 0 评论 -
如何面试前端工程师:GitHub 很重要
原文地址:https://segmentfault.com/a/119000000037513812月30日 2013年,作者 Alex MacCaw, 翻译:myownghost编者注:下面这篇文章从面试官的角度介绍到面试时可能会问到的一些问题。我在Twitter和Stripe的一部分工作内容是面试前端工程师。其实关于面试你可能很有自己的一套,这里我想跟你们分享一下我转载 2016-09-21 21:14:24 · 1219 阅读 · 0 评论 -
移动端开发适配2种方案总结
原文地址:http://www.cnblogs.com/tugenhua0707/p/5568734.html移动端开发适配2种方案总结针对移动端适配的方案~一: 第一种方案是:所有的单位使用rem来适配;首先在页面上设置html的font-size的大小;如下我项目中的设置:html { font-size: 100px; }@media(min-width转载 2016-09-21 21:05:20 · 3251 阅读 · 0 评论 -
webp图片实践之路
最近,我们在项目中实践了webp图片,并且抽离出了工具模块,整合到了项目的基础模板中。传闻IOS10也将要支持webp,那么使用webp带来的性能提升将更加明显。估计在不久的将来,webp会成为标配。本文主要分享一下我们在webp图片使用上的实践之路。 我们会从三部分来聊聊webp这个话题。什么是webp,它有什么用?使用webp的常规方法以及优劣。我们是如何用转载 2016-09-07 12:30:51 · 3016 阅读 · 2 评论 -
前端HTML5几种存储方式的总结
总体情况h5之前,存储主要是用cookies。cookies缺点有在请求头上带着数据,大小是4k之内。主Domain污染。主要应用:购物车、客户登录对于IE浏览器有UserData,大小是64k,只有IE浏览器支持。 目标解决4k的大小问题解决请求头常带存储信息的问题解决关系型存储的问题跨浏览器 1.本地存储localstorage转载 2016-09-07 12:16:34 · 15144 阅读 · 0 评论 -
前端文本截断
转自:http://efe.baidu.com/blog/text-truncating/误区在设计产品时,由于不少产品经理、工程师并没有「字符不一定等宽」的概念,往往会给出「超过 n 个字符截断显示,英文数字算一个字符,汉字算两个字符」这样的需求。要知道,这里面的问题有很多:为了显示效果,前端往往会采用优先西文字体族的 font-family 设置,即西文字符用西文字转载 2016-09-07 12:13:08 · 1266 阅读 · 0 评论 -
在大型项目中组织CSS
转自:http://www.zcfy.cc/article/1202 (译者:kayson)编写CSS容易。 编写可维护的CSS难。这句话你之前可能听过100次了。 原因是CSS中的一切都默认为全局的。如果你是一个C程序员你就知道全局变量不好。如果你是任何一种程序员,你都知道隔离和可组合的模块是构建可维护系统的关键。为了试图帮助人们构建可维护的CSS转载 2016-09-07 12:10:52 · 1967 阅读 · 1 评论 -
浏览器同源政策及其规避方法
转自:http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html浏览器安全的基石是”同源政策”(same-origin policy)。很多开发者都知道这一点,但了解得不全面。 本文详细介绍”同源政策”的各个方面,以及如何规避它。一、概述1.1 含义 1995年,同源政策由 Netscape 公司转载 2016-09-07 12:09:24 · 1189 阅读 · 0 评论 -
浏览器渲染页面过程描述,DOM编程技巧以及重排和重绘
一、浏览器渲染页过程描述1、浏览器解析html源码,然后创建一个DOM树。在DOM树中,每一个HTML标签都有一个对应的节点(元素节点),并且每一个文本也都有一个对应的节点(文本节点)。DOM树的根节点就是documentElement,对应的是html标签。2、浏览器解析CSS代码,计算出最终的样式数据。对CSS代码中非法的语法它会转载 2016-09-07 12:05:31 · 613 阅读 · 0 评论 -
移动前端知识总结
meta基础知识H5页面窗口自动调整到设备宽度,并禁止用户缩放页面meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />忽略将页面中的数字识别为电话号码meta name="fo转载 2016-09-20 14:34:33 · 483 阅读 · 0 评论 -
iscroll.js的使用
原文地址:https://segmentfault.com/a/1190000003113280入门Scroll是一个类,每个需要使用滚动功能的区域均要进行初始化。每个页面上的iScroll实例数目在设备的CPU和内存能承受的范围内是没有限制的。尽可能保持DOM结构的简洁。iScroll使用硬件合成层但是有一个限制硬件可以处理的元素。最佳的HTML结构如下:di转载 2016-09-20 14:30:57 · 2951 阅读 · 0 评论 -
JavaScript和jQuery懒加载之可视区域加载
JavaScript懒加载之可视区域加载在制作js可视区域加载之前,我们首先必须了解各种高度,我之前的一篇文章javascript的height总结,大家可以看一下,复习一下!了解了各种高度之后,我们开始我们的js代码吧!html>html lang="en">head> meta charset="UTF-8"> title>haorooms前端博转载 2016-09-20 14:08:42 · 2537 阅读 · 0 评论 -
jQuery的height()和JavaScript的height总结,js获取屏幕高度
引子在JavaScript和jQuery中,都有对各种高度的写法,在这里,我们就着重讲一下窗口、文档等高度的理解。(宽度和高度差不多!)jquery的各种高度首先来说一说$(document)和$(window),如下:$(document).height();//整个网页的高度$(window).height();//浏览器可视窗口的高度$(window).scr转载 2016-09-20 14:11:23 · 579 阅读 · 0 评论 -
移动端开发真机调试神器——browser-sync
原文链接:http://web.jobbole.com/87587/前言:博主翻山越岭,找了很久的真机调试, 从老古董,weinre,到微信开发者工具,到最后的browser-sync,最后这个工具真的是眼前一亮~本文默认前提:你已会使用gulp,npm,并且环境已经搭好1.npm init找到目录中的 package转载 2016-10-11 13:56:11 · 2974 阅读 · 0 评论 -
让你的页面支持WebP图像!
原文链接:http://bbs.csdn.net/topics/370172422WebP格式 WebP是Google推出的一种图片格式,它基于VP8编码,可对图像大幅压缩。与JPEG相同,WebP也是一种有损压缩,但在画质相同的情况下,WebP格式比JPEG图像小40%。 Wiki 百度百科 它是一个开源项目,我们可以在此获取其中源码,以及相关工具。浏览器支持转载 2016-09-26 20:19:21 · 20954 阅读 · 1 评论 -
鲜为人知的一个解决兼容性问题的利器——小数
原文链接:http://www.zhangxinxu.com/wordpress/?p=252写在前面的唠叨说到解决兼容性问题,不得不提一下css hack,曾几何时我以会使用几个hack沾沾自喜,后来发现自己真是个vip级别的蠢蛋,会用几个hack只是中级阶段,真正厉害的人要以没有hack同样可以实现复杂页面的兼容性,这才叫厉害。所以后来,苦心研究如何无hack实现各个浏转载 2016-10-12 15:00:17 · 597 阅读 · 0 评论 -
前端优化不完全指南
篇幅可能有点长,我想先聊一聊阅读的方式,我希望你阅读的时候,能够把我当作你的竞争对手,你的梦想是超越我。你想超越我,就得了解我懂什么对吧,好,开始阅读~ ~ 哈哈哈 ~ ~ ~历时144000000毫秒出山的前端优化篇,若你问我有什么感悟?那我告诉你,看到毫秒啊,火箭啊,这些与优化相关的词,都有莫名的亲切感。本文主要从工作效率、速度性能、稳定性、响应式、兼容性、搜索SEO、信息无障转载 2016-09-26 10:00:32 · 1288 阅读 · 0 评论 -
大公司是怎么发布静态资源的
原文地址:https://segmentfault.com/a/1190000007122250?utm_source=weekly&utm_medium=email&utm_campaign=email_weekly静态资源(Static Resources): js、css、img 等非服务器动态运行生成的文件。在一般的网站中,静态资源使用频率高,流量占用大。对于有追求转载 2016-10-13 13:38:40 · 7004 阅读 · 0 评论 -
大公司里怎样开发和部署前端代码?
主要有以下问题:开发时的和部署时类库的引用和存放是一致还是不同?模块放在项目中还是放在 CDN 之类服务器?渲染网页用 Nginx 还是其他动态语言的 Web 服务器?制作网页的流程,是先有设计师的稿,还是先看模块?会选择用自己写的模块还是从社区寻找模块?作者:张云龙链接:https://www.zhihu.com/question/207905转载 2016-10-13 13:42:59 · 1124 阅读 · 0 评论 -
前端优化实践总结
原文链接:https://aotu.io/notes/2016/04/12/jcloud-opt/记得前百度工程师张云龙说过,页面前端优化问题绝对不仅仅是为页面提速的问题,更是工程的问题,有兴趣的同学可以阅读《前端工程与性能优化》。里面有提到根据雅虎14条优化原则,《高性能网站建设指南》以及《高性能网站建设进阶指南》中提到的优化点梳理出来的优化方向:张云龙先生提及到的优转载 2016-10-14 10:54:14 · 577 阅读 · 0 评论 -
HTTP请求异步和同步的区别
转自:http://kevinpeng.javaeye.com/blog/677797 举个例子:普通B/S模式(同步)AJAX技术(异步) 同步:提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事 异步: 请求通过事件触发->服务器处理(这是浏览器仍然可以作其他事情)->处理完毕 同步就是你叫我去吃饭,我听到了就和你去吃饭;如果没有听到,转载 2016-10-08 11:31:08 · 5002 阅读 · 0 评论 -
前端技能图谱
前端门槛低,但是里面门道很多,要想成为一个好的前端一点都不简单。概述前端的大概知识点我相信想开始学习前端的小伙伴们都会听说过html,css和js这三个大家伙。简单来说html就是一堆标签,然后可以在页面显示出一些控件,例如表格,输入框,按钮等。而css的作用在于控制html的标签位置,效果等,如果不是css的话,我们不会见到平时那些如此美观的页面。js的作用主要是提供运算转载 2016-09-30 17:06:09 · 921 阅读 · 0 评论 -
如何进行前端自动化测试?
作者:张云龙链接:http://www.zhihu.com/question/29922082/answer/46141819来源:知乎著作权归作者所有,转载请联系作者获得授权。前端测试是前端工程方面的重要分支,有过一些探索,这里简单分享一下。首先,还是要强调一点:前端是一种特殊的GUI软件看过我最近一年内做前端工程方面相关分享的人可能有印象,我转载 2016-09-30 16:59:17 · 4524 阅读 · 0 评论 -
前端:将页面打造成单页面应用SPA
前言不知你有没有发现,像Github、百度、微博等这些大站,已经不再使用普通的a标签做跳转了。他们大多使用Ajax请求替代了a标签的默认跳转,然后使用HTML5的新API修改了Url,你可以在F12的Network面板里发现这个秘密。这项技术并没有特别标准的学名,大家都称呼为Pjax,意为PushState + Ajax。这并不完全准确,因为还有Hash + Ajax等方法,但为了方便转载 2016-10-25 16:00:15 · 3539 阅读 · 0 评论 -
使用weinre在PC端同步远程调试移动端页面(在xampp上部署项目到Tomcat,并通过外网访问(图解). )
(一)weinre1.简介weinre是一款非常好用的远程调试工具。功能与网页浏览器的开发者工具基本类似,但这个工具更适合用于移动端web的调试。2.安装weinre基于nodejs,因此首先要安装nodejs,然后使用npm进行安装:npm -g install weinre3.运行weinre --httpPort 8081 --boundHos原创 2016-09-27 19:46:10 · 1220 阅读 · 0 评论 -
判断IE版本的HTML语句[if lte IE 9]……[endif]
我们常常会在网页的HTML里面看到形如[if lte IE 9]……[endif]的代码,表示的是限定某些浏览器版本才能执行的语句,那么这些判断语句的规则是什么呢?请看下文: 除IE外都可识别 所有的IE可识别 仅IE6可识别 IE6以及IE6以下版本可识别 IE6以及IE6以上版本可识别 仅IE7可识别 IE7以及IE7以下版本可识别 IE7以及转载 2016-09-28 13:04:10 · 13972 阅读 · 1 评论 -
只有20行Javascript代码!手把手教你写一个页面模板引擎
原文链接:http://web.jobbole.com/56689/AbsurdJS 作者写的一篇教程,一步步教你怎样用 Javascript 实现一个纯客户端的模板引擎。整个引擎实现只有不到 20 行代码。如果你能从头看到尾的话,还能有不少收获的。你甚至可以跟随大牛的脚步也自己动手写一个引擎。以下是全文。不知道你有木有听说过一个基于Javascript的Web页面预处理器,叫转载 2016-09-27 09:49:25 · 1600 阅读 · 0 评论 -
JavaScript 获取鼠标及元素在页面上的位置
JavaScript获取鼠标的位置,大家会想到clientX/Y等属性,灵活的获取鼠标的位置信息,能够便于我们实现各种复杂的页面交互效果,到底还有哪些属性可以获取鼠标的位置信息?另外,还有哪些能快速获取标签在页面中的位置信息?在书写一些“拖拽”页面交互效果,比如常见的拖拽效果、自定滚动条、放大镜等效果,都需要用到了鼠标或元素在页面上的位置信息。为了能够快速、灵活的获取鼠标位置信息,今天要带转载 2016-09-27 09:44:37 · 11039 阅读 · 0 评论 -
扒一扒“WEBP格式”的图片
谷歌于2010年推出的新一代图片格式 —— WEBP,随着移动互联网的发展,WEBP格式在2015年逐渐的开始被大公司部分采用。本文主要除了比较WEBP与JPG等传统格式的图片之外,还介绍了如何转换WEBP格式图片以及具体开发时的用法。使用WEBP图片的目的保证图片质量的前提下缩小图片体积。JPEG、PNG以及GIF这些格式的图片已经没有太大的优化空间。但是,WebP图片格式给图片转载 2016-09-27 09:31:17 · 11288 阅读 · 0 评论 -
解决less的data-uri函数无法处理相对路径的Bug
Bug由来从1.4.0版本开始,less添加了一个很好用的内置函数:data-uri。这个函数可以自动将less代码中引用的图片进行base64编码。比如我们要引用一个小图片作为背景,我们可以这样写: .foo-icon { background: data-uri('./img/foo.png') no-repeat; *background": url转载 2016-09-22 19:37:11 · 1652 阅读 · 0 评论 -
使用Flexible实现手淘H5页面的终端适配
此段代码实现动态计算,事实上他做了这几样事情:动态改写 标签给 元素添加 data-dpr 属性,并且动态改写 data-dpr 的值给 元素添加 font-size 属性,并且动态改写 font-size 的值代码:[javascript] view plain copy print?;(function(wi转载 2016-09-19 11:10:52 · 1735 阅读 · 0 评论 -
如何运用最新的技术提升网页速度和性能
最近更新了我们的网站,它是经过了设计上的全面验收的。但实际上,作为软件开发者,我们会注重很多技术相关的零碎的东西。我们的目标是控制性能,注重性能,未来可伸展,为网站增添内容是一种乐趣。接着就来告诉你,为什么我们的网站速度比你们的快吧(抱歉,确实是这样的)。性能设计在我们的项目中,我们每天都会和设计师和产品负责人讨论关于平衡美观和性能的问题。对于我们自己的网站,这样做是很简单的。简言转载 2016-09-06 09:34:59 · 1859 阅读 · 0 评论 -
web前端性能优化总结
网站的划分一般为二:前端和后台。我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等。而前端呢?其实应该是属于功能的表现。并且影响用户访问体验的绝大部分来自前端页面。 而我们建设网站的目的是什么呢?不就是为了让目标人群来访问吗?所以我们可以理解成前端才是真正和用户接触的。除了后台需要在性能上做优化外,其实前端的页面更需要在性能优化上下功夫,只有原创 2016-09-03 17:07:59 · 1270 阅读 · 0 评论 -
【转载】 前端面试
一:先来看道js笔试题 貌似我写错了,把参数误漏了。囧var x=1;var y=1;method(8);alert(x+y);-后输出5function method(y){ x+=3; x为全局变量 y+=3; 参数y,这里仅仅是局部变量 alert(x+y);--先输出15}原创 2016-09-03 17:08:33 · 471 阅读 · 0 评论 -
ajax与HTML5 history pushState/replaceState实例
一、ajax载入与浏览器历史的前进与后退众所周知,Ajax可以实现页面的无刷新操作——优点;但是,也会造成另外的问题,无法前进与后退!曾几何时,Gmail似乎借助iframe搞定,如今,HTML5让事情变得如同过家家般简单。当执行Ajax操作的时候,往浏览器history中塞入一个地址(使用pushState)(这是无刷新的);于是,返回的时候,通过URL或其他传参,我们就可以还原到Aja原创 2016-09-03 17:08:46 · 308 阅读 · 0 评论 -
HTML5 history新特性pushState、replaceState
https://developer.mozilla.org/en/DOM/Manipulating_the_browser_historyDOM中的window对象通过window.history方法提供了对浏览器历史记录的读取,让你可以在用户的访问记录中前进和后退。从HTML5开始,我们可以开始操作这个历史记录堆栈。 1.History使用back(),forward(),和原创 2016-09-03 17:08:48 · 533 阅读 · 0 评论 -
HTML5无刷新修改Url,history pushState/replaceState
一、认识window.historywindow.history表示window对象的历史记录,是由用户主动产生,并且接受javascript脚本控制的全局对象。window对象通过history对象提供对览器历史记录的访问能力。它暴露了一些非常有用的方法和属性,让你在历史记录中自由前进和后退。1、历史记录的前进和后退在历史记录中后退,可以这么做:window.history.原创 2016-09-03 17:09:26 · 5692 阅读 · 0 评论 -
使用Vue快速开发单页应用
本文所涉及代码全在vue-cnode单页应用,即在一个页面集成系统中所有功能,整个应用只有一个页面。因为路由的控制在前端,单页面应用在页面切换时比传统页面更快,从而在前端体验更好。将逻辑从后端转移到前端,提升了性能减少了页面加载时间,前后逻辑更扁平。但是当页面复杂度变高时,你会发现,数据处理,UI交互将变得难以维护,所以应运而生,出现了很多MV框架和类库。Vue就是其中之一,个人觉得(原创 2016-09-03 17:09:41 · 16524 阅读 · 0 评论