缺点是：此方案不适合mobile应用；IE7以下不支持；如果一张图片在多个页面被用到，无法利用浏览器缓存。 为了解决无法缓存问题，可以将data:image应用到CSS样式中，比如：
原则上来说，HTML在使用<script>标签加载外部脚本文件时，会顺序下载，顺序执行，并阻碍其他资源文件的下载，比如图片（当然，如今主流浏览器是可以实现JS和CSS文件并行下载）。
安全涉及的领域很大， 我也仅仅是了解一些皮毛， 每次面试前都要找资料复习， 很麻烦。
CSS相信大家不会陌生，在百度百科中它的解释是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。 那么，它仅仅只是一种用来表示样式的语言吗？当然不是！其实早在几年前，CSS就已被安全研究人员运用于渗透测试当中。这里有一篇文章就为我们详细介绍了一种，使用属性选择器和iFrame，并通过CSS注入来窃取敏感数据的方法。但由于该方法需要iFrame，而大多数主流站点都不允许该操作，因此这种攻击方法并不实用。 这里我将为大家详细介绍一种不需要ifram
本文结合自己前端日常开发中，经常用到的且非常重要的一些知识点，进行了汇总，这是本系列第一篇。
本文是笔者对Mario Kosaka写的inside look at modern web browser系列文章的翻译。这里的翻译不是指直译，而是结合个人的理解将作者想表达的意思表达出来，而且会尽量补充一些相关的内容来帮助大家更好地理解。
Promise本身是同步的立即执行函数， 当在executor中执行resolve或者reject的时候, 此时是异步操作， 会先执行then/catch等，当主栈完成后，才会去调用resolve/reject中存放的方法执行，打印p的时候，是打印的返回结果，一个Promise实例。
例如同一个域名 CDN 服务器上的 a.js，b.js，c.js 就可以按如下方式在一个请求中下载：
国庆假期结束,这一节准备XSS跨站攻击渗透测试中的利用点,上一节讲了SQL注入攻击的详细流程,很多朋友想要咨询具体在跨站攻击上是如何实现和利用的,那么我们Sinesafe渗透测试工程师为大家详细的讲讲这个XSS是如何实现以及原理。
要介绍进程与线程的话，需要先讲解下并行处理，了解了并行处理的概念，再理解进程和线程之间的关系就会变得轻松许多。
智选SDK为广大开发者推荐当下实用好玩的SDK，帮助开发者创造出有影响力的产品。每周一款精选SDK分布于社交分享、设计开发、云服务、支付平台等领域，分享激发创意，BestSDK让好产品发出声音! 近期OneAPM Browser Insight 在原有的五个指标（请求排队、网络、web应用程序、页面加载、资源下载）的基础上增加了5个指标（白屏时间，首屏时间，页面加载完成时间， 资源下载完成时间，整页时间）。 这10个指标分别都是什么意思？和我的网站又有什么关系？为什么TOPN页面会惊现平均时间为1分钟？是
所谓浏览器跨域限制，其实是为了数据安全的考虑由Netscape提出来限制浏览器访问跨域数据的策略。 这是一种约定，正式叫法为“浏览器同源策略”，目前已经在大多数浏览器中支持。
取消跨域限制、跨域名携带Cookie限制、跨域名操作iframe限制之后的Chrome可以更加方便Web前端开发，同时也可以作为一个完美的爬虫框架。
本文主要考虑客户端性能、服务器端和网络性能，内容框架来自Yahoo Developer Network，包含 7 个类别共 35 条前端性能优化最佳实践，在此基础上补充了一些相关或者更符合主流技术的内容。
本文主要介绍了HTTP/2对比HTTP/1.1在性能上的突出优势，通过支持请求与响应的多路复用来达到低延迟的效果，同时实现了一个在线的对比样例，并具体介绍了使用腾讯云CDN,COS,以及万象优图搭建这个样例的过程。如果你的网站还没使用HTTP/2，赶快来试一试吧！
相信每一个前端er对于跨域这两个字都不会陌生，在实际项目中应用也是比较多的。但跨域方法的多种多样实在让人目不暇接。老规矩，碰到这种情况，就只能自己总结一篇博客，作为记录。
点击劫持（ClickJacking）是一种视觉上的欺骗手段。 一是攻击者使用一个透明的iframe，覆盖在一个网页上，然后诱使用户在该页面上进行操作，此时用户将在不知情的情况下点击透明的iframe页面； 二是攻击者使用一张图片覆盖在网页，遮挡网页原有位置的含义； iframe解决方法 使用一个HTTP头——X-Frame-Options。X-Frame-Options可以说是为了解决ClickJacking而生的，它有三个可选的值： DENY：浏览器会拒绝当前页面加载任何frame页面； SAMEOR
iframe 用于在页面内显示页面，使用 <iframe> 会创建包含另外一个文档的内联框架（即行内框架）
可以查看到网站所有资源的请求情况，包括加载时间、尺寸大小、优先级设置及HTTP缓存触发情况等信息，从而帮助我们发现可能由于未进行有效压缩而导致资源尺寸过大的问题，或者未合理配置缓存策略导致二次请求加载时间过长的问题等
为什么要配置HTTP响应头? 不知道各位有没有被各类XSS攻击、点击劫持 (ClickJacking、 frame 恶意引用等等方式骚扰过，百度联盟被封就有这些攻击的功劳在里面。为此一直都在搜寻相关
前端的性能优化是一个很宽泛的概念，最终目的都是为了提升用户体验，改善页面性能。面试的时候经常会遇到问谈谈性能优化的手段，这个我分几大部分来概述，具体细节需要自己再针对性的去搜索，只是提供一个索引（太多了写不过来+主要是懒得写）。这里PC端和移动端分开说了，业务场景不同，需要考虑各自的优化手段
最近面试问的挺多的一个问题，就是JavaScript的跨域问题。在这里，对跨域的一些方法做个总结。由于浏览器的同源策略，不同域名、不同端口、不同协议都会构成跨域；但在实际的业务中，很多场景需要进行跨域传递信息，这样就催生出多种跨域方法。
web前端安全方面技术含有的东西较多，这里就来理一理web安全方面所涉及的一些问题。
本文先从第三方Javascript脚本的重要组成部分“投放代码”讲起。先从一个最例子看起：Google Analytics（以下简称GA），是Google提供的用于网站监测等一系列功能的服务。网站开发者将GA提供的投放代码放到自己网站上需要监测的页面（一般是全站添加）。
由于requests模块是一个不完全模拟浏览器行为的模块，只能爬取到网页的HTML文档信息，无法解析和执行CSS、JavaScript代码，因此需要我们做人为判断；
前端安全问题主要有XSS、CSRF攻击 XSS：跨站脚本攻击 它允许用户将恶意代码植入到提供给其他用户使用的页面中，可以简单的理解为一种javascript代码注入。 XSS的防御措施：
随着互联网的发展，许多网站开始采用动态网页来呈现内容。与传统的静态网页不同，动态网页使用JavaScript等脚本技术来实现内容的动态加载和更新。这给网页爬取带来了一定的挑战，因为传统的爬虫工具往往只能获取静态网页的内容。本文将介绍如何使用Selenium和API来实现动态网页的爬取
真正了解前端技术的工程师都会感觉前端技术发展变化太快。浏览器特性、前端框架、前端工具、多终端浏览器等都在快速迭代中。作为前端工程师不仅要掌握现有的技术去实现业务需求，更要不断的学习新的技术、新的理念，时刻准备着新技术浪潮的来临。
a. 请求数量：合并脚本和样式表，CSS Sprites，拆分初始化负载，划分主域
第一种：selenium导入浏览器驱动，用get方法打开浏览器，例如： import time from selenium import webdriver def mac(): driver = webdriver.Firefox() driver.implicitly_wait(5) driver.get("http://huazhu.gag.com/mis/main.do") 第二种：通过导入python的标准库webbrowser打开浏览器，例如： >>> import webbrowser >>> webbrowser.open("C:\\Program Files\\Internet Explorer\\iexplore.exe") True >>> webbrowser.open("C:\\Program Files\\Internet Explorer\\iexplore.exe") True 第三种：使用Splinter模块模块 一、Splinter的安装 Splinter的使用必修依靠Cython、lxml、selenium这三个软件。所以，安装前请提前安装 Cython、lxml、selenium。以下给出链接地址： 1）http://download.csdn.net/detail/feisan/4301293 2）http://code.google.com/p/pythonxy/wiki/AdditionalPlugins#Installation_no 3）http://pypi.python.org/pypi/selenium/2.25.0#downloads 4）http://splinter.cobrateam.info/ 二、Splinter的使用 这里，我给出自动登录126邮箱的案例。难点是要找到页面的账户、密码、登录的页面元素，这里需要查看126邮箱登录页面的源码，才能找到相关控件的id. 例如:输入密码，密码的文本控件id是pwdInput.可以使用browser.find_by_id()方法定位到密码的文本框， 接着使用fill()方法，填写密码。至于模拟点击按钮，也是要先找到按钮控件的id,然后使用click()方法。 #coding=utf-8 import time from splinter import Browser def splinter(url): browser = Browser() #login 126 email websize browser.visit(url) #wait web element loading time.sleep(5) #fill in account and password browser.find_by_id('idInput').fill('xxxxxx') browser.find_by_id('pwdInput').fill('xxxxx') #click the button of login browser.find_by_id('loginBtn').click() time.sleep(8) #close the window of brower browser.quit() if __name__ == '__main__': websize3 ='http://www.126.com' splinter(websize3) WebDriver简介 selenium从2.0开始集成了webdriver的API，提供了更简单，更简洁的编程接口。selenium webdriver的目标是提供一个设计良好的面向对象的API，提供了更好的支持进行web-app测试。从这篇博客开始，将学习使用如何使用python调用webdriver框架对浏览器进行一系列的操作 打开浏览器 在selenium+python自动化测试（一）–环境搭建中，运行了一个测试脚本，脚本内容如下： from selenium import webdriver import time driver = webdriver.Chrome() driver.get("http://www.baidu.com") print(driver.title) driver.find_element_by_id("kw").send_keys("s
html5相对于以前的html（html4，xhtml等）更加简洁更加的人性化。主要体现在一下几个方面：
「网页」主要是由文字、图像和超链接等元素构成，当然除了这些元素，网页中还可以包括音频、视频以及Flash等。
目前，移动设备浏览器上常用的内核有Webkit，Blink，Trident，Gecko等，其中iPhone和iPad等苹果iOS平台主要是WebKit，Android 4.4之前的android系统浏览器内核是WebKit，Android4.4系统浏览器切换到了Chromium(内核是Webkit的分支Blink)，Windows Phone 8系统浏览器内核是Trident。
在前端项目开发完成，我们肯定是需要对前端的项目进行测试优化。我们可以先用一些第三方工具对网站进行分析。工具例如
一个完整的域名由二个或二个以上部分组成，各部分之间用英文的句号”.”来分隔，最后一个”.”的右边部分称为顶级域名（TLD，也称为一级域名），最后一个”.”的左边部分称为二级域名（SLD），二级域名的左边部分称为三级域名，以此类推，每一级的域名控制它下一级域名的分配。定义是这样的，在域名中包含两个点的，就叫二级域名，只包含一个点的，就是一级域名。
中央处理器, 解释计算机指令以及处理计算机软件中的数据, 功能强大，它可以串行地一件接着一件处理交给它的任务
翻译后发现貌似已经有人翻译过，但是翻译的水平就有点。。。。。那篇文章中不仅忽略了知识点，并且出现了明显的语义和语法错误，有一定的误导作用，所以请务必重新阅读老高的翻译。文章中容易出错的地方老高已经注释（在文章中以【】标出）。
最主要的是，由于拖放操作不受浏览器“同源策略“影响，用户可以把一个域的内容拖放到另一个不同的域，由此攻击者可能通过劫持某个页面的拖放操作实现对其他页面链接的窃取，从而获得session key,token,password等敏感信息，甚至能将浏览器中的页面内容拖进文本编辑器，查看源代码。
但是你根本还是不清楚你性能优化的程度，不知道你网站的性能如何就像盲目地填一个不知道多深的坑，如此没有目的性的优化必然浪费大量精力而得不到想要的结果
CSRF（Cross Site Request Forgery, 跨站域请求伪造）是一种网络的攻击方式，它在 2007 年曾被列为互联网 20 大安全隐患之一。其他安全隐患，比如 SQL 脚本注入，跨站域脚本攻击等在近年来已经逐渐为众人熟知，很多网站也都针对他们进行了防御。然而，对于大多数人来说，CSRF 却依然是一个陌生的概念。即便是大名鼎鼎的 Gmail, 在 2007 年底也存在着 CSRF 漏洞，从而被黑客攻击而使 Gmail 的用户造成巨大的损失。
在最近发布的 Chrome 113、114 两个版本中，有两个关于 Cookie 的变化：
性能优化不单指优化一个页面的打开速度，在开发环境将一个项目的启动时间缩短使开发体验更好也属于性能优化，大文件上传时为其添加分片上传、断点续传也属于性能优化。在项目开发以及用户使用的过程中，能够让任何一个链路快一点，都可以被叫做性能优化。
因为在web交互的环境中，只能保证请求发自某个用户的浏览器，却不能保证请求本身是用户自愿发出的。
前端性能优化与重绘与回流有关系的原因是：频繁的触发重绘与回流，会导致UI频繁染，最终会导致js变慢，会导致页面性能变差
在从事前端开发过程中，浏览器作为最重要的开发环境，浏览器基础是是前端开发人员必须掌握的基础知识点，它贯穿着前端的整个网络体系。对浏览器原理的了解，决定着编写前端代码性能的上限。浏览器作为JS的运行环境，学习总结下现代浏览器的相关知识
在2010的Black Hat Europe大会上，Paul Stone提出了点击劫持的技术演进版本：拖放劫持。由于用户需要用鼠标拖放完成的操作越来越多（如复制粘贴、小游戏等等），拖放劫持大大提高了点击劫持的攻击范围，将劫持模式从单纯的鼠标点击拓展到了鼠标拖放行为。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
